Урок 22 із 239
9%
← Назад

Ячейки-заголовки в таблице HTML

Познайомтеся з тегом th, який використовується для створення заголовків колонок і рядків таблиці.

Ячейки-заголовки в таблиці HTML

Окрім звичайних комірок td у HTML існують комірки-заголовки th. Вони використовуються для позначення назв стовпців або рядків таблиці.

За замовчуванням текст всередині th відображається жирним шрифтом і вирівнюється по центру.

Різниця між td і th

ТегПризначення
<td>Звичайна комірка з даними
<th>Комірка-заголовок

Таблиця без заголовків

<table border="1" width="300">
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>200$</td>
  </tr>

  <tr>
    <td>Nick</td>
    <td>Mayers</td>
    <td>300$</td>
  </tr>

  <tr>
    <td>Alex</td>
    <td>Jonson</td>
    <td>400$</td>
  </tr>
</table>

У цій таблиці незрозуміло, що означає кожна колонка. Щоб зробити таблицю зрозумілішою, додаємо перший рядок із заголовками.

Таблиця з th

<table border="1" width="300">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Salary</th>
  </tr>

  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>200$</td>
  </tr>

  <tr>
    <td>Nick</td>
    <td>Mayers</td>
    <td>300$</td>
  </tr>

  <tr>
    <td>Alex</td>
    <td>Jonson</td>
    <td>400$</td>
  </tr>
</table>
  • Перший рядок таблиці часто містить заголовки колонок.
  • Для заголовків використовують тег th.
  • Для звичайних даних використовують тег td.
  • Один рядок таблиці створюється через тег tr.

Приклад сучасної структури таблиці

<table>
  <tr>
    <th>Ім'я</th>
    <th>Вік</th>
    <th>Місто</th>
  </tr>

  <tr>
    <td>Андрій</td>
    <td>25</td>
    <td>Київ</td>
  </tr>
</table>
❗ Важливо:

Тег th не просто робить текст жирним. Він повідомляє браузеру та пошуковим системам, що це заголовок таблиці.

📌 Завдання:
  1. Створіть таблицю працівників.
  2. Додайте перший рядок із заголовками через th.
  3. Створіть три колонки: ім'я, прізвище, зарплата.
  4. Додайте декілька рядків із даними через td.
💡 Показати підказку

Перший рядок таблиці зробіть через th, всі наступні рядки з інформацією — через td.

✅ Показати відповідь
Приклад:

<table border="1">

  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Salary</th>
  </tr>

  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>200$</td>
  </tr>

</table>