<table> Элемент HTML table

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

Попробуйте

<table>
  <caption>
    Front-end web developer course 2021
  </caption>
  <thead>
    <tr>
      <th scope="col">Person</th>
      <th scope="col">Most interest in</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML tables</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">Dennis</th>
      <td>Web accessibility</td>
      <td>45</td>
    </tr>
    <tr>
      <th scope="row">Sarah</th>
      <td>JavaScript frameworks</td>
      <td>29</td>
    </tr>
    <tr>
      <th scope="row">Karen</th>
      <td>Web performance</td>
      <td>36</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Average age</th>
      <td>33</td>
    </tr>
  </tfoot>
</table>

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

Атрибуты

Этот элемент включает глобальные атрибуты.

Устаревшие атрибуты

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

align

Задаёт горизонтальное выравнивание таблицы внутри родительского элемента. Возможные перечисленные значения: left, center и right. Вместо этого используйте свойства CSS margin-inline-start и margin-inline-end, поскольку этот атрибут устарел.

bgcolor

Задаёт цвет фона таблицы. Значение — это цвет HTML: либо шестизначный шестнадцатеричный код RGB с префиксом #, либо ключевое слово цвета. Другие значения <color> CSS не поддерживаются. Вместо этого используйте свойство CSS background-color, поскольку этот атрибут устарел.

border

Задаёт размер рамки вокруг таблицы в виде неотрицательного целого числа (в пикселях). Если задано значение 0, атрибут frame устанавливается в значение void. Вместо этого используйте свойство CSS border, поскольку этот атрибут устарел.

cellpadding

Задаёт расстояние между содержимым ячейки и её границей. Этот атрибут устарел: вместо него примените свойство CSS padding к элементам <th> и <td>.

cellspacing

Задаёт расстояние между двумя ячейками. Этот атрибут устарел: вместо него задайте свойство CSS border-spacing для элемента <table>. Обратите внимание, что это не влияет на результат, если свойство CSS border-collapse элемента <table> имеет значение collapse.

frame

Задаёт, какие стороны рамки вокруг таблицы должны отображаться. Возможные перечисленные значения: void, above, below, hsides, vsides, lhs, rhs, box и border. Вместо этого используйте свойства CSS border-style и border-width, поскольку этот атрибут устарел.

rules

Задаёт, где в таблице отображаются линии (границы). Возможные перечисленные значения: none (значение по умолчанию), groups (элементы <thead>, <tbody> и <tfoot>), rows (горизонтальные линии), cols (вертикальные линии) и all (границы вокруг каждой ячейки). Вместо этого используйте свойство CSS border для соответствующих элементов таблицы, а также для самого элемента <table>, поскольку этот атрибут устарел.

summary

Задаёт альтернативный текст, кратко описывающий содержимое таблицы. Вместо этого используйте элемент <caption>, поскольку этот атрибут устарел.

width

Задаёт ширину таблицы. Вместо этого используйте свойство CSS width, поскольку этот атрибут устарел.

Примечание: Хотя ни одна спецификация HTML не включает height в качестве атрибута <table>, некоторые браузеры поддерживают нестандартную интерпретацию height. Значение без единиц измерения задаёт минимальную абсолютную высоту в пикселях. Если задано процентное значение, минимальная высота таблицы будет относиться к высоте родительского контейнера. Вместо этого используйте свойство CSS min-height, поскольку этот атрибут устарел.

Визуальное расположение содержимого таблицы

Структура таблицы включает следующие элементы:

• <caption>
• <thead>
• <colgroup>
• <col>
• <th>
• <tbody>
• <tr>
• <td>
• <tfoot>

Блок <table> создаёт контекст форматирования таблицы. Элементы внутри <table> формируют прямоугольные блоки. Каждый блок занимает определённое количество ячеек таблицы согласно следующим правилам:

1. Блоки строк заполняют таблицу в порядке следования в исходном коде сверху вниз. Каждый блок строки занимает один ряд ячеек.
2. Блок группы строк занимает один или несколько блоков строк.
3. Блоки столбцов располагаются рядом друг с другом в порядке следования в исходном коде. В зависимости от значения атрибута dir столбцы располагаются слева направо или справа налево. Блок столбца занимает один или несколько столбцов ячеек таблицы.
4. Блок группы столбцов занимает один или несколько блоков столбцов.
5. Блок ячейки может охватывать несколько строк и столбцов. Пользовательские агенты обрезают ячейки, чтобы они поместились в доступное количество строк и столбцов.

