<thead> – Елемент заголовка таблиці

Елемент HTML <thead> (table head – заголовок таблиці) обгортає низку рядів таблиці (елементів <tr>), вказуючи на те, що ці ряди утворюють заголовок таблиці, який містить інформацію про її стовпці. Це зазвичай виражається у вигляді заголовків стовпців (елементів <th>).

Спробуйте його в дії

Атрибути

Цей елемент приймає глобальні атрибути.

Нерекомендовані атрибути

Наступні атрибути є нерекомендованими та не повинні використовуватися. Вони задокументовані нижче для довідкових потреб при оновленні наявного коду та задля історичного інтересу.

align

Задає горизонтальне вирівнювання кожної комірки-заголовка. Можливі значення перелічені: left, center, right, justify і char. Значення char, коли підтримується, вирівнює текстовий вміст за символом, визначеним в атрибуті char, і з відступом, визначеним атрибутом charoff. Натомість слід використовувати властивість CSS text-align, адже цей атрибут – нерекомендований.

bgcolor

Визначає колір фону кожної комірки-заголовка. Значенням є колір HTML; або шестицифровий шістнадцятковий код RGB, перед яким стоїть #, або ключове слово кольору. Інші значення CSS <color&gt не підтримуються. Натомість слід використовувати властивість CSS background-color, оскільки цей атрибут є нерекомендованим.

char

Нічого не робить. Спершу планувався для задання вирівнювання вмісту за символом кожної комірки-заголовка. Якщо align не задано з char, то цей атрибут ігнорується.

charoff

Нічого не робить. Спершу планувався для задання кількості символів, на які робиться відступ вмісту комірки-заголовка від символу вирівнювання, заданого атрибутом char.

valign

Задає вертикальне вирівнювання кожної комірки-заголовка. Можливі значення перелічені: baseline, bottom, middle і top. Натомість слід використовувати властивість CSS vertical-align, оскільки цей атрибут є нерекомендованим.

Примітки щодо використання

• <thead> розміщується після всіх елементів <caption> і <colgroup>, але перед усіма <tbody>, <tfoot> і <tr>.
• Вкупі зі спорідненими елементами <tbody> і <tfoot>, елемент <tbody> надає корисну семантичну інформацію і може використовуватися при відображенні як на екрані, так і на друку. Задання таких груп вмісту таблиці також надає цінну контекстну інформацію для допоміжних технологій, серед яких читачі з екрана та пошукові системи.
• Коли друкується документ, у разі багатосторінкової таблиці, то заголовок таблиці зазвичай задає інформацію, що залишається однаковою на кожній сторінці.

Приклади

Дивіться повний приклад таблиці на сторінці <table>, де викладені загальні стандарти та найкращі практики.

Базова структура заголовка

Цей приклад демонструє таблицю, поділену на розділ заголовка із заголовками стовпців та розділ тіла із основними даними таблиці.

HTML

Елементи <thead> і <tbody> використовуються для структурування рядів таблиці на семантичні розділи. Елемент <thead> представляє заголовок таблиці, який містить ряд (<tr>) комірок заголовків стовпців (<th>).

<table>
  <thead>
    <tr>
      <th>ID студента</th>
      <th>Ім'я</th>
      <th>Спеціальність</th>
      <th>Кредити</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Коваленко Марія</td>
      <td>Інформаційні технології</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Шевченко Віктор</td>
      <td>Українська філологія</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Петренко Олександра</td>
      <td>Прикладна фізика</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

Трохи базового CSS вжито для стилізації та виділення заголовка таблиці, щоб заголовки стовпців виділялися серед даних у тілі таблиці.

thead {
  border-bottom: 2px solid rgb(160 160 160);
  text-align: center;
  background-color: #2c5e77;
  color: #fff;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Результат

Кілька рядів заголовка

Цей приклад демонструє розділ заголовка таблиці з двома рядами.

HTML

У цьому прикладі розмітка таблиці з базового прикладу розширена наявністю двох рядів таблиці (<tr>) в елементі <thead>, що утворює багаторядний заголовок таблиці. Додано додатковий стовпець, котрий розділяє імена студентів на ім'я та прізвище.

<table>
  <thead>
    <tr>
      <th>ID студента</th>
      <th>Студент</th>
      <th>Спеціальність</th>
      <th>Кредити</th>
    </tr>
    <tr>
      <th>Прізвище</th>
      <th>Ім'я</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Коваленко</td>
      <td>Марія</td>
      <td>Інформаційні технології</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Шевченко</td>
      <td>Віктор</td>
      <td>Українська філологія</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Петренко</td>
      <td>Олександра</td>
      <td>Прикладна фізика</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

Розтягнення комірок

Аби пов'язати та вишикувати комірки-заголовки щодо відповідних стовпців і рядів, на елементах <th> використовуються атрибути colspan і rowspan. Значення, задані в цих атрибутах, задають те, на скільки комірок простягається кожна комірка-заголовок (<th>). Через те, як задано ці атрибути, дві комірки-заголовки другого ряду вишикувано щодо стовпців, заголовками яких вони є. Кожна з них простягається на один ряд і один стовпець, оскільки усталені значення як атрибута colspan, так і rowspan – 1.

Розтягнення стовпця та ряду, продемонстроване цим прикладом, показано на наступній ілюстрації:

CSS

CSS не змінився порівняно з попереднім прикладом.

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: #fff;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

tbody {
  background-color: #e4f0f5;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Результати

Технічний підсумок

Специфікації

Сумісність із браузерами

Дивіться також

• Навчання – Основи таблиць HTML
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <tr> – інші елементи, пов'язані з таблицями
• background-color – властивість CSS для задання кольору фону кожної комірки-заголовка
• border – властивість CSS для контролю меж комірок-заголовків
• text-align – властивість CSS для горизонтального вирівнювання вмісту кожної комірки-заголовка
• vertical-align – властивість CSS для вертикального вирівнювання вмісту кожної комірки-заголовка