HTML-тег <thead>

HTML-тег <thead> используется для группировки содержимого заголовка в HTML-таблице. Обычно он используется вместе с <tbody> и <tfoot> для структурирования таблицы в логические разделы, что улучшает её читаемость и семантику. Тег <thead> содержит строки( <tr> ) и ячейки заголовков( <th> ), описывающие столбцы таблицы.

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

Базовый синтаксис HTML-тега <thead>

Базовая структура таблицы с разделом <thead> следующая: 

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

Раздел <thead> содержит строки с ячейками заголовков, описывающими столбцы таблицы.

Пример таблицы с <thead>

Вот пример таблицы, в которой баллы учащихся организованы с заголовком: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Student Scores</h2>
        <table border="1">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Subject</th>
                    <th>Score</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Alice</td>
                    <td>Math</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>Science</td>
                    <td>85</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Пример таблицы с thead

Пояснение: Раздел <thead> содержит заголовки столбцов «Имя», «Тема» и «Оценка», тогда как данные находятся в разделе <tbody> .

Оформление раздела <thead> с помощью CSS

Раздел <thead> можно стилизовать независимо, чтобы отличить его от остальной части таблицы: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }
            thead th {
                background-color: #f4f4f4;
                font-weight: bold;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2>Styled Table Headers</h2>
        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Laptop</td>
                    <td>10</td>
                    <td>$1000</td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td>20</td>
                    <td>$500</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Оформление раздела thead с помощью CSS

Результат: ячейки заголовков оформлены светлым фоном и жирным текстом, чтобы отличить их от основной части таблицы.

Атрибуты HTML-тега <thead>

  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .
  • Атрибуты событий: позволяет использовать обработчики событий, такие как onclick , onmouseover и onfocus .

Практическое применение тега <thead>

  • Заголовки таблиц: организуйте заголовки столбцов для удобства чтения и семантической ясности.
  • Стиль: применяйте различные стили к заголовкам с помощью CSS для улучшения визуального представления.
  • Доступность: Улучшите навигацию по таблице для программ чтения с экрана, четко разделив содержимое заголовка.
  • Адаптивные таблицы: используйте тег <thead> для динамической настройки стилей заголовков для мобильных устройств или экранов меньшего размера.