У ячеек таблицы есть внутренние отступы. Блоки, из которых состоит таблица, не имеют внешних отступов.

Слои таблицы и прозрачность

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

Фон, заданный элементу на одном слое, будет виден, только если у расположенных выше слоёв прозрачный фон. Отсутствующая ячейка отображается так, как если бы это место занимал анонимный блок ячейки таблицы.

Доступность

Подписи

Добавление элемента <caption>, значение которого ясно и кратко описывает назначение таблицы, помогает людям решить, нужно ли им просматривать остальное содержимое таблицы или можно его пропустить.

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

• MDN: добавление подписи к таблице с помощью <caption>
• Подпись и краткое описание • Таблицы • Учебные материалы W3C WAI по веб-доступности

Область действия строк и столбцов

Атрибут scope в ячейках заголовков (элементах <th>) в простых случаях избыточен, поскольку область действия определяется автоматически. Однако некоторые вспомогательные технологии могут делать неверные выводы, поэтому явное указание области действия заголовка может улучшить взаимодействие с пользователем. В сложных таблицах можно указать scope, чтобы предоставить необходимые сведения о ячейках, относящихся к заголовку.

• Руководство MDN по доступности таблиц
• Таблицы с двумя заголовками • Таблицы • Учебные материалы W3C WAI по веб-доступности
• Таблицы с нерегулярными заголовками • Таблицы • Учебные материалы W3C WAI по веб-доступности
• H63: использование атрибута scope для связи ячеек заголовков и ячеек данных в таблицах данных | Методы W3C для WCAG 2.0

Сложные таблицы

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

В идеале рассмотрите альтернативные способы представления содержимого таблицы, например разделение её на несколько связанных таблиц меньшего размера, которым не нужно использовать атрибуты colspan и rowspan. Это не только поможет людям, использующим вспомогательные технологии, понять содержимое таблицы, но и может быть полезно людям с когнитивными особенностями, которым может быть сложно понять связи, заданные структурой таблицы.

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

• Руководство MDN по доступности таблиц
• Таблицы с многоуровневыми заголовками • Таблицы • Учебные материалы W3C WAI по веб-доступности
• H43: использование атрибутов id и headers для связи ячеек данных с ячейками заголовков в таблицах данных | Методы W3C для WCAG 2.0

Примеры

В приведённых ниже примерах показаны таблицы постепенно возрастающей сложности. Информацию о стилях таблиц, включая распространённые и полезные приёмы, см. также в нашем руководстве для начинающих Стилизация таблиц.

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

В этих примерах показано, как создать доступную таблицу, структурированную с помощью HTML и оформленную с помощью CSS.

Из-за особенностей структуры HTML-таблиц объём разметки может быстро увеличиваться. Поэтому для создания подходящей структуры важно чётко определить назначение и внешний вид таблицы. Логическая структура, созданная с помощью семантической разметки, не только упрощает оформление, но и позволяет создавать полезные и доступные таблицы, которые понятны всем и по которым легко перемещаться, включая поисковые системы и пользователей вспомогательных технологий.

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

Простая таблица

В этом примере показана очень простая таблица с тремя строками и двумя столбцами. Чтобы продемонстрировать стандартные стили таблиц браузера, CSS в этот пример не добавлен.

HTML

Строки таблицы задаются элементами <tr>, а столбцы — расположенными внутри них ячейками заголовков и ячейками данных. Первая строка содержит ячейки заголовков (элементы <th>), которые служат заголовками столбцов для ячеек данных (элементов <td>). Каждый элемент (<th> или <td>) в строке находится в соответствующем столбце: первый элемент строки — в первом столбце, а второй — во втором.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Maria Sanchez</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Michael Johnson</td>
    <td>34</td>
  </tr>
</table>

Результат

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

Расширенная таблица с ячейками заголовков

В этом примере расширяется простая таблица: добавляется содержимое и базовые стили CSS.

HTML

Теперь таблица состоит из четырёх строк (элементов <tr>), в каждой из которых по четыре столбца. Первая строка содержит ячейки заголовков (только элементы <th>). В последующих строках есть столбец заголовков (элементы <th> в качестве первых дочерних элементов каждой строки) и три столбца данных (элементы <td>). Поскольку элементы секций таблицы не используются, браузер автоматически определяет структуру группы содержимого: все строки оборачиваются в тело таблицы, представленное неявным элементом <tbody>.

<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

С помощью CSS мы добавляем базовые стили, создавая линии вокруг компонентов таблицы, чтобы сделать структуру данных более понятной. CSS добавляет сплошную границу вокруг элемента <table> и вокруг каждой ячейки таблицы, включая ячейки, заданные элементами <th> и <td>, отделяя все ячейки заголовков и данных.

