<table>: Элемент таблицы

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

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

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

align Устаревший

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

bgcolor Устаревший

Определяет цвет фона таблицы. Значение — HTML цвет; либо 6-значный шестнадцатеричный код RGB, префикс которого — '#', или ключевое слово цвета. Другие CSS <color> значения не поддерживаются. Используйте 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 для связывания ячеек заголовка и данных в таблицах данных | Технические приёмы WCAG 2.0 от W3C

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

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

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

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

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

Поскольку структура <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

Это достигается путём введения атрибута scope для элементов <th> и установления значений, соответствующих значению 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>. Также добавляется дополнительная строка (<tr> элемент) в секцию заголовка (<thead> элемент) для введения заголовка "Даты членства" в качестве заголовка для столбцов "Присоединение" и "Прекращение".

Создание второй строки заголовка включает добавление атрибутов colspan и rowspan к элементам <th> для назначения ячеек заголовков соответствующим столбцам и строкам.

<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

Здесь свойство font добавлено к элементу <table> для установки более привлекательного шрифта (или отвратительного шрифта без засечек, в зависимости от ваших личных предпочтений), но интересной частью является второй стиль, где элементам <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> размещается в bottom таблицы с помощью свойства caption-side:

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>). Затем нижняя граница заголовка устанавливается в линию шириной два пикселя. Обратите внимание, однако, что мы используем селектор :nth-of-type для применения свойства border-bottom ко второй строке в заголовке. Почему? Потому что заголовок состоит из двух строк, которые охватываются некоторыми ячейками. Это означает, что там фактически две строки; применение стиля к первой строке не даст ожидаемого результата:

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 для последней ячейки <td> каждой строки тела в right:

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 в nowrap для <tbody>. Однако мы этого не делаем для <thead>, чтобы избежать того, что длинные заголовки заставляют столбцы быть шире, чем необходимо для отображения данных.

Чтобы заголовки таблицы оставались на странице при прокрутке вниз, мы установили position в значение sticky для элементов <th>. Обратите внимание, что мы не установили 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: #fff;
  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 для управления шириной таблицы