HTML для начинающих: создание и работа с таблицами (теги TABLE, TD, TH, TR) средствами HTML и CSS
Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Предлагаю вашему вниманию очередную стать из рубрики Верстка — изучение и применение на практике HTML, CSS, PHP, MySql, которая будет посвящена созданию и работе с таблицами средствами HTML.
Несмотря на то, что табличная верстка на данный момент планомерно вытесняется версткой блочной, знать основные теги и возможности настройки содержимого таблиц все равно надо. Например, в SMF табличная верстка по-прежнему используется, и если вы захотите внести какие-либо изменения во внешний вид страниц форума на SMF, то знания табличной верстки вам в этом существенно помогут. Даже простейшая вставка кода счетчика посещаемости на форум SMF может потребовать от вас понимания табличной верстки и способов организации информации в таблице.
Табличная верстка - простая, но не перспективная
Что примечательно - табличная верстка значительно проще в освоении, чем верстка блочная. Так почему же она сейчас не популярна и все стараются перейти на блочную верстку? Тут все дело в отношении поисковых систем к сайтам, созданным с помощью табличной и блочной верстки. Поисковикам больше по вкусу верстка блочная и причина этого кроется в очень малом количестве тегов при блочной верстке, которое используется для достижения нужного результата. Если сделать тоже самое при помощи таблиц, то количество тегов в исходном коде страниц сайта будет существенно большим, чем в случае блочной верстки.
Происходит это из-за того, что при блочной верстке в коде страниц сайта присутствуют только элементы, задающие области для вывода содержимого: текста, изображений или еще чего-то. Эти области называют блоками или контейнерами, отсюда и происходит название блочной верстки.
Описание же внешнего вида этого содержимого осуществляется в другом файле, который поисковики не индексируют. Это так называемые файлы каскадных таблиц стилей (CSS). Там может описываться положение данного блока относительно других блоков на странице; внешний вид содержимого данного блока, например, параметры шрифта текста, выравнивание, отступы и прочее.
В табличной же верстке, и табличные теги (TABLE, TR, TD, TH) и атрибуты, описывающие внешний вид содержимого таблиц входят в состав исходного кода страниц сайта, что естественно загрязняет проиндексированный поисковыми системами текст вашего сайта. Теперь, разобрав все недостатки табличной верстки, можно приступить к более подробному рассмотрению принципов создания и настройки внешнего вида таблиц в HTML.
Создание и работа с таблицами в HTML
В недалеком прошлом таблицы играли основную роль в создании (верстке) html-страниц практически любого сайта. С помощью таблиц можно придать странице сайта любую нужную компоновку. Для организации таблицы в HTML коде используется тег TABLE. Дальше уже идет разбиение всей области отведенной для таблицы, на строки с помощью тегов TR, а уже эти строки разбиваются на отдельные ячейки с помощью тегов TH, TD. При этом, тег TH следует использовать для создания ячеек с заголовками (содержимое таких ячеек будет отображаться в таблице полужирным шрифтом и выравниваться по центру), а тег TD - для обычных рядовых ячеек с данными.
Почему же таблицы в свое время так широко применялись в верстке? Дело в том, что с помощью таблиц очень легко осуществлять точное позиционирование любого элемента страницы (текст, изображение, ссылка и т.д.). Для этого обычно использовались таблицы встроенные в ячейки других таблиц. Таким нехитрым способом можно добиться размещение любого элемента сайта в нужном месте страницы. С помощью таблиц, например, можно легко и непринужденно расположить текст на странице в несколько колонок, просто разместив его в разных ячейках таблицы.
Теги TABLE, TR, TR парные. Содержимое таблицы, строки и ячейки заключается в соответствующие открывающие и закрывающие теги. Теги открытые внутри других тегов должны быть закрыты так же внутри, без перекрытия. При табличной верстке не сложно запутаться в открывающих и закрывающих тегах таблиц, ячеек и строк. Читается код с табличной версткой не всегда просто. .
Задание толщины и цвета рамки таблицы с помощью атрибутов BORDER и BORDERCOLOR
Если ваша таблица невидимая (без рамки вокруг таблицы и ячеек) и используется именно для позиционирования элементов на странице сайта, то для визуализации этой таблицы на время работы над кодом можно прописать в открывающем теге TABLE атрибут BORDER=1. В этом случае вы увидите границы таблицы, строк и ячеек. После окончания работы над кодом можно прописать BORDER=0, для скрытия границ таблицы и ячеек. Для задания цвета рамки можно использовать атрибут BORDERCOLOR с названием или кодом цвета в качестве параметра (например, bordercolor="red" для задания красного цвета границы таблицы).
Задание ширины и высоты для всей таблицы и отдельной ячейки с помощью атрибутов WIDTH и HEIGHT
Ширину и высоту таблицы или ячейки можно задать с помощью атрибутов WIDTH и HEIGHT, прописав им значения в абсолютных единицах (например, WIDTH=223, для задания ширины в 223 пиксела) или в относительных единицах, выраженных в процентах. Но размер таблицы или ячейки не может быть меньше, чем размещаемое внутри содержимое. При задании размера ячеек можно указать размер только для одной ячейки в столбце, а остальные будут отображаться исходя из этого значения.
<table width="122"> <tr> <td><p>Ширина одноячеечной таблицы в 122 пикселей</p></td> </tr> </table> <br> <table border=1 width="70%"> <tr> <td><p>Ширина одноячеечной таблицы в 70%</p></td> </tr> </table>
Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. Тоже справедливо и в отношении высоты ячейки. Для выравнивания содержимого таблицы, относительно края окна браузера, применяется атрибут ALIGN с нужным параметром выравнивания (left | center | right). Например, однострочная таблица с тремя ячейками и выравниванием по центру будет иметь такой код:
<table width="500" align="center"> <tr> <td>Первая ячейка</td> <td>Вторая ячейка</td> <td>Третья ячейка</td> </tr> </table>
Обращаю ваше внимание, что использование такого способа задания внешнего вида таблицы (с помощью атрибутов ширины, выравнивания и т.д.) на данный момент не совсем правильное. Сейчас принято описывать внешний вид таблицы в файле CSS с помощью создания свойств (правил) для таблиц и ячеек. Как это делается я расскажу чуть позже, а сейчас продолжу рассказывать про не валидные (не рекомендуемые) способы, т.к. вы можете встретить в коде какого-либо движка (например, в коде SMF) именно такой способ описания внешнего вида и положения элементов в таблице. А раз это еще встречается, то вы должны уметь и знать как с таким кодом работать. Продолжим.
Создание отступа от текста до границ ячейки и увеличение расстояния между ячейками с использованием атрибутов CELLPADDING и CELLSPACING
Для создания отступа от текста до границ ячейки и увеличение расстояния между ячейками используют атрибуты CELLPADDING и CELLSPACING. Атрибут CELLPADDING задает размеры полос чистого пространства внутри ячейки, отделяя ее содержимое от внешних границ. Если этот атрибут не указан в теге TABLE, то его значение принимается по умолчанию равным 1. Атрибут CELLSPACING дает возможность задавать размер полосы чистого пространства между ячейками. Если этот атрибут не указан в теге TABLE, то его значение принимается по умолчанию равным 2.
Например, без указания этих атрибутов таблица выглядит так:
<table border="1" width="600" align="center" bordercolor="red" > <tr> <td width="200"><p>Первый абзац в таблице.</p></td> <td width="200"><p>Вторая ячейка.</p></td> <td width="200"><p>Третья ячейка.</p></td> </tr> <tr> <td width="200"><p>Четверта ячейка.</p></td> <td width="200"><p>Пятая ячейка.</p></td> <td width="200"><p>Шестая ячейка.</p></td> </tr> </table>
А при добавлении атрибутов CELLPADDING и CELLSPACING равных 10 пикселям таблица станет выглядеть так:
<table border="1" width="600" align="center" bordercolor="red" cellpadding="10" cellspacing="10" > <tr> <td width="200"><p>Первый абзац в таблице.</p></td> <td width="200"><p>Вторая ячейка.</p></td> <td width="200"><p>Третья ячейка.</p></td> </tr> <tr> <td width="200"><p>Четверта ячейка.</p></td> <td width="200"><p>Пятая ячейка.</p></td> <td width="200"><p>Шестая ячейка.</p></td> </tr> </table>
Слияние ячеек таблицы средствами HTML с помощью атрибутов COLSPAN, ROWSPAN
Для чего это может понадобиться? Например, в коде вашего сайта какой-либо элемент дизайна страницы позиционируется в трех ячейках одной строки таблицы. Вы хотите добавить еще одну строку сверху, но разместить в ней только одну ячейку (например, для счетчика посещаемости в SMF). Если вы просто введете код еще одной строки с одной ячейкой внутри то получите следующее:
<table border="1" width=400 > <tr> <td>444</td> </tr> <tr> <td >1111</td> <td>22222</td> <td>33333</td> </tr>
Но добавив в тег TD этой новой ячейки атрибут COLSPAN с параметром 3 и атрибут ALIGN для выравнивания содержимого этой ячейки по центру, мы получим следующий вид таблицы:
<table border="1" width=400 > <tr> <td colspan=3 align=center>444</td> </tr> <tr> <td >1111</td> <td>22222</td> <td>33333</td> </tr>
Итак, с помощью атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку. Атрибут COLSPAN прописывается в теге
<table border="1" width=400 height=400> <tr> <td rowspan="3">1111</td> <td colspan="2">22222</td> <td colspan="2">33333</td> </tr> <tr> <td>44444</td> <td colspan="2" rowspan="2">55555</td> <td>66666</td> </tr> <tr> <td>77777</td> <td>88888</td> </tr> <tr> <td colspan="5">99999</td> </tr> </table>
Задание цвета фона и графического фона ячейки, строки или всей таблицы, а так же создание вложенной таблицы
С помощью атрибута BGCOLOR можно задать цвет фона всей таблицы, отдельной ячейки, строки. Для этого нужно прописать этот атрибут BGCOLOR в теге таблицы, ячейки или строки соответственно. Цвет можно задать как с использованием наименования цвета (red, black и т.д.), так и с использованием шестнадцатеричного значения кода цвета со знаком # (#ffffff). При помощи атрибута BACKGROUND можно задать графический фон (в качестве фона будет использоваться изображение, путь к которому прописывается в качестве параметра атрибута BACKGROUND) для ячейки или таблицы целиком. Для создания вложенной таблицы достаточно просто вставить между тегами нужной ячейки код вложенной таблицы. Как это работает вы можете посмотреть на примере:
<table align="left" background="bgkletka.gif" border="1" width="800" cellpadding="10" cellspacing="5" >
<tr align="center">
<td rowspan="2" width="400">
<table bgcolor="tan" border="1" bordercolor="green" cellpadding="0" cellspacing="0" wight="100%" >
<tr>
<td>
<p>Это встроенная таблица!!!!!!!!!!!</p>
</td>
<td>
<p>Это вторая ячейка!!!!!!!!!!!</p>
</td>
</tr>
<tr>
<td>
<p>Это вторая строка встроенной таблицы!!!!!!!!!!!</p>
</td>
<td>
<p>Это четвертая ячейка!!!!!!!!!!!</p>
</td>
</tr>
</table>
<td width="200"><p>Вторая ячейка.</p></td>
<td width="200"><p>Третья ячейка.</p></td>
</tr>
<tr>
<td width="200"><p>Четверта ячейка.</p></td>
<td width="200"><p>Пятая ячейка.</p></td>
</tr>
<tr>
<td colspan="3"><p>Седьмая ячейка.</p></td>
</tr>
</table>
В этой таблице фон встроенной таблицы задается с помощью атрибута bgcolor="tan", где tan - название цвета. А фон основной таблицы задается атрибутом background="bgkletka.gif", где прописан относительный путь до графического файла, которым будет заполнен фон таблицы.
Задание внешнего вида и расположения элементов таблицы с помощью свойств таблицы каскадных стилей (CSS)
То, что я рассказал выше, может пригодиться вам при редактировании кода, использующего табличную верстку. Но если планируете использовать таблицы в своих материалах на сайте, то этот способ задания внешнего вида таблицы и позиционирования ее элементов не будет оптимальным. Проще будет открыть на редактирование ваш файл CSS (если на вашем сайте используется блочная верстка) и дописать в него несколько правил для таблиц и ячеек таблиц. Эти правила позволят унифицировать внешний вид всех таблиц на вашем сайте. Проще всего будет написать правила оформления для всех тегов TABLE, TR и TH. Выглядеть это может примерно так:
table {
float: none;
width: 100%;
text-align: center;
border: 1px solid Silver;
font-size: 10px;
margin: 20px 0px 20px 0px;
background-color: #F3F3F3;
}
td {
border: 1px solid Silver;
font-size: 10px;
text-align: center;
padding: 10px;
}
th {
border: 1px solid Silver;
font-size: 10px;
text-align: center;
padding: 10px;
font-weight: bolder;
}
Я пока что еще не рассказывал про параметры CSS, поэтому вкраце поясню данный код:
- строка
width: 100%задает ширину таблицы равной ширине всей области отведенной доя контента - в строке
border: 1px solid Silverзадается рамка для всей таблицы - шириной в один пиксель, сплошная, серого цвета - в строке
font-size: 10px;задается размер шрифта для текста внутри таблицы margin: 20px 0px 20px 0px;- задает отступ сверху и снизу от таблицы до соседних элементов страницы-
background-color: #F3F3F3;- задает цвет фона таблицы padding: 10px;- задает отступ от содержимого ячейки до ее границfont-weight: bolder;- задает жирный шрифт для ячеек заголовков (TH)
Теперь любая таблица на вашем сайте будет выглядеть в соответствии с этими правилами, описанными в файле CSS вашего шаблона. Достаточно будет просто создать каркас таблицы ( с помощью тегов TABLE, TR, TH) без использования атрибутов отвечающих за оформление:
<table> <tr> <td colspan=3 align=center>444</td> </tr> <tr> <td >1111</td> <td>22222</td> <td>33333</td> </tr> </table>
| 444 | ||
| 1111 | 22222 | 33333 |
Можно прописать в файле CSS не общие свойства для всех тегов TABLE, TH, TD, а свойства для класса, который потом вы сможете использовать по мере надобности для придания таблице нужного вида. Класс прописывается в тег TABLE или TR как обычный атрибут, в качестве параметра которого будет выступать название класса. Например:
<table class="extra">
Вы так же можете ознакомиться с другими статьями из рубрики HTML для начинающих и материалами рубрики Верстка, HTML, CSS, PHP, MySql.
На сегодня все. Если вы не хотите пропустить появление новых материалов на этом сайте, то можете подписаться на рассылку новостной ленты через форму, расположенную чуть ниже, или же выбрать удобный для вас способ подписки на странице Подписка. Если у вас остались нерешенные вопросы из области вебмастеринга, то вы можете поискать на них ответы, посетив страницу Вопросы и ответы.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Постовой (обмен постовыми): описания и истории возникновения музыкальных жанров