Таблиці в HTML

1. Елемент <table>

HTML надає зручний спосіб представлення даних у структурованому вигляді за допомогою таблиць. Таблиці допомагають організувати інформацію в ряд строк і стовпців, що робить їх зручними для представлення числових даних, розкладів, прайс-листів і інших структурованих наборів даних. Розглянемо, як використовуються основні теги для створення таблиць: <table>, <tr>, <td> і <th>.

Тег <table> слугує контейнером для всієї таблиці. Він використовується для позначення початку і кінця таблиці і містить всі інші теги, пов'язані з таблицею.

Приклад створення таблиці з тегом <table>:

<table>
  <!-- Тут знаходяться рядки і клітинки таблиці -->
</table>

Тег <table> можна додатково стилізувати за допомогою атрибута border, щоб задати рамку таблиці:

<table border="1">
  <tr>
    <td>Приклад клітинки</td>
  </tr>
</table>

Тут атрибут border="1" додає рамку навколо таблиці і її клітинок, роблячи їх видимими.

2. Елемент <tr>

Тег <tr> позначає строку таблиці (table row). Кожна строка таблиці повинна знаходитися всередині тега <tr>, який, у свою чергу, розміщується всередині <table>.

Приклад:

<table border="1">
  <tr>
    <td>Клітинка 1</td>
    <td>Клітинка 2</td>
  </tr>
  <tr>
    <td>Клітинка 3</td>
    <td>Клітинка 4</td>
  </tr>
</table>

В цьому прикладі таблиця складається з двох строк. Кожна строка містить дві клітинки.

3. Елемент <td>

Тег <td> (table data) використовується для створення клітинок з даними в таблиці. Він позначає звичайну клітинку таблиці, в якій може знаходитися текст, зображення або інший HTML-контент.

Приклад використання <td>:

<table border="1">
  <tr>
    <td>Клітинка 1</td>
    <td>Клітинка 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Клітинка 1</td>
    <td>Клітинка 2</td>
  </tr>
</table>

Клітинки <td> створюють основне наповнення таблиці і розташовуються всередині строк <tr>.

4. Елемент <th>

Тег <th> (table header) використовується для створення заголовків таблиці. Клітинки, створені за допомогою <th>, за замовчуванням виділяються жирним шрифтом і вирівнюються по центру. Це зручно для позначення заголовків стовпців або строк.

Приклад таблиці з заголовками:

    
<table border="1">
  <tr>
    <th>Ім'я</th>
    <th>Вік</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Іван</td>
    <td>30</td>
  </tr>
</table>
    
  

    
<table border="1">
  <tr>
    <th>Ім'я</th>
    <th>Вік</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Іван</td>
    <td>30</td>
</tr>
</table>
    
  

В цьому прикладі <th> використовується для позначення заголовків «Ім'я» і «Вік», що дозволяє користувачам швидко зрозуміти, що означають дані в кожному стовпці.

5. Структурування таблиць

Під час створення складних таблиць, які містять заголовки, дані та нижні колонтитули, HTML дозволяє використовувати елементи <thead>, <tbody> і <tfoot>. Ці теги допомагають розділити таблицю на три логічні секції:

• <thead> (table head) — верхня частина таблиці, в якій зазвичай розміщуються заголовки стовпців.
• <tbody> (table body) — основний вміст таблиці.
• <tfoot> (table footer) — нижня частина таблиці, куди можна додати підсумкові значення або примітки.

Приклад таблиці, структурованої за допомогою цих тегів:

<table border="1">
  <thead>
    <tr>
      <th>Продукт</th> <th>Ціна</th> <th>Кількість</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Яблука</td> <td>50 грн.</td> <td>10</td>
    </tr>
    <tr>
      <td>Банани</td> <td>30 грн.</td> <td>20</td>
    </tr>
    <tr>
      <td>Виноград</td> <td>70 грн.</td> <td>5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Усього</td> <td>35</td>
    </tr>
  </tfoot>
</table>

<table border="1">
<thead>
<tr>
  <th>Продукт</th> <th>Ціна</th> <th>Кількість</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Яблука</td> <td>50 грн.</td> <td>10</td>
</tr>
<tr>
  <td>Банани</td> <td>30 грн.</td> <td>20</td>
