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

Елемент HTML <th> визначає комірку як заголовок групи комірок таблиці та може використовуватися як дочірній елемент елемента <tr>. Конкретна природа цієї групи визначається атрибутами scope і headers.

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

Атрибути

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

abbr

Короткий, скорочений опис вмісту комірки-заголовка, наданий як альтернативний підпис для використання для комірки-заголовка у разі посилання на неї в інших контекстах. Деякі користувацькі агенти, наприклад, читачі з екрана, можуть подавати цей опис перед самим вмістом.

colspan

Невід'ємне цілочислове значення, що вказує на кількість стовпців, які охоплює або розширює комірка-заголовок. Усталене значення – 1. Користувацькі агенти відкидають значення, які перевищують 1000, як неправильні, на користь 1.

headers

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

rowspan

Невід'ємне цілочислове значення, що вказує на кількість рядів, які охоплює або розширює комірка-заголовок. Усталене значення – 1; якщо його значенням задано 0, то комірка-заголовок розширюється до кінця розділу групування таблиці (<thead>, <tbody>, <tfoot>, навіть якщо такий розділ визначений неявно), до якого належить <th>. Значення, більші за 65534, обрізаються до 65534.

scope

Визначає комірки, яких стосується елемент-заголовок (визначений у <th>). Можливі значення перелічені:

• row – заголовок стосується всіх комірок ряду, до якого належить;
• col – заголовок стосується всіх комірок стовпця, до якого належить;
• rowgroup – заголовок належить групі рядків і стосується всіх її комірок;
• colgroup – заголовок належить групі стовпців і стосується всіх її комірок.

Якщо атрибут scope не задано, або якщо його значенням не є ані row, ані col, ані rowgroup, ані colgroup, то браузери автоматично вибирають набір комірок, до яких застосовується ця комірка-заголовок.

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

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

align

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

axis

Містить список розділених пробілами рядків, кожний з яких відповідає атрибуту id групи комірок, до яких застосовується комірка-заголовок. Натомість слід використовувати атрибут scope, адже цей атрибут – нерекомендований.

bgcolor

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

char

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

charoff

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

height

Визначає рекомендовану висоту комірки-заголовка. Натомість слід використовувати властивість CSS height, адже цей атрибут – нерекомендований.

valign

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

width

Визначає рекомендовану ширину комірки-заголовка. Натомість слід використовувати властивість CSS width, адже цей атрибут – нерекомендований.

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

• <th> можна використовувати лише всередині елемента <tr>.

• У простих контекстах використання атрибута headers може бути зайвим, оскільки він може бути виведений автоматично. Проте деякі допоміжні технології можуть не вивести його правильно, тому задання області застосування заголовка може покращити користувацький досвід.

• Коли атрибути colspan і rowspan використовуються для охоплення комірками-заголовками кількох стовпців і рядів, то комірки без цих атрибутів (з усталеним значенням 1) автоматично вписуються у вільні доступні місця в структурі таблиці, що охоплюють комірки 1x1, як показано на наступному рисунку:

  

  [!NOTE] Ці атрибути не повинні використовуватися для перекриття комірок.

Приклади

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

Базові заголовки стовпця та ряду

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

HTML

Перший ряд (елемент <tr>) містить заголовки стовпців (елементи <th>), які діють як "назви" стовпців, щоб полегшити розуміння інформації в цих стовпцях та позначити дані. Щоб показати, що кожен заголовок стовпця стосується всіх комірок у відповідному стовпці, атрибут scope заданий з col (стовпець).

Решта рядів містять основні дані таблиці. Кожен з цих рядів має заголовок рядка (елемент <th>), вставлений як перша комірка. Це утворює стовпець з заголовками рядків як перший стовпець таблиці. Аналогічно до заголовків стовпців, атрибут scope заданий з row, щоб вказати, яких комірок стосується кожен заголовок рядка, і в цьому прикладі це всі комірки даних (елементи <td>) у кожному рядку.

[!NOTE] В нормальному випадку для групування рядів із заголовками у розділи заголовка таблиці та тіла таблиці, відповідно, застосовуються елементи групування <thead> і <tbody>. Ці елементи відсутні в цьому прикладі для зменшення складності та зосередження на використанні комірок-заголовків.

<table>
  <tr>
    <th scope="col">Символ</th>
    <th scope="col">Кодове слово</th>
    <th scope="col">Вимова</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Альфа</td>
    <td>АЛЬ фа</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Браво</td>
    <td>БРА во</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Чарлі</td>
    <td>ЧАР лі</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Дельта</td>
    <td>ДЕЛЬ та</td>
  </tr>
</table>

CSS

