Приветствую всех. Сегодня хочу рассказать вам о том, какие имеются в html теги для таблицы и как их правильно использовать для вывода табличных данных. Основных тегов на самом деле достаточно мало, но есть несколько, о которых даже матерые разработчики могли забыть, так как они достаточно редко используются. В общем, разберем вообще все теги для таблиц.
Самые основные теги
Table — это главный общий контейнер, в который помещается вся таблица. Естественно, это парный тег, да и вообще все теги, связанные с выводом таблиц, парные, поэтому далее я даже не буду говорить об этом. Сам по себе table никак не отображается, это просто блок, в который нужно помещать ряды и ячейки для формирования таблицы.
Tr — следующий тег отвечает за создание ряда таблицы. В ряде может находиться от одной до бесконечного кол-ва ячеек. Сам тег tr никаким образом не отображается на странице, это лишь контейнер для того, чтобы заполнять его ячейками.
Td — собственно, сама ячейка. В любой таблице это наиболее часто повторяющийся элемент. Ячеек может быть сколько угодно. Между открывающим и закрывающим тегом td размещается непосредственно контент, содержимое ячейки. Это может быть текст, изображение, видео и даже другая таблица. О вложенных таблицах и их создании я напишу завтра.
Th — это такая же ячейка, как и td, отличается она лишь тем, что текст в ней выводится жирным шрифтом и по центру. То есть с помощью th можно создавать заглавные ячейки, что вы наверняка могли наблюдать в таблицах неоднократно.
Собственно, это основные теги, которые вам нужно для построения таблицы. Их вполне достаточно, но кроме них есть и другие. Но пока давайте закрепим на практике основные и с их помощью создадим простую таблицу. Код здесь я приводить в виде текста не буду, вот что я набрал в Notepad++:
Ну а сама полученная таблица выглядит так:
Как видите, в ней три ряда по две ячейки в каждом, причем в первом ряде текст выровнен по центру и выделен жирным. Если присмотреться к html-коду, то мы действительно использовали все теги, о которых я говорил. Конечно, чтобы таблица именно так и выглядела, я еще прописал кое-какие стилевые правила, но это уже другой разговор.
Дополнительные теги
Caption — этот тег создан специально для вывода заголовка (названия) таблицы. Его нужно использовать, если это название есть и его нужно вывести над или под таблицей.
Thead — этот тег, как и tr, абсолютно никак не меняет внешний вид таблицы, он может быть использован скорее для порядка и ясности в верстке таблиц. Роль этого тега в том, что он выступает контейнером для шапки таблицы. То есть в него можно заключить от одного до скольких угодно рядов таблиц, которые вы отнесете к ее шапке.
Tbody — по сути, контейнер для рядов, формирующих основную часть или тело таблицы.
Tfoot — контейнер для последнего ряда/рядов, которые можно отнести в подвал таблицы.
Вот пример использования этих тегов. Допустим, вам нужно сделать таблицу сотрудников компании. Верхний ряд, в котором выводятся названия столбцов, можно заключить в thead, все ряды с именами сотрудников в tbody, а последние ряды, где могут быть какие-то итоги и общая информация — в tfoot. Опять же, делать это не обязательно, но в целом такая разметка улучшит семантичность таблицы.
Другие манипуляции и действия с таблицей
Все остальное, что вы можете сделать с таблицей, касается уже не тегов, а либо их атрибутов, либо css правил. О том, как объединять ячейки по горизонтали и вертикали читайте здесь, а о том, как применять css стили для таблиц — тут. Именно css позволяет разукрасить таблицу и придать ей должный вид, html отвечает только за разметку.
Собственно, уже знаю и понимаю все, что написано здесь, вы можете создавать таблицу практически любой сложности. Сегодня их не стоит использовать для верстки полноценного сайта, а только для вывода непосредственно табличных данных. Что ж, на этом у меня пока все. До встречи!