7.1 Тег <caption>
Теги <caption>, <thead>, <tbody> і <tfoot> використовуються для покращення структурування та семантичної розмітки таблиць в HTML. Вони допомагають організувати дані, роблячи таблиці зрозумілішими та доступнішими як для користувачів, так і для пошукових систем.
Тег <caption>
Тег <caption> використовується для додавання заголовка до таблиці. Він допомагає описати вміст таблиці, робить її зрозумілішою для користувачів і доступнішою для пошукових систем.
Синтаксис:
<table>
<caption>Заголовок таблиці</caption>
<!-- Вміст таблиці -->
</table>
Приклад:
<table>
<caption>Заголовок таблиці</caption>
<tr>
<th>Ім'я</th>
<th>Оцінка</th>
</tr>
<tr>
<td>Іван</td>
<td>90</td>
</tr>
<tr>
<td>Марія</td>
<td>85</td>
</tr>
</table>
7.2 Тег <thead>
Тег <thead> використовується для групування рядків заголовка таблиці. Він допомагає логічно відокремити заголовок таблиці від її основного вмісту.
Синтаксис:
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
</thead>
<!-- Вміст таблиці -->
</table>
Приклад:
<table>
<thead>
<tr>
<th>Ім'я</th>
<th>Оцінка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Іван</td>
<td>90</td>
</tr>
<tr>
<td>Марія</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 Тег <tbody>
Тег <tbody> використовується для групування основної частини вмісту таблиці. Він допомагає відокремити основний вміст від заголовка та «підвалу» таблиці.
Синтаксис:
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
</thead>
<tbody>
<!-- Вміст таблиці -->
</tbody>
</table>
Приклад:
<table>
<thead>
<tr>
<th>Ім'я</th>
<th>Оцінка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Іван</td>
<td>90</td>
</tr>
<tr>
<td>Марія</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 Тег <tfoot>
Тег <tfoot> використовується для групування рядків «підвалу» (низу) таблиці. Він зазвичай містить підсумкову або узагальнену інформацію.
Синтаксис:
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
</thead>
<tbody>
<!-- Вміст таблиці -->
</tbody>
<tfoot>
<tr>
<td>Підсумок 1</td>
<td>Підсумок 2</td>
</tr>
</tfoot>
</table>
Повний приклад:
<table>
<thead>
<tr>
<th>Ім'я</th>
<th>Оцінка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Іван</td>
<td>90</td>
</tr>
<tr>
<td>Марія</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Середній бал</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
Запам'ятати це насправді дуже просто:
Пояснення структури таблиці
<table>: зовнішній контейнер для всієї таблиці<caption>: заголовок таблиці, що допомагає описати її вміст<thead>: групує рядки заголовків таблиці<tbody>: групує основний вміст таблиці<tfoot>: групує рядки підвалу таблиці
Закріплюємо матеріал
Давай створимо таблицю з усіма вивченими тегами та стилізуємо її.
<table>
<caption>Результати іспиту</caption>
<thead>
<tr>
<th>Ім'я</th>
<th>Оцінка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Іван</td>
<td>91</td>
</tr>
<tr>
<td>Марія</td>
<td>94</td>
</tr>
<tr>
<td>Ніна</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Середній бал</td >
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