</tr>
<tr>
  <td>Виноград</td> <td>70 грн.</td> <td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
  <td colspan="2">Усього</td> <td>35</td>
</tr>
</tfoot>
</table>

У цьому прикладі:

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

Переваги використання <thead>,<tbody>, <tfoot>

Ці елементи допомагають:

1. Логічно розділити таблицю — роблячи структуру таблиці більш зрозумілою та читабельною.
2. Спрощувати стилізацію та керування даними за допомогою CSS і JavaScript.
3. Покращити доступність: деякі браузери та програми для читання екранного тексту можуть використовувати ці теги, щоб краще зрозуміти структуру таблиці.

6. Об'єднання клітинок таблиці

HTML дозволяє об'єднувати клітинки таблиці горизонтально та вертикально за допомогою атрибутів colspan та rowspan.

Об'єднання по горизонталі за допомогою colspan

Атрибут colspan об'єднує клітинки по горизонталі, вказуючи, на скільки стовпців клітинка має розтягнутися.

<table border="1">
  <tr>
    <th colspan="3">Заголовок на всю ширину таблиці</th>
  </tr>
  <tr>
    <td>Клітинка 1</td>
    <td>Клітинка 2</td>
    <td>Клітинка 3</td>
  </tr>
</table>

<table border="1">
  <tr>
    <th colspan="3">Заголовок на всю ширину таблиці</th>
  </tr>
  <tr>
    <td>Клітинка 1</td> <td>Клітинка 2</td> <td>Клітинка 3</td>
  </tr>
</table>

У цьому прикладі клітинка заголовка об'єднує три стовпці, створюючи єдиний заголовок для всієї таблиці.

Об'єднання по вертикалі за допомогою rowspan

Атрибут rowspan об'єднує клітинки по вертикалі, вказуючи, на скільки рядків клітинка має розтягнутися.

    
  <table border="1">
    <tr>
      <th rowspan="2">Категорія</th>
      <th>Продукт</th>
      <th>Ціна</th>
    </tr>
    <tr>
      <td>Яблука</td>
      <td>50 грн.</td>
    </tr>
  </table>
  

  
<table border="1">
  <tr>
    <th rowspan="2">Категорія</th> <th>Продукт</th> <th>Ціна</th>
  </tr>
  <tr>
      &lt-! - немає --> <td>Яблука</td> <td>50 грн.</td>
  </tr>
</table>

Тут клітинка з текстом «Категорія» об'єднує два рядки по вертикалі.

7. Повний приклад

Розглянемо таблицю з заголовком, тілом та нижнім колонтитулом, а також об'єднанням ячейок по вертикалі та горизонталі.

    
<table border="1">
  <thead>
    <tr>
      <th>Категорія</th>
      <th>Продукт</th>
      <th>Ціна</th>
      <th>Кількість</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Фрукти</td>
      <td>Яблука</td>
      <td>50 грн.</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Банани</td>
      <td>30 грн.</td>
      <td>20</td>
    </tr>
    <tr>
      <td colspan="3">Підсумок по фруктах</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Кінець таблиці</td>
    </tr>
  </tfoot>
</table>

  <table border="1">
    <thead>
      <tr>
        <th>Категорія</th>
        <th>Продукт</th>
        <th>Ціна</th>
        <th>Кількість</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Фрукти</td>
        <td>Яблука</td>
        <td>50 грн.</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Банани</td>
        <td>30 грн.</td>
        <td>20</td>
      </tr>
      <tr>
        <td colspan="3">Підсумок по фруктах</td>
        <td>30</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">Кінець таблиці</td>
      </tr>
    </tfoot>
  </table>
  

У цьому прикладі:

• Ячейка «Фрукти» об'єднана на два рядки за допомогою rowspan="2".
• Рядок «Підсумок по фруктах» об'єднує три стовпці по горизонталі за допомогою colspan="3".
• <thead> та <tfoot> створюють структуровані заголовок і підвал таблиці, допомагаючи легко орієнтуватися в таблиці.

Елементи <thead>, <tbody> та <tfoot> і атрибути colspan та rowspan допомагають створювати зручні і структуровані таблиці. Такі таблиці не тільки виглядають акуратно, але і мають покращену функціональність, що робить їх зручними для читання і взаємодії.