HTML и CSS 0

Какие есть html теги для таблицы?

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

Самые основные теги

Table — это главный общий контейнер, в который помещается вся таблица. Естественно, это парный тег, да и вообще все теги, связанные с выводом таблиц, парные, поэтому далее я даже не буду говорить об этом. Сам по себе table никак не отображается, это просто блок, в который нужно помещать ряды и ячейки для формирования таблицы.

Tr — следующий тег отвечает за создание ряда таблицы. В ряде может находиться от одной до бесконечного кол-ва ячеек. Сам тег tr никаким образом не отображается на странице, это лишь контейнер для того, чтобы заполнять его ячейками.

Td — собственно, сама ячейка. В любой таблице это наиболее часто повторяющийся элемент. Ячеек может быть сколько угодно. Между открывающим и закрывающим тегом td размещается непосредственно контент, содержимое ячейки. Это может быть текст, изображение, видео и даже другая таблица. О вложенных таблицах и их создании я напишу завтра.

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

Собственно, это основные теги, которые вам нужно для построения таблицы. Их вполне достаточно, но кроме них есть и другие. Но пока давайте закрепим на практике основные и с их помощью создадим простую таблицу. Код здесь я приводить в виде текста не буду, вот что я набрал в Notepad++:
код таблицы
Ну а сама полученная таблица выглядит так:
таблица
Как видите, в ней три ряда по две ячейки в каждом, причем в первом ряде текст выровнен по центру и выделен жирным. Если присмотреться к html-коду, то мы действительно использовали все теги, о которых я говорил. Конечно, чтобы таблица именно так и выглядела, я еще прописал кое-какие стилевые правила, но это уже другой разговор.

Дополнительные теги

Caption — этот тег создан специально для вывода заголовка (названия) таблицы. Его нужно использовать, если это название есть и его нужно вывести над или под таблицей.
Thead — этот тег, как и tr, абсолютно никак не меняет внешний вид таблицы, он может быть использован скорее для порядка и ясности в верстке таблиц. Роль этого тега в том, что он выступает контейнером для шапки таблицы. То есть в него можно заключить от одного до скольких угодно рядов таблиц, которые вы отнесете к ее шапке.
Tbody — по сути, контейнер для рядов, формирующих основную часть или тело таблицы.
Tfoot — контейнер для последнего ряда/рядов, которые можно отнести в подвал таблицы.

Вот пример использования этих тегов. Допустим, вам нужно сделать таблицу сотрудников компании. Верхний ряд, в котором выводятся названия столбцов, можно заключить в thead, все ряды с именами сотрудников в tbody, а последние ряды, где могут быть какие-то итоги и общая информация — в tfoot. Опять же, делать это не обязательно, но в целом такая разметка улучшит семантичность таблицы.

Другие манипуляции и действия с таблицей

Все остальное, что вы можете сделать с таблицей, касается уже не тегов, а либо их атрибутов, либо css правил. О том, как объединять ячейки по горизонтали и вертикали читайте здесь, а о том, как применять css стили для таблиц — тут. Именно css позволяет разукрасить таблицу и придать ей должный вид, html отвечает только за разметку.

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5