HTML и CSS: таблицы OTUS
2026-03-10 02:58 Diff
https://otus.ru/journal/html-i-css-tablicy/oj-1080x720-171/

Во время верстки сайтов и онлайн-сервисов специалистам предстоит иметь дело с различными элементами. Одним из самых важных являются таблицы. Они помогают упорядочить данные и вывести их на дисплей в виде строк и столбцов.

С таблицами в HTML и CSS необходимо уметь работать. Далее предстоит познакомиться с этим объектом более подробно. Необходимо не только выяснить, что собой представляют таблицы, но и как их создавать, редактировать, группировать. Предложенная информация будет полезна тем, кто планирует начинать изучение верстки и веб-программирования.

Таблица – это…

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

  • числа;
  • текст;
  • видео;
  • аудио;
  • другие объекты.

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

Создание таблицы

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

Вот пример создания table с двумя столбцами и двумя строками:

<table>

< tr >< th >текст заголовка< /th >< th >текст заголовка< /th >< /tr > <!—ряд с ячейками заголовков—>

< tr >< td >данные</ td >< td >данные< /td >< /tr > <!—ряд с ячейками тела таблицы—>

</table>

Видимых границ по умолчанию у table нет. Они задаются при помощи свойства под названием border. Выглядит это так:

Для того, чтобы убрать промежутки между ячейками, необходимо воспользоваться свойством table {border-collapse: collapse;}. По умолчанию ширина изучаемого элемента равняется ширине ее внутреннего содержимого. Установка ширины осуществляется через значение свойства width:

Если для ячеек задаются внутренние отступы и границы, ширина таблицы включает в себя:

  • padding-left;
  • padding-right;
  • border-left;
  • border-right.

Если ширина и границы ячеек заданы, шириной таблицы будет называться ширина ячеек, ширина border-left и ширина border-right последней ячейки в имеющемся ряду.

Интервалы и поля

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

Интервалы и поля относятся к элементам представления данных. Соответствующее пространство будет настраиваться через стилевые таблицы CSS.

Поле ячейки (padding) – расстояние между содержимым ячейки и ее границей (border). Чтобы добавить соответствующее свойство, нужно применить padding к td или th.

Интервал ячеек (border-spacing) – расстояние между ними (между td или th). Сначала требуется присвоить значение separate свойству border collapse для элемента table, а затем – установить расстояние между ячейками, внеся изменения в значение параметра border-spacing.

В более старых версиях HTML за поля и интервалы ячеек отвечали такие атрибуты как cellspacing и cellpadding для компонента table. В спецификации HTML5 эти параметры были признаны устаревшими. Теперь они не используются на практике.

Вот наглядный пример использования свойств border-padding и padding. Стоит обратить внимание на то, что интервал ячеек (border-spacing) не будет работать, если ко всей table применяется свойство border-collapse: collapse.

Добавление строк

Ряды таблицы или ее строки можно создать при помощи тега tr. Количество горизонтальных строк в итоговом элементе будет определяться количеством пар tr.

Добавление ячейки заголовка

Заголовок столбца будет задаваться при помощи тега th. Его применение приводит к созданию специальной ячейки, текст в которой будет выделен полужирным. Количество ячеек заголовка будет определяться количеством элементов th (пар).

В программном коде ситуация выглядит так:

<table>

< tr >< th >ячейка заголовка< /th >< th >ячейка заголовка< /th >< /tr >

</table>

Для соответствующего компонента HTML доступны атрибуты rowspan, headers, colspan.

Ячейка тела таблицы

Ячейки в таблице можно создать при помощи парного тега td. Внутри td будут помещаться табличные данные.

Компоненты < td > и < /td >, которые расположены в одном ряду, служат определителем количества ячеек в строке таблицы.

Количество пар td должно обязательно равняться количеству th. Вот пример реализации добавления ячейки тела таблицы:

<table>

< tr >< th >ячейка заголовка< /th >< th >ячейка заголовка< /th >< /tr >

< tr >< td >ячейка тела таблицы< /td >< td >ячейка тела таблицы< /td >< /tr >

</table>

