You are on page 1of 3

Для логічного структурування даних таблиці використовуються теги <thead>,

<tbody>, <tfoot>. Розглянемо кожен з них детальніше.

Тег <thead> використовується як контейнер для рядків таблиці та


застосовується для групування рядків з клітинками для заголовків стовпців, тим
самим формуючи «шапку» таблиці. Прописується всередині тегу <table>
першим або одразу після тегів <caption> і <colgroup>, якщо вони є. В таблиці
можна використовувати лише один елемент <thead>.

Тег <tfoot> призначений для формування «підвалу» таблиці, також


використовується як контейнер для рядків. В таблиці можна використовувати
лише один елемент <tfoot>, який розташовано одразу після тегу <thead>.

Тег <tbody> використовується як контейнер для рядків таблиці, які містять


клітинки з основним контентом таблиці, формуючи «тіло» таблиці. В таблиці
можна використати лише один елемент <tbody>, який прописується після тегів
<thead> і <tfoot>.

<table>
<caption>Заголовок таблиці</caption>
<colgroup>
<colspan="2" class="col-1">
<colspan="4" class="col-2">
<col class=" col-3">
</colgroup>

<thead>
<tr>
<th>cell</th>
<th>cell</th>
<th>cell</th>
<th>cell</th>
<th>cell</th>
<th>cell</th>
<th>cell</th>
</tr>
</thead>
<tfoot>
<tr>
<th>cell</th>
<th>cell</th>
<th>cell</th>
<th>cell</th>
<th>cell</th>
<th>cell</th>
<th>cell</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</tbody>
</table>

Виділимо шапку та підвал, використовуючи стиль для кольору тексту:

thead{
color: #ffff00;
}
tfoot{
color: #ffffff;
}
Ми встановили жовтий колір тексту для «шапки» таблиці та білий колір тексту
для «підвалу» таблиці.

You might also like