Skip to main content

Що робить тег <th>?

Тег <th> (від table header) використовується в HTML для створення комірок-заголовків таблиці. Він схожий на <td>, але має семантичну і візуальну відмінність - вказує, що комірка містить заголовок стовпця або рядка, а не звичайні дані.


Основне призначення

Тег <th> використовується, щоб позначити заголовки таблиці, які допомагають зрозуміти, що означає кожна колонка чи рядок. Браузер типово:

  • робить текст жирним;
  • вирівнює по центру вміст комірки.

Приклад:

html
<table border="1"> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> <tr> <td>Maria</td> <td>25</td> <td>Warsaw</td> </tr> </table>

Тут рядок з <th> задає заголовки стовпців, а <td> містить дані.


Атрибут scope

Для покращення доступності (наприклад, для екранних читачів) можна вказати, до чого належить заголовок:

  • scope="col" - заголовок стовпця;
  • scope="row" - заголовок рядка.

Приклад:

html
<tr> <th scope="row">January</th> <td>$1200</td> </tr>

Можна використовувати і в бічних заголовках:

html
<table border="1"> <tr> <th>Month</th> <th>Sales</th> </tr> <tr> <th scope="row">January</th> <td>1200</td> </tr> <tr> <th scope="row">February</th> <td>1500</td> </tr> </table>

Різниця між <th> і <td>:

ТегПризначенняОформлення типово
<td>Звичайні дані таблиціЗвичайний текст, вирівнювання по лівому краю
<th>Заголовок рядка або стовпцяЖирний текст, вирівнювання по центру

Висновок:

Тег <th> створює комірку-заголовок у таблиці, яка допомагає користувачу та пошуковим системам зрозуміти структуру даних. Він робить таблицю зрозумілою, структурованою і семантично правильною.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.