HTML-тег <table>

Тег <table> определяет HTML-таблицу. Это контейнер для элементов, составляющих строки, ячейки и заголовки таблицы, отображающий табличные данные — информацию, имеющую смысловую взаимосвязь по строкам и столбцам.

На этой странице рассматривается, как правильно структурировать таблицу, как сделать её доступной для программ чтения с экрана, а также какие CSS-свойства заменяют устаревшие атрибуты оформления, которые больше не поддерживаются в HTML5.

Структура таблицы

Таблица строится из нескольких взаимодействующих элементов:

<tr> определяет строку таблицы.
<th> определяет ячейку-заголовок — её текст по умолчанию выделен жирным и выровнен по центру.
<td> определяет ячейку с данными.
<caption> задаёт заголовок таблицы.
<thead>, <tbody> и <tfoot> группируют строки заголовка, тела и подвала.
<colgroup> позволяет применять стили ко всем столбцам целиком.

Группировка строк с помощью <thead> и <tbody> — это не только опрятная разметка: она сообщает браузеру (и вспомогательным технологиям), какая строка является заголовком. Кроме того, это позволяет прокручивать тело таблицы при фиксированном заголовке и независимо стилизовать строки заголовка и тела.

Совет

Используйте <th> для любой ячейки, которая является подписью строки или столбца. Его главная ценность — доступность: программы чтения с экрана озвучивают заголовок при чтении ячейки с данными, поэтому пользователь, который не видит таблицу, всё равно понимает значение каждого значения. Дополнительный бонус: ячейки-заголовки по умолчанию выделены жирным и выровнены по центру, а также помогают поисковым системам понять структуру таблицы.

Синтаксис

Тег <table> используется парно. Содержимое записывается между открывающим (<table>) и закрывающим (</table>) тегами.

Пример HTML-тега `<table>`:

HTML-тег <table>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Upcoming release dates</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
        <tr>
          <th scope="row">July</th>
          <td>15.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Попробуйте сами »

Результат

Доступность таблиц

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

<caption> — это доступное имя таблицы. Размещайте его первым дочерним элементом <table>. Пользователи программ чтения с экрана слышат его, когда переходят к таблице, и понимают, о чём данные, ещё до их изучения.
<th scope="col"> помечает ячейку как заголовок всего столбца; <th scope="row"> — как заголовок своей строки. Благодаря этому программа чтения с экрана может объявлять «Month: June» вместо просто «June», связывая каждое значение с его подписью.

Для сложных таблиц — где ячейка относится к заголовкам, которые не находятся просто в верхней части столбца или в начале строки (например, заголовки, охватывающие несколько столбцов), — атрибута scope недостаточно. Используйте шаблон headers/id: задайте каждому <th> уникальный id, а затем перечислите соответствующие id в атрибуте headers каждого <td>.

<table>
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th id="region">Region</th>
      <th id="q1">Q1</th>
      <th id="q2">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="europe" headers="region">Europe</th>
      <td headers="europe q1">120</td>
      <td headers="europe q2">150</td>
    </tr>
  </tbody>
</table>

Атрибуты

Опасно

Атрибуты тега <table> не поддерживаются в HTML5. Для стилизации таблиц используйте перечисленные ниже свойства CSS.

Атрибут	Значение	Описание	CSS-свойство
align	left center right	Определяет выравнивание таблицы относительно окружающего текста. Не поддерживается в HTML5.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Определяет цвет фона таблицы. Не поддерживается в HTML5.	background-color
border	1 0	Определяет размер рамки, окружающей таблицу. Не поддерживается в HTML5.	border
cellpadding	pixels	Определяет отступ между стенкой ячейки и её содержимым. Не поддерживается в HTML5.	padding
cellspacing	pixels	Определяет расстояние между ячейками. Не поддерживается в HTML5.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Определяет, какая сторона рамки, окружающей таблицу, должна отображаться. Не поддерживается в HTML5.	border-style border-width
rules	none groups rows cols all	Определяет, какие внутренние границы должны быть видимыми. Не поддерживается в HTML5.	border (Используйте это свойство совместно с HTML-тегами thead, tbody, tfoot, col или colgroup).
width	pixels	Определяет ширину таблицы. Не поддерживается в HTML5.	width

Тег <table> также поддерживает глобальные атрибуты и атрибуты событий.

Замена устаревших атрибутов с помощью CSS

Приведённые выше атрибуты оформления (border, cellpadding, cellspacing, align, bgcolor и другие) устарели в HTML5. Стилизуйте таблицу с помощью CSS. В этом примере создаётся таблица с рамками, отступами и центрированием без использования каких-либо устаревших атрибутов:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        /* width="80%" + align="center" */
        width: 80%;
        margin: 30px auto;
        /* cellspacing="0" — collapse the double borders */
        border-collapse: collapse;
        /* bgcolor on the table */
        background-color: #f9f9f9;
      }
      th,
      td {
        /* border="1" */
        border: 1px solid #666;
        /* cellpadding="10" */
        padding: 10px;
        /* align="left" inside cells */
        text-align: left;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Styled with CSS, not attributes</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Краткое соответствие наиболее распространённых атрибутов их CSS-заменителям:

border → border
cellpadding → padding для <th>/<td>
cellspacing → border-spacing или border-collapse: collapse для устранения зазоров
align → margin (таблица) или text-align (ячейки)
bgcolor → background-color
width → width

Не используйте таблицы для вёрстки

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

Для вёрстки страниц используйте современный CSS:

CSS Grid для двумерных макетов (строки и столбцы) — естественная замена сеткообразным структурам страниц.
Flexbox для одномерных макетов, например, ряда карточек или навигационной панели.

Готовые структуры смотрите в разделе шаблоны HTML-вёрстки.

Практика

Какое утверждение об элементах HTML-таблицы является верным?

Элемент td определяет ячейку с данными, элемент th — ячейку-заголовок, а tr — строку.Элемент th используется для создания сноски внизу таблицы.Элемент td — единственный способ вставить изображения на веб-страницу.Элемент caption должен размещаться после закрывающего тега table.