Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить тег <th>?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати228 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.