0Pricing
HTML Academy · Урок

Структура thead, tbody и tfoot

Организуйте строки таблицы в семантические разделы заголовка, тела и нижнего колонтитула

«Структура thead, tbody и tfoot» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Разделы таблицы

Полная таблица HTML содержит три необязательных, но рекомендуемых раздела:

  • <thead> — строки заголовка
  • <tbody> — строки основной части (основные данные)
  • <tfoot> — строки нижней части (итоги, сводные данные)

thead

Элемент <thead> содержит строки заголовка:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

Элемент <tbody> содержит строки с основными данными:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

Элемент <tfoot> содержит строки нижней части, обычно с итогами или сводными данными:

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

Полностью структурированная таблица

Полная таблица со всеми тремя разделами:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

Зачем использовать thead, tbody и tfoot?

Преимущества структуры таблицы:

  • Семантика — программы чтения с экрана понимают разницу между заголовком, данными и сводкой
  • Выбор элементов в CSS — стилизуйте разделы независимо друг от друга
  • Печать — thead повторяется на каждой напечатанной странице
  • Прокрутка — прокручивайте tbody отдельно с помощью переполнения в CSS

Прокручиваемый tbody

Сделайте прокручиваемой только основную часть, оставив заголовок закреплённым:

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

Неявный tbody

Если не указать <tbody>, браузер автоматически добавит его:

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

Несколько элементов tbody

Таблица может содержать несколько групп <tbody>:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

Стилизация разделов таблицы

Выбирайте разделы с помощью CSS:

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

Поведение программ чтения с экрана

При правильной структуре thead/tbody программы чтения с экрана могут:

  • Объявлять заголовки столбцов как контекст для каждой ячейки данных
  • Перемещаться между разделами (областью заголовка и областью данных)
  • Сообщать пользователям количество строк и столбцов

Строки thead с несколькими строками

thead может содержать несколько строк для сложных заголовков:

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

Проверка знаний

Где обычно находится tfoot в исходном HTML-коде по сравнению с отображаемой таблицей?

Повторение: thead, tbody и tfoot

Основы структуры таблицы:

  • <thead> — строки заголовка (повторяются при печати)
  • <tbody> — строки данных (может быть несколько таких разделов)
  • <tfoot> — строки со сводкой или итогами
  • Позволяет выбирать разделы в CSS и обеспечивает доступное чтение таблицы
  • Всегда явно записывайте tbody, даже если браузеры добавляют его автоматически

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

Урок «Структура thead, tbody и tfoot» бесплатный?

Да — полный текст урока «Структура thead, tbody и tfoot» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Структура thead, tbody и tfoot»?

Организуйте строки таблицы в семантические разделы заголовка, тела и нижнего колонтитула Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Структура thead, tbody и tfoot»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. table, tr, td и th
  2. Структура thead, tbody и tfoot
  3. colspan и rowspan для объединения ячеек
  4. Доступность таблиц: scope, summary и caption
← Назад к HTML Academy