table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Результат

Задание связей между ячейками таблицы

Прежде чем перейти к более сложным способам расширения таблицы, рекомендуется улучшить доступность, задав связи между ячейками заголовков и данных (элементами <th> и <td>).

HTML

Для этого к элементам <th> добавляется атрибут scope со значением col (столбец) или row (строка), соответствующим нужной области.

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">ID</th>
    <th scope="col">Member Since</th>
    <th scope="col">Balance</th>
  </tr>
  <tr>
    <th scope="row">Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th scope="row">Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th scope="row">Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS и визуальный результат не изменились — это изменение предоставляет вспомогательным технологиям, например программам чтения с экрана, полезную контекстную информацию, помогающую определить, к каким ячейкам относятся заголовки.

Явное задание групп секций таблицы

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

HTML

Поскольку первая строка (элемент <tr>) содержит только ячейки заголовков столбцов и служит заголовком для остального содержимого таблицы, её можно заключить в элемент <thead>, явно обозначив эту строку как секцию заголовка таблицы. Кроме того, то, что браузер выполняет автоматически, можно задать явно: секцию тела таблицы, содержащую основные данные, можно обозначить, заключив соответствующие строки в элемент <tbody>. Явное использование элемента <tbody> помогает браузеру создать нужную структуру таблицы и избежать нежелательных результатов.

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">ID</th>
      <th scope="col">Member Since</th>
      <th scope="col">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

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

Объединение столбцов и строк

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

HTML

В созданную таблицу добавляется новый столбец «Дата окончания членства» в каждую строку тела с помощью элемента <td>. В секцию заголовка (элемент <thead>) также добавляется дополнительная строка (элемент <tr>), в которой заголовок «Даты членства» объединяет столбцы «Дата вступления» и «Дата отмены».

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

<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Результат

Теперь секция заголовка состоит из двух строк: в первой расположены заголовки (элементы <th>) «Имя», «ID», «Даты членства» и «Баланс», а во второй — два подзаголовка для «Дат членства»: «Дата вступления» и «Дата отмены». Это достигается следующим образом:

• Ячейки заголовков «Имя», «ID» и «Баланс» в первой строке занимают обе строки заголовка благодаря атрибуту rowspan, то есть каждая из них имеет высоту в две строки.
• Ячейка заголовка «Даты членства» в первой строке занимает два столбца благодаря атрибуту colspan.
• Во второй строке находятся только две ячейки заголовков «Дата вступления» и «Дата отмены», поскольку остальные три столбца объединены с ячейками первой строки, занимающими две строки. Эти две ячейки заголовков правильно расположены под заголовком «Даты членства».

Подпись таблицы и сводка по столбцу

Часто рекомендуется предоставлять краткое описание содержимого таблицы, чтобы пользователи могли быстро определить её актуальность. Кроме того, в столбце «Баланс» отображается сумма балансов отдельных участников.

HTML

Краткое описание таблицы добавляется с помощью подписи таблицы (элемента <caption>) в качестве первого дочернего элемента <table>. Подпись задаёт доступное имя или доступное описание таблицы.

Наконец, под телом таблицы добавляется секция нижней части (элемент <tfoot>) со строкой, которая подводит итог столбца «Баланс», отображая сумму. Применяются элементы и атрибуты, введённые ранее.

<table>
  <caption>
    Status of the club members 2021
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Total balance</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

Результат

Базовое оформление таблицы

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

CSS

Здесь к элементу <table> добавлено свойство font, чтобы задать более привлекательный шрифт (или отвратительный шрифт без засечек — в зависимости от вашего мнения). Но интереснее второе правило стилей: для элементов <tr>, расположенных внутри <thead> и <tfoot>, задаётся светло-голубой background-color. Это способ быстро применить цвет фона ко всем ячейкам определённых секций одновременно.

table {
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

thead > tr,
tfoot > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

Результат

Расширенное оформление таблицы

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

Результат

Вот как будет выглядеть итоговая таблица:

HTML снова не изменился. Видите, на что способна правильно подготовленная структура HTML?

CSS

На этот раз CSS гораздо объёмнее. Он не сложный, но в нём много всего. Давайте разберём его по частям.

Здесь добавлены свойства border-collapse и border-spacing, чтобы убрать промежутки между ячейками и объединить соприкасающиеся границы в одну, а не оставлять двойные. Кроме того, с помощью свойства caption-side элемент <caption> размещается в bottom таблицы:

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

Далее свойство padding используется, чтобы добавить пространство вокруг содержимого всех ячеек таблицы. Свойство vertical-align выравнивает содержимое ячеек заголовков по bottom ячейки, что можно заметить в ячейках заголовка, занимающих две строки:

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}

