Html таблицы: теги table, th, tr, td

Здравствуйте, уважаемые читатели! Сегодня я постараюсь ясно и доходчиво представить вам информацию по созданию html таблиц на сайте, используя для этого теги table, th, tr, td. Эта статья является частью цикла об html тегах, написанного в рамках рубрики «Основы HTML».

Мы уже рассмотрели понятие тега, структуру документа html, основные теги form и input для создания форм на сайте, а также разновидности этих форм: кнопки (тег button); выпадающие списки и текстовое поле. Кроме того, познакомились с тем, как использовать теги ul, ol, li, dl, dd, dt для создания списков html.

Прежде всего, нам необходимо понять, какую практическую пользу может принести нам использование html таблиц при создании собственного проекта. Все дело в том, что ранее в сайтостроении использовалась табличная верстка. Однако, последние несколько лет вебмастера успешно применяют блочную верстку (которая построена на использовании контейнеров div, об этом я тоже непременно напишу).

Основные причины перехода на блочную верстку: вложенность тегов и информация, находящаяся в различных ячейках таблицы, затрудняет индексацию страницы поисковиками; к тому же сложная структура, основанная на вложенности html тегов, увеличивает объем кода и затрудняет редактирование отдельных параметров. Больше аргументов, я думаю, приводить не надо, и так все ясно. Ведь качественная индексация ресурса очень важна для его раскрутки, от этого зависит успешность всего проекта.

К тому же появление css ознаменовало новую эпоху в деле создания сайтов и вебмастера должны придерживаться определенных правил, максимально придерживаясь корректного отображения кода, валидация которого осуществляется Международным Консорциумом W3C, он производит проверку валидности css кода посредством w3c валидатора и осуществляет проверку сайта на ошибки с точки зрения HTML кода. А современные требования таковы, что таблицы нужны только для отображения табличных данных, все остальные способы осуждаются, а со скорым появлением обновленной версии html5 (по которой, кстати, уже работают все популярные браузеры и которая уже интенсивно внедряется) это станет вдвойне актуальным.

Для чего же я затеял весь этот сыр-бор, если таблицы уходят в прошлое, спросите вы? Это так, да не совсем. Ну, во-первых, как я уже отметил выше, они все же нужны для отображения табличных данных, а это уже немало. Во-вторых, ушла в прошлое табличная верстка сайтов, это так, но области применения таблиц все-таки остаются. Ну, я вот, например, при описании создания выпадающего списка (теги select и option) использовал таблицы, чтобы вы получили наглядную демонстрацию для усвоения материала и при этом, каюсь, нарушил валидность страницы (впоследствии обязательно подкорректирую с помощью стилей css). Но это сделано ради экономии времени читателями, а это святое.

Согласен, вступление получилось немаленьким, но оно того стоило. Хотя бы для того, чтобы вы получили необходимую информацию об областях применения таблиц и смогли принять соответствующее решение, стоит ли уделить их изучению определенное время. Думаю, мое мнение вы восприняли адекватно, в ином случае я просто бы не стал писать этот пост. Какой же вывод можно сделать из вышесказанного? Хотя значение таблиц и уменьшилось на современном этапе, оно не сведено к полному нулю, тем более использование css позволяет достичь максимальной валидности документа (страницы сайта), а поэтому изучение таблиц остается неотъемлемой частью основ html!

Теги html таблиц: table, tr, th, td

Итак, плотно переходим непосредственно к теме. Здесь, впрочем сложного ничего нет. Тег table определяет местоположение всей таблицы, содержание которой располагается между открывающим и закрывающим тегами. Надо отметить, что этот элемент является блочным, однако он не занимает все пространство, доступное ему по ширине, как другие блочные теги. Он определяет лишь ту ширину, которая необходима для отображения содержимого таблицы. В этом его отличие.

Однако во всем другом он будет вести себя как блочный элемент. Например, если таблиц несколько, то они будут располагаться друг под другом, несмотря на то, что места достаточно для того, чтобы уместиться рядом. Таблицы html образуются следующим образом: между открывающим и закрывающим тегами table расположены строки, которые описываются парными тегами tr. Внутри строк создаются ячейки с помощью html тегов th или td.

Здесь необходимо отметить, что элементы html th и td являются тождественными функционально, то есть с помощью того и другого формируются ячейки в таблице. Тем не менее визуально они отличаются. Если вы используете тег th, то текст в ячейке будет выделен жирным и выравнен по середине, а содержимое ячейки, определяемое тегом td - написано обычным шрифтом и выравнено по левому краю.

<table>
<tr>
<th>1-я ячейка 1-я строка</th>
<th>2-я ячейка 1-я строка</th>
<th>3-я ячейка 1-я строка</th>
</tr>
<tr>
<td>1-я ячейка 2-я строка</td>
<td>2-я ячейка 2-я строка</td>
<td>3-я ячейка 2-я строка</td>
</tr>
<tr>
<td>1-я ячейка 3-я строка</td>
<td>2-я ячейка 3-я строка</td>
<td>3-я ячейка 3-я строка</td>
</tr>
</table> 
1-я ячейка 1-я строка 2-я ячейка 1-я строка 3-я ячейка 1-я строка
1-я ячейка 2-я строка 2-я ячейка 2-я строка 3-я ячейка 2-я строка
1-я ячейка 3-я строка 2-я ячейка 3-я строка 3-я ячейка 3-я строка

