HTML Тег <th>
Приклад
Проста HTML-таблиця з трьома рядками, двома клітинками заголовків і чотирма клітинками даних:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <th> визначає клітинку заголовка в таблиці HTML.
Таблиця HTML має два види комірок:
- Комірки заголовка – містять інформацію заголовка (створену за допомогою елемента
<th>) - Комірки даних - містять дані (створені за допомогою елемента <td>)
Текст в елементах <th> за замовчуванням виділяється жирним шрифтом і вирівнюється по центру.
Текст в елементах <td> за замовчуванням звичайний і вирівняний за лівим краєм.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <th> | Так | Так | Так | Так | Так |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| abbr | text | Визначає скорочену версію вмісту в комірці заголовка |
| colspan | number | Визначає кількість стовпців, які повинна охоплювати клітинка заголовка |
| headers | header_id | Визначає одну або кілька клітинок заголовка, з якими пов’язана клітинка |
| rowspan | number | Визначає кількість рядків, які має охоплювати комірка заголовка |
| scope | col colgroup row rowgroup |
Визначає, чи є клітинка заголовка заголовком для стовпця, рядка або групи стовпців чи рядків |
Глобальні атрибути
Тег <th> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <th> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Як вирівняти вміст всередині <th> (за допомогою CSS):
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:left">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як додати фоновий колір до клітинки заголовка таблиці (за допомогою CSS):
<table>
<tr>
<th style="background-color:#FF0000">Month</th>
<th style="background-color:#00FF00">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як встановити висоту клітинки заголовка таблиці (за допомогою CSS):
<table>
<tr>
<th style="height:100px">Month</th>
<th style="height:100px">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як вказати відсутність перенесення слів у комірці заголовка таблиці (за допомогою CSS):
<table>
<tr>
<th>Month</th>
<th style="white-space:nowrap">My Savings for a new car</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як вертикально вирівняти вміст усередині <th> (за допомогою CSS):
<table style="width:50%;">
<tr style="height:100px">
<th style="vertical-align:bottom">Month</th>
<th style="vertical-align:bottom">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як встановити ширину клітинки заголовка таблиці (за допомогою CSS):
<table style="width:100%">
<tr>
<th style="width:70%">Month</th>
<th style="width:30%">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як створити заголовки таблиці:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як створити таблицю з підписом:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як визначити клітинки таблиці, які охоплюють більше ніж один рядок або стовпець:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
Спробуйте самі »
Пов’язані сторінки
HTML підручник: HTML Таблиці
HTML DOM довідник: Об’єкт TableHeader
CSS підручник: Стилізація таблиць
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <th> з наступними значеннями за замовчуванням:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}
