HTML Tools
UKENRU

Тег <table>

Тег <table> определяет таблицу данных. Структура строится из thead/tbody/tfoot, строк tr и ячеек th/td.

Syntax

<table>
  <thead><tr><th>Заголовок</th></tr></thead>
  <tbody><tr><td>Данные</td></tr></tbody>
</table>

Attributes

colspan / rowspan (на th/td) Объединение ячеек по горизонтали или вертикали.
scope (на th) "col" или "row" — явно указывает, к чему относится заголовок, важно для доступности.

Example

<table>
  <thead>
    <tr><th scope="col">Тариф</th><th scope="col">Цена</th></tr>
  </thead>
  <tbody>
    <tr><td>Базовый</td><td>0 ₽</td></tr>
    <tr><td>Про</td><td>990 ₽</td></tr>
  </tbody>
</table>

Notes

  • Атрибуты border, cellpadding, cellspacing устарели — стилизуйте таблицу через CSS.
  • Для табличных данных (не для layout!) — вёрстка страницы таблицами считается устаревшей практикой.

Accessibility

  • th со scope="col"/"row" помогает скринридерам корректно озвучивать, к какой строке/столбцу относится ячейка.

Похожие инструменты

HTML Table Generator

Быстро сгенерируйте разметку HTML-таблицы с заданным количеством строк и столбцов.

Responsive table

Обёртка с overflow-x:auto для горизонтального скролла таблицы на узких экранах.

HTML Форматировщик и Минификатор

Форматирование и минификация HTML кода онлайн. Обработка полностью в браузере, без отправки на сервер.