Так выглядит самый простой вариант html таблицы. Как вы, наверное, поняли, можно создать как угодно много ячеек, использовав соответствующее количество тегов tr, th и td. Но обычно, естественно, необходимо создать гораздо более сложные html таблицы с выделениями, с различным цветовым фоном ячеек, различным шрифтом текста и т.д. Для этого в недалеком прошлом использовались атрибуты, которые непосредственно применялись к основным табличным тегам table, tr, th и td.

Впрочем, эти атрибуты используются и сейчас, но их использование приводит к нарушению правил консорциума W3C, который сейчас активно занимается внедрением html 5, в правилах которого осуждается использование вышеозначенных атрибутов непосредственно в коде html. Поэтому я не буду терять время и объяснять то, что в скором времени потеряет актуальность.

Тем более, цель оформления таблиц в нужном для вас виде можно достичь гораздо более эффективным и красивым способом, применив стили css (каскадных таблиц стилей), изучением которых мы займемся уже начиная со следующей публикации, поэтому подпишитесь на новые материалы блога посредством RSS-ленты или используйте e-mail для их получения.

Остались только два атрибута, применяемые к основным тегам таблиц, которые являются валидными в спецификации языка разметки html5. Их мы сейчас и рассмотрим. Это атрибуты colspan и rowspan, которые помогают объединить ячейки таблицы. Когда это может понадобиться? Ну, например, вы хотите создать небольшую табличку с двумя ячейками, а снизу добавить еще одну.

Если для этого использовать простой вариант кода, то получиться неказистая картина. А вот если ко второму тегу td добавить атрибут colspan со значением 2 (по числу ячеек в верхней строке), который объединит таблицу по горизонтали, то получим гораздо более красивый вид таблицы.

Теперь атрибут rowspan. Он используется в случае, если надо объединить таблицу по вертикали. Посмотрите и сравните 2 вида таблицы без атрибута rowspan и с его применением.

В заключение рассмотрим некоторые дополнительные теги, которые оказывают помощь в формировании таблиц html. Во-первых, это тег caption, который образует заголовок таблицы. Он используется в таблице (table) не более одного раза или не используется вообще. Этот элемент ставится сразу после открывающего тега table.

<table>
<caption>Таблица 1. Виды CMS</caption>
<tr>
<th>Wordpress</th>
<th>Joomla</th>
</tr>
<tr>
<td>Создание блогов с помощью системы управления контентом</td>
<td>Создание сайтов с помощью системы управления контентом</td>
</tr>
</table> 
Таблица 1. Виды CMS
WordPress Joomla
Создание блогов с помощью системы управления контентом Создание сайтов с помощью системы управления контентом

И последнее на сегодня. Принцип создания html таблиц заключается в том, что тег table является контейнером, в который заключается все содержание таблицы. Строки (tr) сами по себе являются контейнерами для создания ячеек (th и td). Однако существуют еще элементы, которые являются, в свою очередь, контейнерами для строк. Речь идет о тегах thead (шапка таблицы), tbody (содержание таблицы) и tfoot (заключительная часть).

Эти теги применяются с целью задания свойства для большой группы строк, чтобы не делать это для каждой строки отдельно. Например, вы создаете большую html таблицу, где присутствует несколько сот строк. Представляете, сколько времени можно сэкономить!

<table>
   <tfoot>
    <tr>
     <td>Ячейка 5, которая расположена в TFOOT</td>
     <td>Ячейка 6, которая расположена в TFOOT</td> 
    </tr> 
   </tfoot>
   <thead>
    <tr>
     <td>Ячейка 1, которая расположена в THEAD</td>
     <td>Ячейка 2, которая расположена в THEAD</td> 
    </tr> 
   </thead>
   <tbody>
    <tr>
     <td>Ячейка 3, которая расположена в TBODY</td>
     <td>Ячейка 4, которая расположена в TBODY</td> 
    </tr> 
   </tbody>
  </table>
Ячейка 5 с содержанием, которая расположена в TFOOT Ячейка 6 с содержанием, которая расположена в TFOOT
Ячейка 1 с содержанием, которая расположена в THEAD Ячейка 2 с содержанием, которая расположена в THEAD
Ячейка 3 с содержанием, которая расположена в TBODY Ячейка 4 с содержанием, которая расположена в TBODY

Теги thead и tfoot прописываются только один раз для каждой таблицы либо их не может быть вовсе. Что касается tbody, то он должен хотя бы раз быть прописан в контейнере, созданном с помощью открывающего и закрывающего тегов table. Таким образом, мы рассмотрели основные принципы построения html таблиц с помощью основных и вспомогательных тегов.

Однако, как я уже отмечал, для того, чтобы придать необходимый внешний вид таблицам, необходимо прописать их свойства, пользуясь стилями css. Думаю, поступим следующим образом. Следующая публикация уже будет посвящена основам css, а после того, как я дам необходимую информацию по этой теме, вернусь к вопросу построения таблиц. Поэтому подпишитесь на обновление блога, чтобы своевременно получить необходимые статьи.

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Уроки HTML

3 отзыва

  1. Полина

    Спасибо за подробности,строю таблицу методом тыка, и из-за незнания значения тегов процесс затянулся.

  2. Дмитрий

    У вас хороший блог! Благодарю

  3. Sashenkis

    Между границами ячеек и внешней границей таблицы есть свободное пространство, которое регулируется при помощи css-стилей

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.