Тег <th>

Тег <th> (укр. – “заголовок таблиці ”) використовується для визначення заголовка клітинки в таблиці HTML. Він є важливим елементом для структурування даних у таблицях, адже позначає заголовкові клітинки, що містять інформацію про стовпці або рядки таблиці. Тег <th> за замовчуванням відображається жирним шрифтом і вирівнюється по центру клітинки.

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

Атрибути

Специфічні атрибути

colspan — дозволяє заголовку розтягнутися на кілька стовпців. Наприклад:

<th colspan="2">Заголовок, що охоплює два стовпці</th>
  • rowspan — дозволяє заголовку розтягнутися на кілька рядків. Наприклад:
<th rowspan="2">Заголовок, що охоплює два рядки</th>
  • scope — визначає, до яких частин таблиці відноситься заголовок. Може бути використано для вказівки, чи є заголовок для стовпця (col), рядка (row) або групи стовпців/рядків (colgroup або rowgroup). Це важливо для покращення доступності. Наприклад:
<th scope="col">Ціна</th>

Глобальні атрибути

  • id — унікальний ідентифікатор елемента. Наприклад:
<th id="column-header">Заголовок стовпця</th>
  • class — клас, який дозволяє застосувати стилі CSS або групувати елементи. Наприклад:
<th class="header-column">Назва товару</th>
  • style — інлайн-стилізація заголовка. Наприклад:
<th style="background-color: #f2f2f2;">Заголовок</th>
  • lang — вказує мову вмісту заголовка. Наприклад:
<th lang="en">Product</th>
  • title — додатковий опис заголовка, який може бути корисним для доступності. Наприклад:
<th title="Заголовок стовпця з ціною">Ціна</th>

Приклад використання

<table>
  <thead>
    <tr>
      <th scope="col">Назва</th>
      <th scope="col">Ціна</th>
      <th scope="col">Кількість</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Товар 1</td>
      <td>10</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Товар 2</td>
      <td>15</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

У цьому прикладі використовуються теги <th> для визначення заголовків стовпців: Назва, Ціна та Кількість.

Додаткові моменти

  • Тег <th> за замовчуванням відображається жирним шрифтом і вирівнюється по центру клітинки, але можна змінювати це за допомогою CSS.
  • Важливо пам’ятати, що <th> використовуються для позначення заголовків стовпців і рядків, тому вони мають семантичне значення і повинні застосовуватися лише до заголовкових клітинок.
  • При створенні таблиць для великих даних або для доступності для користувачів з обмеженими можливостями, можна використовувати атрибути scope (вказує, чи стосується заголовок стовпця чи рядка) для кращої навігації.
  • Теги <th> можуть також бути використані разом із colspan та rowspan для створення більш складних заголовків, що охоплюють кілька стовпців або рядків.