Исполняемые доки HTML: Таблицы в HTML

Q: Как сделать таблицу в HTML?

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

Q: Почему у таблицы HTML нет рамок?

По умолчанию у таблиц нет рамок. Добавьте их через CSS: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. Старый атрибут border="1" устарел.

Q: Как сделать таблицу HTML адаптивной?

Поместите таблицу в контейнер с overflow-x: auto. На узком экране таблица будет прокручиваться вбок внутри контейнера, а не расширять всю страницу.

Как сделать таблицу в HTML

Таблица это элемент <table>, состоящий из строк (<tr>), а каждая строка состоит из ячеек: <th> для ячеек заголовков и <td> для ячеек с данными.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

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

Ячейки <th> по умолчанию жирные и выровнены по центру. Это только внешний вид; важно то, что они являются подписями, и об этом следующий раздел.

Элементы таблицы

Элемент	Что это
`<table>`	Таблица
`<caption>`	Заголовок таблицы, первый дочерний элемент `<table>`
`<thead>`	Группа строк шапки
`<tbody>`	Группа строк тела (их у таблицы может быть несколько)
`<tfoot>`	Группа строк подвала, например с итогами
`<tr>`	Строка
`<th>`	Ячейка заголовка
`<td>`	Ячейка с данными
`<colgroup>`, `<col>`	Столбцы, чтобы оформить столбец целиком (ширина, фон)

Рамки описаны на странице рамка таблицы в HTML, а ячейки, занимающие несколько столбцов или строк, на странице colspan и rowspan.

Ячейки заголовков, scope и caption

Таблица с заголовками сверху и сбоку должна указывать, в какую сторону относится каждый заголовок. scope="col" подписывает столбец под собой, scope="row" подписывает строку рядом с собой. <caption> дает таблице видимый заголовок:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

С такой разметкой программа чтения с экрана, переходя к ячейке 14:00, может объявить «Saturday, Closes, 14:00», и число никогда не звучит само по себе. В простой таблице с одной строкой заголовков браузеры обычно сами определяют заголовки без scope, но написать его ничего не стоит, а догадки это убирает.

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

thead, tbody и tfoot

Три группы делят строки на шапку, тело и подвал. Подвал это место для итогов:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

Две детали делают числа читаемыми: text-align: end выравнивает десятичные точки (у каждой цены два знака после точки), а font-variant-numeric: tabular-nums дает всем цифрам одинаковую ширину.

Если написать <tr> прямо внутри <table>, как в первом примере, браузер все равно добавит вокруг строк <tbody>. Поэтому селектор CSS вроде table > tr ничего не находит: на странице строки находятся внутри tbody. Используйте table tr или напишите <tbody> сами.

Оформление таблицы: полосы, наведение и ширина

:nth-child раскрашивает строки через одну, :hover подсвечивает строку под указателем, а width: 100% растягивает таблицу на всю ширину контейнера:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start выравнивает текст заголовка с данными под ним; иначе th выровнен по центру. start вместо left сохраняет правильное выравнивание в языках с письмом справа налево.

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

Таблица не может стать уже своего содержимого. На телефоне широкая таблица выталкивает всю страницу вбок. Оберните ее в контейнер с прокруткой:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Здесь ширина контейнера ограничена 300 пикселями, чтобы имитировать экран телефона; прокрутите его вбок. tabindex="0" позволяет пользователям клавиатуры сфокусироваться на контейнере и прокручивать его стрелками, а role="region" с aria-label дает этой остановке имя.

Таблицы нужны для данных

Используйте таблицу, когда у содержимого действительно есть строки и столбцы: цены, расписания, сравнения, результаты. Не используйте ее, чтобы расположить элементы страницы рядом. Таблицы для раскладки сбивают с толку программы чтения с экрана, которые объявляют бессмысленные строки и столбцы, и не подстраиваются под маленькие экраны. Раскладку делают CSS flexbox и grid.

Частые ошибки

Строки с разным количеством ячеек. Короткие строки заканчиваются раньше, и столбцы перестают совпадать.
<td> с жирным текстом вместо заголовков. Используйте <th>, чтобы заголовки были настоящими подписями.
Устаревшие атрибуты border, cellpadding, cellspacing, bgcolor и align. Используйте CSS.
Содержимое прямо в <tr> или <table>, вне ячеек. Браузеры выносят его из таблицы, обычно над ней.
Заголовок над таблицей вместо <caption>.
table > tr в CSS. Браузер вставил <tbody>; пишите table tr или tbody tr.

Часто задаваемые вопросы

Как сделать таблицу в HTML?

Оберните ее в <table>, напишите по одному <tr> на строку и поместите внутрь ячейки: <th> для ячеек заголовков и <td> для ячеек с данными. В каждой строке должно быть одинаковое количество ячеек, если только какие-то ячейки не занимают несколько столбцов.

Чем th отличается от td?

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

Для чего нужны thead, tbody и tfoot?

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

Почему у таблицы HTML нет рамок?

По умолчанию у таблиц нет рамок. Добавьте их через CSS: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. Старый атрибут border="1" устарел.

Как сделать таблицу HTML адаптивной?

Поместите таблицу в контейнер с overflow-x: auto. На узком экране таблица будет прокручиваться вбок внутри контейнера, а не расширять всю страницу.

Связанные концепции