Для данного элемента могут применяться атрибуты headers, rowspan, colspan.

Заголовок (подпись)

Caption – тег, который необходим для любой таблицы при верстке веб-сервисов. Его содержимое выводится непосредственно перед таблицей. Изменение положения заголовка возможно. Для этого используется свойство caption-side:

  • top – отвечает за вывод до таблицы;
  • bottom – отображение после.

Правила верстки рекомендуют размещать тег заголовка в самом начале – сразу после table. Caption по умолчанию выравнивает свое содержимое по центру. Для выравнивания по правому/левому краю требуется внести изменения в значение свойства text-align.

Заголовки таблицы нужны для разных целей:

  1. Для пользовательского удобства. С помощью заголовков намного проще ориентироваться на странице, особенно когда таблиц много.
  2. Caption помогает людям с ограниченными возможностями. С помощью заголовка таблицы можно получить общее представление о том, что в ней находится. Это помогает понять, стоит ли просматривать соответствующий элемент полностью.
  3. Caption – компонент, который благоприятно сказывается на оптимизации веб-портала или онлайн-сервиса. Его очень любят разнообразные поисковые системы.

Вот наглядный пример реализации caption в программном коде:

<table>

<caption>Перечень продуктов</caption>

  < tr >

    <th>№ п/п</th>

    <th>Наименование товара</th>

    <th>Ед. изм.</th>

    <th>Количество</th>

    <th>Цена за ед. изм., руб.</th>

    <th>Стоимость, руб.</th>

  < /tr >

  < tr >

    < td >1.< /td >

    < td >Томаты свежие< /td >< td >кг< /td >< td >15,20< /td >< td >69,00< /td >< td >1048,80</td>

  < /tr >

  < tr >

    < td >2.< /td >

    < td >Огурцы свежие< /td >< td >кг< /td >< td >2,50< /td >< td >48,00< /td >< td >120,00< /td >

  < /tr >

  < tr >

    < td colspan=»5″ style=»text-align:right»>ИТОГО:< /td >< td >1168,80< /td >

  < /tr >

</table>

Если заголовок таблицы по умолчанию не предусматривается дизайнером, его может сделать разработчик. Он добавит компонент в разметку и скроет при помощи CSS. Данный прием значительно повысит доступность контента.

Даже скрытый заголовок все равно будет доступен непосредственно для навигации по странице с помощью клавиатуры. Речевой браузер для людей с ограниченными возможностями тоже воспринимает тег caption – читая текст в соответствующем теге, браузер поменяет интонацию, темп речи, а также повысит громкость голоса.

Группировка строк и столбцов

Для группировки в HTML – это colgroup. С помощью этого тега можно создать структурную группу столбцов, выделяя логически однородные ячейки. Группирует соответствующий компонент один или более столбцов. После этой операции столбцы становятся доступны для единого форматирования. К ним можно применять стили, вместо того, чтобы повторять их для каждой ячейки/строки.

Colgroup должен быть добавлен непосредственно после тегов caption или/и table.

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

Через атрибут style возможно менять основной цвет фона ячеек. Для компонента col становится доступным параметр span. С его помощью задается количество столбцов для непосредственного объединения.

<table>

  <colgroup>

    <col span=»2″ style=»background:Khaki»><!— С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы—>

    <col style=»background-color:LightCyan»><!— Задаем цвет фона для следующего (одного) столбца таблицы—>

  </colgroup>

  < tr >

    <th>№ п/п</th>

    <th>Наименование</th>

    <th>Цена, руб.</th>

  < /tr >

  < tr >

    < td >1< /td >

    < td >Карандаш цветной< /td >

    < td >20,00< /td >

  < /tr >

  < tr >

    < td >2< /td >

    < td >Линейка 20 см< /td >

    < td >30,00< /td >

  < /tr >

</table>

Выше можно увидеть фрагмент программного кода, помогающий понять принцип группировки. А еще – наглядный образец отображения итоговой таблицы.

Группировка разделов

Thead используется для создания группы заголовков для строк table. Это делается для того, чтобы можно быть использовать общие стили оформления. Thead используется в сочетании с тегами:

  • tbody;
  • tfoot.