Следующее правило CSS задаёт background-color всех элементов <tr> в заголовке таблицы (обозначенном с помощью <thead>). Затем для нижней границы заголовка задаётся линия толщиной два пикселя. Однако обратите внимание, что для применения свойства border-bottom ко второй строке заголовка используется селектор :nth-of-type. Почему? Заголовок состоит из двух строк, некоторые ячейки которого объединены. Это значит, что строк там действительно две; применение стиля к первой строке не даст ожидаемого результата:

thead > tr {
  background-color: rgb(228 240 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid rgb(140 140 140);
}

Оформим две ячейки заголовков «Дата вступления» и «Дата отмены» зелёными и красными оттенками, чтобы показать «хорошее» событие — вступление нового участника — и «неприятное» — отмену членства. С помощью селектора :last-of-type выберем последнюю строку секции заголовка таблицы и зададим первой ячейке заголовка в ней (заголовку «Дата вступления») зеленоватый цвет, а второй (заголовку «Дата отмены») — красноватый:

thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225 255 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255 225 225);
}

Первый столбец тоже должен выделяться, поэтому здесь добавлено несколько пользовательских стилей. Это правило CSS оформляет первую ячейку заголовка в каждой строке тела таблицы с помощью свойства text-align, выравнивая имена участников по левому краю, и задаёт ей немного другой background-color:

tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}

Для улучшения читаемости данных таблицы часто используют чередование цветов строк — этот приём иногда называют «зеброй». Добавим немного background-color каждой чётной строке:

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

В таблицах принято выравнивать значения валюты по правому краю, поэтому поступим так же. Для этого свойству text-align задаётся значение right для последнего элемента <td> в каждой строке тела:

tbody > tr > td:last-of-type {
  text-align: right;
}

Наконец, к нижней части таблицы применяются стили, похожие на стили заголовка, чтобы она тоже выделялась:

tfoot > tr {
  border-top: 2px dashed rgb(140 140 140);
  background-color: rgb(228 240 245);
}

tfoot th,
tfoot td {
  text-align: right;
  font-weight: bold;
}

Отображение больших таблиц в ограниченном пространстве

Распространённая проблема таблиц в интернете заключается в том, что на небольших экранах они изначально плохо работают, если содержимого много, а способ сделать их прокручиваемыми неочевиден — особенно если разметка поступает из CMS и её нельзя изменить, чтобы добавить обёртку.

В этом примере показан один из способов отображать таблицы в небольших областях. HTML-содержимое скрыто, поскольку оно очень объёмное и ничем не примечательно. В этом примере полезнее изучить CSS.

CSS

Изучая эти стили, вы заметите, что для свойства display таблицы задано значение block. Хотя это позволяет прокручивать таблицу, она теряет часть своей целостности, а ячейки таблицы стараются стать как можно меньше. Чтобы смягчить эту проблему, для white-space элемента <tbody> задано значение nowrap. Однако мы не делаем этого для <thead>, чтобы длинные заголовки не заставляли столбцы быть шире, чем необходимо для отображения данных.

Чтобы заголовки таблицы оставались на странице при прокрутке вниз, для элементов <th> задано липкое позиционирование с помощью свойства position. Обратите внимание: мы не задавали свойству border-collapse значение collapse, поскольку в этом случае заголовок нельзя правильно отделить от остальной части таблицы.

Поскольку <table> имеет фиксированный размер, важную роль здесь играет свойство overflow со значением auto: оно делает таблицу прокручиваемой.

table,
th,
td {
  border: 1px solid black;
}

table {
  overflow: auto;
  width: 100%;
  max-width: 400px;
  height: 240px;
  display: block;
  margin: 0 auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: white;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Изучение: основы HTML-таблиц
• <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: другие элементы, связанные с таблицами
• background-color: свойство CSS для задания цвета фона таблицы
• border, border-collapse, border-spacing: свойства CSS для управления видом границ ячеек, разделительных линий и рамки
• margin, padding: свойства CSS для выравнивания таблицы и задания отступов содержимого ячеек
• text-align: свойство CSS для горизонтального выравнивания содержимого ячеек таблицы
• vertical-align: свойство CSS для вертикального выравнивания содержимого ячеек таблицы
• width: свойство CSS для управления шириной таблицы