Тег <table>

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

Тег <table> є контейнером для таблиці, яка складається з кількох важливих елементів:

• <tr> — визначає рядок таблиці (row).
• <td> — визначає клітинку таблиці (data).
• <th> — використовується для заголовка клітинки (header).
• <thead>, <tbody>, <tfoot> — визначають різні частини таблиці, що містять заголовки, основний вміст та футер відповідно.

Таблиці дозволяють організовувати інформацію, щоб користувачі могли швидко зрозуміти та порівняти дані.

Атрибути

Специфічні атрибути

У тега <table> є кілька застарілих атрибутів для стилізації (border, cellspacing тощо), які краще не використовувати, а замість цього стилізувати через CSS.

Глобальні атрибути

Тег <table> підтримує всі глобальні атрибути HTML:

• id — унікальний ідентифікатор елемента. Наприклад:

<table id="data-table">

• class — клас, який допомагає застосувати стилі CSS або групувати елементи. Наприклад:

<table class="responsive-table">

• style — інлайн-стилізація таблиці. Наприклад:

<table style="width:100%">

• lang — вказує мову вмісту таблиці. Наприклад:

<table lang="en">

• title — додатковий опис таблиці, який може бути корисний для доступності. Наприклад:

<table title="Таблиця продажів 2024">

Приклад використання

<table>
  <thead>
    <tr>
      <th>Назва</th>
      <th>Ціна</th>
      <th>Кількість</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Товар 1</td>
      <td>$10</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Товар 2</td>
      <td>$15</td>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Всього</td>
    </tr>
  </tfoot>
</table>

У цьому прикладі створюється таблиця з трьома стовпцями: Назва, Ціна і Кількість. В кінці таблиці розташовано футер, де вказано підсумок.

Додаткові моменти

• Тег <table> є блочним елементом, тому займає всю доступну ширину контейнера. Можна застосувати стилі для керування шириною та висотою таблиці, відступами, кольорами та іншими властивостями.
• Для надання таблиці привабливого вигляду та зручності використовуйте CSS для налаштування меж, кольорів, відступів, шрифтів і багато іншого, замість того, щоб використовувати старі атрибути на зразок border, cellspacing та cellpadding.
• За допомогою тегів <thead>, <tbody> та <tfoot> можна організувати таблицю на логічні частини, що особливо корисно для великих таблиць, допомагає поліпшити доступність та зручність для користувачів.
• Таблиці можуть бути складними з точки зору структури, тому слід забезпечити чітке оформлення даних для кращого сприйняття, використовуючи візуальні ефекти (CSS) та доступність (ARIA).