Как легко и быстро вставить таблицу в блог
Здравствуйте, дорогие друзья!
Сначала давайте поговорим о том, зачем вообще нужны таблицы в тексте статьи. Дело в том, что если нам нужно изобразить на странице блога не сплошной текст, а разместить на ней разные объекты в строго определенных местах, то без использования таблиц это сделать очень трудно, а порой просто не возможно.
Приведу пример. Допустим, необходимо представить какой-то перечень товаров с картинками, причем описание товаров может занимать как 1 строчку, так и несколько, быть короче по высоте, чем картинка или длиннее.
|
Утюг
|
Замечательный утюг фирмы «Сам погладь», поможет вам привести в порядок ваши вещи буквально легким движением руки. |
|
Стиральная машина
|
Стиральная машина самостоятельно и качественно стирает носки, джинсы и даже огромные одеяла. |
|
Веник
|
Сам не подметает, поэтому и стоит дешево. |
Чтобы картинки не налезали одна на другую, а описание находилось строго напротив картинок, и используется таблица. В данном примере таблица состоит из 3 строк и 2 столбцов.
Как формируется таблица для вывода ее на страницах блога или сайта
Для создания таблицы используются 3 основных тега (команды HTML):
<table> … </ table> обозначает начало и конец таблицы.
<tr> … </tr> обозначает начало и конец каждой строки в таблице.
<td> … </td> обозначает начало и конец каждой ячейки в строке.
Часто можно встретить еще тег <tbody> … </tbody>, но он не обязательный и таблица отобразится на сайте и без него.
Для того, чтобы таблицу для нашего примера поместить в блог, нужно перейти в редактор кода HTML:
И записать там такой HTML-код:
<table>
<tr>
<td> Утюг </td>
<td> Замечательный утюг фирмы «Сам погладь», поможет вам
привести в порядок ваши вещи буквально
легким движением руки.
</td>
</tr>
<tr>
<td> Стиральная машина </td>
<td> Стиральная машина самостоятельно и качественно
стирает носки, джинсы и даже огромные одеяла.
</td>
</tr>
<tr>
<td> Веник </td>
<td> Сам не подметает, поэтому и стоит дешево. </td>
</tr>
</table>
|
Картинки мы пока здесь не прописываем, их можно вставить обычным способом через функцию добавления картинок в редакторе блога. Но не забывайте о размере картинок – они должны поместиться в ячейки!
Даже, если таблица состоит из одной ячейки, то необходимо использовать эти три тега:
<table> <table> <tr> <td> Текст внутри ячейки </td> </tr> </ table> |
Теперь начинается самое интересное. Вы, наверное, уже загрустили от того, что придется писать эти теги, в которых так легко ошибиться с непривычки.
Но не горюйте! Если вы умеете создавать таблички в Word’е, то сможете легко и быстро вставить таблицу в блог, а потом вам надо будет лишь слегка ее подправить.
Что нужно для этого сделать:
- Создаете в Word’е таблицу, в которую можно прямо там ввести текст. Картинки в Word’е не вставляйте.
- Выделяете эту таблицу и копируете в буфер обмена (Ctrl+C)
- Заходите в админку блога и в режиме Визуального редактора вставляете эту таблицу в нужном месте (Ctrl+V). Все, таблица готова.
Но будьте готовы к тому, что эта таблица будет выглядеть на странице блога не так красиво, как вам бы хотелось. Хотя может и сразу получится так как надо. Это зависит от вида исходной таблицы в Word’е. Обычно при таком копировании Wordpress пытается передать внешний вид таблицы как можно точнее, но из-за того, что ширина страницы в Word’е больше, чем в блоге, таблица может вылазить за границы области, предназначенной для статьи.
Для того, чтобы исправить это недоразумение, перейдите в редактор кода (HTML) и найдите там текст, описывающий таблицу:
<table и т.д.
Вы увидите, что там есть еще много незнакомых слов, которые дописал сам Wordpress. Не ругайтесь, он на самом деле очень старался
Давайте разберем, что обозначают эти словеса и что нам с ними делать.
В первой строке сразу после уже знакомого тега table скорее всего будет стоять такой текст:
border=”1″ cellspacing=”0″ cellpadding=”0″ width=”какое-то число”
border – обозначает толщину границ в таблице. В данном случае – 1 пиксель. Если вы не хотите, чтобы у вашей таблицы вообще были границы, то поставьте значение ноль.
cellspacing – определяет расстояние между ячейками таблицы. Если сделать это значение в несколько пикселей, то ячейки таблицы как бы расползутся. Это свойство можно оставить так как есть.
cellpadding – назначает отступы между содержанием ячейки и границей этой яцейки. На самом деле очень полезное свойство и я рекомендую для него поставить значение 10-15 пикселей, чтобы текст в ячейках был более читабельный, а картинки не «прилипали» к границам ячеек.
width– задает общую ширину таблицы. Обратите особое внимание на это свойство, так именно оно может испортить всю красоту. Если ширина таблицы больше, чем ширина статьи в блоге, то таблица очень некрасиво вылезет на боковую колонку. Вы можете совсем удалить это свойство, но лучше задайте такую ширину таблицы, чтобы она поместилась на странице.
Я уже выкладывала очень удобную программу Rule для определения размеров объектов на экране компьютера, найти ее можно в статье Как задаются значения цвета в CSS
Смотрим дальше.
<td width=”319″ valign=”top”>
Здесь тоже посмотрите, какое значение стоит у свойства width. Оно задает ширину ячейки. Если общая ширина ячеек в строке таблицы будет больше, чем ширина статьи в блоге, то таблица очень некрасиво вылезет на боковую колонку. Если ширина ячейки для вас не принципиальна, то лучше совсем удалите это свойство.
valign – свойство valign отвечает за выравнивание по вертикали содержания ячейки таблицы. У него могут быть такие основные значения:
top – выравнивание по верхнему краю.
bottom – выравнивание по нижнему краю.
middle – выравнивание по середине.
Выбирайте, какое вам больше подходит.
Ну вот теперь, таблица действительно готова.
Переходим в Визуальный редактор и вставляем картинки в нужные ячейки, так, как вы их обычно вставляете в свой блог. Для картинок лучше выбирать какой-нибудь вид выравнивания: по центру, по левому или по правому краю.
О том, как сделать фон в табличке, изменить цвет границ, мы поговорим в одном из следующих постов.
Но хочу вас сразу предупредить о том, что некоторые темы для блогов не позволяют настраивать значения для таких свойств таблицы, как cellpadding, border и некоторых других. Тема Corponisa, которая установлена на этом блоге, тоже как оказалось, имеет такую вредную привычку. Мне пришлось подправлять рамки и отступы в табличках с помощью CSS.
CSS – это вообще мощная вещь и позволяет делать на блоге все, что угодно. Олег Михайленко на своем блоге рассказывает, как можно создавать многоколоночную верстку блога с помощью CSS3.
Желаю успехов в оформлении вашего блога!
Спасибо вам огромное за такое полное разъяснение! Давно искала как добавить таблицу в блог и нигде не находила.
Сама часто раньше вставляла таблицы в посты финансового стриптиза. Приходилось вставлять просто картинкой из ворда. Настоящее УГ получалось. Но ведь вставить таблицу в блог надо, а как не знала. Все -ваша статья у меня в закладках!
Спасибо за информацию о том, как вставить таблицу в блог. У меня это долго не получалось, а с вашей подробной инструкцией сразу получилось)))
Огромное спасибо за такую подробную статью. Я до этого несколько раз пыталась вставить таблицу в блог, но выходило постоянно очень коряво. Теперь, надеюсь, с новыми знаниями у меня особых проблем не возникнет.
Спасибо за инструкцию! Я как-то долго искала возможность вставить таблицу в блог, но так и не нашла. Спустя пару дней меня осенила мысль воспользоваться Дримвьювером, сделала там и скопировала код в пост.
Я довольно недавно начала экспериментировать с таблицами в блоге. Как здесь и говорилось, в основном создавала ее в Ворде и копировала в запись. О тегах даже и не догадывалась.
Теперь возьму на заметку вашу статью и буду правильно добавлять таблицу в блог. Спасибо!
Со вставкой таблиц я разобрался. Уж вставить то из Ворда всегда можно. Вот с чем беда. Слишком много тэгов. Для каждой новой строки описание повторяется. Причем, иногда получается только в начале HTML кода все эти width и valign, а бывает по всей таблице. Хочется вставить из других редакторов (Word, Excel) в сайт, чтобы потом не чистить весь день. Таблицы большие. Помогите !
Если у вас, JoomZZZ, получаются большие таблицы, то их лучше создавать и редактировать в Dreamweaver’е или в каком-нибудь подобном редакторе для HTML-кода. Там можно легко в режиме визуального редактора вставить таблицу из того же Word’а, а потом с помощью функции найти и заменить убрать все ненужные теги. Я обычно заменяю их просто на пробел. Программа Dreamweaver делает это все автоматически.
Я пользуюсь автоматическими программами, которые за пару минут генерирую то, что вам нужно и помогают без лишних заморочек вставить таблицу в блог…
Для меня было темным лесом, как вставить таблицу в блог…. Теперь всё предельно понятно. Спасибо!
Спасибо за помощь и информацию о том, как вставить блог в таблицу. Далго мучиалсь, не могла найти подробную информацию. Сделала все как написано у Вас – получилось!
Я постоянно использую таблицы в своих статьях, так намного проще и удобней не только разместить картинки в тексте, но и придать структуру всему материалу. Добавить таблицу в блог проще всего при помощи визуального редактора.
Спасибо за подробное описание, до сих пор не знала как вставить таблицу в статью, к своему стыду.
спасибо вам за информацию очень полезная окозалось, до сих пор не знала как вставить таблицу в документ к своему стыду
Пожалуйста, Жанна!
А почему “к стыду”? Мы все постоянно чему-то учимся. По-моему, не стыдно чего-то не знать, а стыдно ни к чему не стремиться
Спасибо за статью!
А вот такой вопрос! В файлике style.css прописан стиль, а именно, межстрочный интервал и отступ первой строки текста.
p {
line-height: 150%;
text-indent: 30px;
}
Так у меня же это и в создаваемой таблице работает! А мне не надо! Как это отключить для конкретной страницы, таблицы или текста? Простой пример: Страница с текстом, посредине страницы таблица и вот в ней эти отступы первых строк очень не нужны.
Виктор, задайте для абзацев в таблице свой стиль. Например, добавьте в файл стилей такой фрагмент (только располагайте его ниже того, что вы указали):
td p {
text-indent: 0;
}
Т.е. для абзацев внутри ячеек таблицы установить отступ 0
Потрясающе! Работает! Весь инет ковыряю уже две недели… Кругом, будто партизаны одни собрались, нигде ни слова про это! Благодарю Вас, Марина за быстрый и грамотный ответ. Будьте здоровы и счАстливы! С уважением!!!
Я делаю так — сделать таблицу в Ворд, потом сохранить как Веб-страницу, открыть сохраненный файл с помощью текстового редактора, копирую содержимое, открываю HTML редактор записи Вордпресс, вставляю, обязательно предпросмотр.
Вот как у меня выходит; informationsunami.ru/?p=602#more-602
Максим, спасибо за комментарий!
Но в вашем способе есть одно “но”. Когда вы сохраняете вордовский документ как веб-страницу, то ворд добавляет очень много лишнего кода, который потом только грузит вашу страницу.
Щелкните правой кнопкой мыши на вашей страничке с таблицей и выберите “исходный код страницы” и вы увидите, сколько всего ворд напихал в теги таблицы.
Пишу таблицы в коде. Нужно несколько таблиц на одной странице. При определенном количестве таблиц – страница начинает отображаться пустой, хотя в визуальном редакторе все “ок”. Ни кто не сталкивался с такой проблемой?
Спасибо вам огромнейшее за такое популярное разъяснение! Промучилась с этими таблицами до зелёного каления))) Как только не пробовала, что только не делала… Хотела уже плюнуть на это дело, да на счастье попала к вам. Пусть муторная работа получилась руками теги вставлять, но зато результативно)
Для таблиц есть плагин TinyMCE Advanced – продвинутый текстовый редактор,он добавляет в стандартный редактор ворлд пресса функцию рисования таблицы как в Ворде.Это думаю намного удобней чем прописывать теги для обычного пользователя.
Скачать текстовый редактор TinyMCE Advanced можно с официального сайта вордпресс (http://wordpress.org/extend/plugins/tinymce-advanced/)
Спасибо, Денис! Я не знала про этот плагин. Обязательно установлю себе.