1.7. HTML таблицы

html_tableHTML таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.

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

Для всех элементов таблицы доступны ‎глобальные атрибуты, а также собственные атрибуты.

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

1. Как создать таблицу

Таблица создаётся при помощи парного тега <table></table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него. Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:

текст заголовка текст заголовка
данные данные
Рис.1. Внешний вид таблицы без форматирования css-свойствами

По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border:

Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;}.

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:

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

2. Как создать строки (ряды) таблицы

Строки или ряды таблицы создаются с помощью тега <tr>. Количество горизонтальных строк таблицы определяется количеством парных тегов <tr></tr>.

3. Как сделать ячейку заголовка столбца таблицы

Элемент <th> создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов <th></th>. Для элемента доступны атрибуты colspan, rowspan, headers.

4. Как сделать ячейку тела таблицы

Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги <td></td>, расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек <td> должно быть равно количеству пар ячеек <th>. Для элемента доступны атрибуты colspan, rowspan, headers.

5. Как добавить подпись (заголовок) к таблице

Элемент <caption> создает подпись таблицы. Добавляется непосредственно после тега <table>, вне строки или ячейки.

6. Группирование строк и столбцов таблицы

Элемент <colgroup> создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов <table> и <caption>.

Элемент <col> формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т.е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>. С помощью атрибута <style> можно изменить основной цвет фона ячеек. Для элемента <col> доступен атрибут span, задающий количество столбцов для объединения.

table_primer

Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов <col> и <colgroup>

7. Группировка разделов таблицы

Элемент <thead> создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами <tbody> и <tfoot> для указания каждой части таблицы.

Элемент должен быть использован в следующем порядке: как дочерний элемент <table>, после <caption> и <colgroup>, и перед <tbody>, <tfoot> и <tr> элементами. В пределах одной таблицы можно использовать один раз.

Элемент <tbody> группирует основное содержимое таблицы. Используется в сочетании с элементами <thead> и <tfoot>.

Элемент <tfoot> создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега <thead>, перед тегами <tbody> и <tr>.

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

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

table_primer2

Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы
Атрибут Описание, принимаемое значение
colspan Количество ячеек в строке для объединения по горизонтали.
<td colspan="3">
Возможные значения: число от 1 до 999.
headers Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.
<th id="идентификатор">...</th>
<th headers="идентификатор">...</th>

Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id.
rowspan Количество ячеек в столбце для объединения по вертикали.
<td rowspan="2">
Возможные значения: число от 1 до 999.
span Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.
<col span="2">
Принимаемые значения: любое целое положительное число.

6. Пример создания таблицы

table-html

Рис. 4. Создание меню ресторана с помощью html-таблицы

Разметка HTML

Стили CSS

  • Николай Малахов

    th — еще смотрю центрирует контент и полужирным

    • Да, верно. Этот тег предназначен для заголовков столбцов, его название — сокращённо от table header.
      Элемент tr образует ряды, или строки таблицы (сокращённо от table row), td — ячейка тела таблицы, предназначен для данных таблицы (сокращённо от table data).
      Если вам не нужны заголовки в столбцах, используйте только td.

      • Николай Малахов

        спасибо за подробные такие рассказы !!) уже себя верстальщиком почувствовал ))) ну англ у меня хорошо!! так еще сокращения теперь понятны от чего что!!!

        • пожалуйста! объяснять так уж объяснять))
          а вот англоязычным пользователям повезло больше нас, ведь они просто описывают обычные предметы и действия с ними.

  • Алексей

    4. Как сделать ячейку тела таблицы

    Элемент создаёт ячейки таблицы, внутрь которых помещаются данные «таюлицы». Ребят, у Вас тут ошибка.

    • Благодарю за внимательность! Исправила. Приятно, что есть ещё пользователи, которые читают, а не разглядывают картинки и код копируют))

  • Алексей

    Извините, но снова ошибка в теге
    5. Как добавить подпись (заголовок) к таблице

    Элемент создает подпись таблицы. Добавляется непосредственно после тега , вне строки или ячейки.

    Перечень продуктов-должен быть слеш

    Перечень продуктов

  • Freeman4D

    Если во всей таблице вот такие громоздкие типовые ссылки-картинки в виде флагов (с хинтами и альтами), то можно ли как-то на них сэкономить и вынести их все один раз из таблицы «наружу», чтобы в таблице использовать только в виде переменных, как я обошёлся с их оформлением через классы стилей в заголовках и строках.

    Но стили не поддерживают контент!
    Есть ли изящное решение, чтобы сократить, например, вот такую ячейку:

    до простейшего вида, например, –
    *ru
    и этим здорово разгрузить страницу от многочисленных дублей с их бесконечными правками? Заранее спасибо! https://uploads.disquscdn.com/images/1b5ee212c2476ba6f9e9031ec5cd76d41c97c9bdf77135b373665a783975a10f.jpg

    • Может вам попробовать задать разные классы для ячеек, например, td class="usa-flag"

  • Посмотрите примеры с закруглёнными углами таблиц https://html5book.ru/examples/demo-tables.html.
    P.S. Вопрос с картинкой ни куда не делся, просто когда вы пишете вопрос в дискусе, сначала мне нужно его утвердить, чтобы он появился в ленте.

  • По-другому — никак. Вы же пишете на мой сайт.

  • Зачем вам закругления на каждой ячейке внутри таблицы? Честно, не очень понятно. Вы где-то видели такую реализацию в живую? Вообще текст внутри ячеек можно помещать, например, в залитый фоном span, а для рядов таблицы задавать зебру.

  • Да, сложная у вас задача. Вариант со вложенными span должен решить проблему с радиусами.