Тег <thead>
Тег <thead> (укр. — “заголовок таблиці”) в HTML використовується для групування рядків заголовка таблиці. Він дозволяє логічно відокремити шапку таблиці від її основного вмісту та підвалу.
Разом з тегами <tbody> та <tfoot> забезпечує семантичну структуру таблиці, покращує доступність та роботу скрінрідерів, а також дозволяє браузеру правильно обробляти фіксацію заголовків при прокрутці.
Атрибути
Специфічні атрибути
Тег <thead> не має специфічних (унікальних) атрибутів.
Глобальні атрибути
Тег <thead> підтримує всі глобальні атрибути HTML:
- id — унікальний ідентифікатор. Наприклад:
<thead id="main-header">
...
</thead>- class — для CSS-стилізації. Наприклад:
<thead class="table-header">
...
</thead>- style — для інлайн-стилів. Наприклад:
<thead style="background-color: #f0f0f0;">
...
</thead>Приклад використання
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання thead</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
thead {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Приклад таблиці з thead:</h2>
<table>
<thead>
<tr>
<th>№</th>
<th>Ім'я</th>
<th>Електронна пошта</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Іван</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Олена</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>Додаткові моменти
- Обов’язково повинен бути розташований всередині тега
<table>. - Може містити лише рядки
<tr>, які в свою чергу містять комірки<th>. - Може поєднуватись із тегами
<tbody>та<tfoot>для повної структури таблиці. - Допомагає браузеру оптимізувати рендеринг при прокрутці великих таблиць (sticky header).
- Підвищує доступність — скрінрідери розпізнають заголовок таблиці.
- Підтримується усіма сучасними браузерами.