Рассматриваемый тег используется так:

  • в качестве дочернего элемента table;
  • после caption и colgroup;
  • перед tbody, tfoot, tr.

Элемент tbody используется для группировки основного табличного содержимого. Он используется в сочетании с тегами thead и tfoot.

Компонент tfoot используется для создания группы строк. Пример – для представления данных о суммах или итогах. Группировка создается в нижней части table. Может быть использована всего один раз.

Вот наглядный пример реализации кода:

<table>

 <thead>

  < tr >

    <th>№ п/п</th>

    <th>Наименование товара</th>

     <th>Ед. изм.</th>

     <th>Количество</th>

     <th>Цена за ед. изм., руб.</th>

     <th>Стоимость, руб.</th>

  < /tr >

 </thead>

<tfoot>

  < tr >

    < td colspan=»5″ style=»text-align:right»>ИТОГО:< /td >< td >1168,80< /td >

  < /tr >

</tfoot>

<tbody>

  < tr >

    < td >1.< /td >

    < td >Томаты свежие</ td >< td >кг< /td >< td >15,20< /td >< td >69,00< /td >< td >1048,80< /td >

  < /tr >

  < tr >

    < td >2.< /td >

    < td >Огурцы свежие< /td >< td >кг< /td >< td >2,50< /td >< td >48,00< /td >< td >120,00< /td >

  < /tr >

</tbody>  

</table>

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

Атрибуты для работы с табличными элементами

В процессе работы с табличными компонентами часто предстоит иметь дело с разнообразными атрибутами. Таблица, представленная ниже, поможет лучше ориентироваться на них:

Название атрибутаОписание и принимаемые значенияColspanУказывает на количество ячеек в строке для объединения по горизонтали. Форма представления: td colspan = «3». Может принимать значения в диапазоне от 1 до 999.HeadersИспользуется для задания списка ячеек заголовка, содержащих данные о текущей ячейке данных. Используется для речевых интернет-обозревателей. Задается через формы:Th id= «идентификатор»…/thTh headers = «идентификатор»…/thПринимаемыми значениями служит список имен ячеек, которые разделяются друг от друга пробелами. Соответствующие имена присваиваются через их атрибут – id.RowspanИспользуется для отображения количества ячеек в столбце для объединения по вертикали. Задается как:Td rowspan= «2»Данный атрибут может принимать значения от 1 до 999 включительно.SpanУказывает на количество колонок, которые объединяются для задания единого стиля. По умолчанию параметр имеет значение 1.Форма представления:Col span = «2»Значения, которые может принимать этот атрибут, – любое. Главное, чтобы им было целое и положительное число.

Теперь понятно, как работать с предложенными атрибутами. Они пригодятся каждому верстальщику.

Структура таблицы: кратко о важном

Чтобы лучше понимать принципы работы с табличными элементами, рекомендуется рассмотреть структуру таблицы. Она напоминает HTML-страницу.

Шапка

Thead – это «шапка» таблицы. Она представляет собой заголовочную секцию. В thead используется тег th для ячеек. О том, как работать с шапкой, уже было сказано.

Заголовки столбцов и строк

Th позволяет создавать особые ячейки, с которых начинаются строки или столбцы. В таком элементе обычно хранится атрибут для всех данных строки/столбца.

Th нельзя применять для визуального форматирования. Данный принцип распространяется на все элементы разметки, которые имеют семантику.

Тело

Tbody – это тело. Оно включает в себя часть данных и группирует главные части таблицы. Tbody можно использовать несколько раз – до бесконечности. Этот прием позволяет дробить контент на части, сохраняя логическую связь.

Заголовка caption тут не будет. Его придется придумывать и скрывать через CSS.

Подвал

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

Он также выступает в качестве нижнего табличного колонтитула. Браузер будет выводить его после tbody. При печати tfoot может размещаться как на каждой напечатанной странице, так и только на последней. Здесь все зависит от браузера.

Теперь понятно, что такое td и tr, а также как работать с этими элементами. Лучше разобраться в веб-программировании и верстке помогут специальные дистанционные компьютерные курсы.

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.