HTML Заголовки таблиць
HTML-таблиці можуть мати заголовки для кожного стовпця або рядка, або для кількох стовпців/рядків.
| EMIL | TOBIAS | LINUS |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| MON | TUE | WED | THU | FRI | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| DECEMBER | ||
|---|---|---|
HTML Заголовки таблиць
Заголовки таблиць визначаються елементами th, кожен елемент th представляє чарунку таблиці.
Приклад
<table>
<tr>
<th>Ім'я</th>
<th>Прізвище</th>
<th>Вік</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Спробуйте самі »
Заголовки таблиці по вертикалі
Щоб використовувати перший стовпець як заголовки таблиці, визначте першу чарунку в кожному рядку як елемент th:
Приклад
<table>
<tr>
<th>Ім'я</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Прізвище</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Вік</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Спробуйте самі »
Вирівнювання заголовків таблиці
За замовчуванням заголовки таблиць виділяються жирним шрифтом і розташовуються по центру:
| Ім'я | Прізвище | Вік |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Щоб вирівняти заголовки таблиці по лівому краю, використовуйте CSS властивість text-align:
Заголовок для кількох стовпців
У вас може бути заголовок, який охоплює два або більше стовпців.
| Ім'я | Вік | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Для цього використовуйте атрибут colspan в елементі <th>:
Приклад
<table>
<tr>
<th colspan="2">Ім'я</th>
<th>Вік</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Спробуйте самі »
Ви дізнаєтесь більше про colspan та rowspan в розділі Table colspan & rowspan на нашому сайті W3Schools українською.
Заголовок (підпис) таблиці
Ви можете додати підпис, який буде слугувати заголовком для всієї таблиці.
| Місяць | Економія |
|---|---|
| Січень | $100 |
| Лютий | $50 |
Щоб додати підпис до таблиці, використовуйте тег <caption>:
Приклад
<table style="width:100%">
<caption>Щомісячна економія</caption>
<tr>
<th>Місяць</th>
<th>Економія</th>
</tr>
<tr>
<td>Січень</td>
<td>$100</td>
</tr>
<tr>
<td>Лютий</td>
<td>$50</td>
</tr>
</table>
Спробуйте самі »
Примітка: Тег <caption> потрібно вставляти відразу після тегу <table>.
