Сначала давайте поговорим о том, зачем вообще нужны таблицы в тексте статьи. Дело в том, что если нам нужно изобразить на странице блога не сплошной текст, а разместить на ней разные объекты в строго определенных местах, то без использования таблиц это сделать очень трудно, а порой просто не возможно.
Приведу пример. Допустим, необходимо представить какой-то перечень товаров с картинками, причем описание товаров может занимать как 1 строчку, так и несколько, быть короче по высоте, чем картинка или длиннее.
Утюг
| Замечательный утюг фирмы «Сам погладь», поможет вам привести в порядок ваши вещи буквально легким движением руки. |
Стиральная машина
| Стиральная машина самостоятельно и качественно стирает носки, джинсы и даже огромные одеяла. |
Веник
| Сам не подметает, поэтому и стоит дешево. |
Чтобы картинки не налезали одна на другую, а описание находилось строго напротив картинок, и используется таблица.
В данном примере таблица состоит из 3 строк и 2 столбцов.
Как формируется таблица для вывода ее на страницах блога или сайта
Для создания таблицы используются 3 основных тега (команды HTML):
<table> … </ table> обозначает начало и конец таблицы.
<tr> … </tr> обозначает начало и конец каждой строки в таблице.
<td> … </td> обозначает начало и конец каждой ячейки в строке.
Часто можно встретить еще тег <tbody> … </tbody>,
но он не обязательный и таблица отобразится на сайте и без него.
Для того, чтобы таблицу для нашего примера поместить в блог, нужно перейти в редактор кода HTML:
И записать там такой HTML-код:
|
Картинки мы пока здесь не прописываем, их можно вставить обычным способом через функцию добавления картинок в редакторе блога. Но не забывайте о размере картинок – они должны поместиться в ячейки!
Даже, если таблица состоит из одной ячейки, то необходимо использовать эти три тега:
<table> |
Теперь начинается самое интересное. Вы, наверное, уже загрустили от того, что придется писать эти теги, в которых так легко ошибиться с непривычки.
Но не горюйте! Если вы умеете создавать таблички в Word’е, то сможете легко и быстро вставить таблицу в блог, а потом вам надо будет лишь слегка ее подправить.
Что нужно для этого сделать:
Но будьте готовы к тому, что эта таблица будет выглядеть на странице блога не так красиво, как вам бы хотелось. Хотя может и сразу получится так как надо. Это зависит от вида исходной таблицы в 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.
Желаю успехов в оформлении вашего блога!
|
|
Серия сообщений "Оформление текста":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Смайлы на любой вкус
...
Часть 38 - ШПАРГАЛКА ПО УВЕЛИЧЕНИЮ И УМЕНЬШЕНИЮ РАЗЛИЧНЫХ ШРИФТОВ
Часть 39 - Редкие спецсимволы
Часть 40 - ТАБЛИЦЫ (2 урока по созданию таблиц)