Для стилізації таблиці та її комірок застосовано трохи базового CSS. Щоб націлитися на комірки-заголовки за значеннями атрибута scope, використовуються селектори атрибутів, і заголовки стовпців і рядків (елементи <th>) виділяються та відрізняються один від одного та від комірок даних (<td>).

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

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

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

Результат

Охоплення кількох стовпців чи рядів

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

HTML

Доданий ще один ряд таблиці (елемент <tr>), другий ряд-заголовок, з двома додатковими заголовками стовпців (елементами <th>). Таким чином, стовпець "Вимова" розбивається на два стовпці: один для IPA (Міжнародний фонетичний алфавіт) та один для наслідування (оригінальний стовпець вимови). Відповідні комірки даних (елементи <td>) додаються до кожного наступного рядка.

Як показано в примітках щодо використання, атрибути colspan і rowspan можуть бути використані на елементах <th>, аби призначити комірки-заголовки відповідним стовпцям і рядам. Щоб отримати "дворядковий" заголовок у структурі таблиці, перші дві комірки-заголовки всередині першого елемента <tr> охоплюють два ряди. Третя комірка-заголовок охоплює два стовпці (залишаючись у першому ряду). Така структура залишає дві доступні області у третьому та четвертому стовпцях у другому ряду, де автоматично розміщуються два заголовки всередині другого елемента <tr>, з усталеним значенням 1 для атрибутів colspan і rowspan.

[!NOTE] В нормальному випадку для групування рядів із заголовками у розділи заголовка таблиці та тіла таблиці використовуються елементи групування <thead> і <tbody>. Це не реалізовано в цьому прикладі для зосередження на заголовках та охопленні та зменшення складності прикладу.

<table>
  <tr>
    <th scope="col" rowspan="2">Символ</th>
    <th scope="col" rowspan="2">Кодове слово</th>
    <th scope="col" colspan="2">Вимова</th>
  </tr>
  <tr>
    <th scope="col">IPA</th>
    <th scope="col">Наслідування</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Альфа</td>
    <td>ˈælfa</td>
    <td>АЛЬ фа</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Браво</td>
    <td>ˈbraːˈvo</td>
    <td>БРА во</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Чарлі</td>
    <td>ˈtʃɑːli</td>
    <td>ЧАР лі</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Дельта</td>
    <td>ˈdeltɑ</td>
    <td>ДЕЛЬ та</td>
  </tr>
</table>

CSS

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

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;
}

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

Результат

Зв'язування комірок-заголовків з іншими комірками-заголовками

Для складніших відносин між комірками-заголовками використання елементів th з атрибутом scope самого по собі може бути недостатньо для допоміжних технологій, особливо для читачів з екрана.

HTML

Аби покращити доступність попереднього прикладу і дати читачам з екрана змогу, наприклад, озвучувати заголовки, пов'язані з кожною коміркою-заголовком, можна додати атрибут headers вкупі з id. Оскільки стовпець "Вимова" у прикладі розбивається на два стовпці, утворюючи "дворядковий" заголовок, допоміжні технології, такі як читачі з екрана, можуть не змогти визначити, з якими додатковими комірками-заголовками (елементами <th>) пов'язана комірка-заголовок "Вимова", і навпаки. Тому атрибут headers використовується для комірок-заголовків "Вимова", "IPA" та "Наслідування", щоб зв'язати відповідні комірки-заголовки на основі значень унікальних ідентифікаторів з доданими атрибутами id у вигляді списку, розділеного пробілами.

[!NOTE] Рекомендовано використовувати в атрибуті id більш описові та корисні значення. Кожен id в документі повинен бути унікальним для цього документа. У цьому прикладі значення id – одиничні символи, щоб зосередитися на концепції атрибута headers.

<table>
  <tr>
    <th scope="col" rowspan="2">Символ</th>
    <th scope="col" rowspan="2">Кодове слово</th>
    <th scope="col" colspan="2" id="p" headers="i r">Вимова</th>
  </tr>
  <tr>
    <th scope="col" id="i" headers="p">IPA</th>
    <th scope="col" id="r" headers="p">Наслідування</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Альфа</td>
    <td>ˈælfa</td>
    <td>АЛЬ фа</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Браво</td>
    <td>ˈbraːˈvo</td>
    <td>БРА во</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Чарлі</td>
    <td>ˈtʃɑːli</td>
    <td>ЧАР лі</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Дельта</td>
    <td>ˈdeltɑ</td>
    <td>ДЕЛЬ та</td>
  </tr>
</table>

Результат

Візуальний результат не змінився від попередньої таблиці-прикладу.

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

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

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

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

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