Почнемо з обговорення таблиць. Зокрема, розглянемо таку організацію тексту:

Таблиці

Таблиці в HTML використовуються для відображення даних у рядках і стовпцях, забезпечуючи структурований спосіб організації інформації.

Створення таблиць

Тег <table> використовується для створення таблиці в HTML. Таблиці складаються з рядків (<tr>) і комірок (<td>), які визначають структуру та вміст таблиці. Базова структура таблиці виглядатиме так.
Приклад:

У наведеному вище прикладі:

• Тег <table> використовується для створення таблиці;
• Кожен тег <tr> представляє рядок у таблиці;
• Усередині кожного рядка теги <td> представляють комірки, визначаючи вміст кожної комірки.

Хоча на цьому можна завершити роботу з таблицями, їхню семантику можна покращити, щоб пошукові системи легше розуміли їхній вміст.

Заголовки таблиці

Тег <th> визначає заголовки таблиці, які представляють заголовки стовпців або рядків. Його слід використовувати у секції <thead> таблиці.
Приклад:

У наведеному вище прикладі:

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

Основна частина таблиці

Секція tbody повинна розташовуватися після секції thead та охоплювати всі дані таблиці, окрім заголовків. Усі елементи всередині tbody залишаються без змін.
Приклад:

Підсумок

Таблиці мають ієрархічну структуру елементів:

1. Table

The <table> tag is the parent element that defines the entire table. It contains all the rows and columns of the table.

<table></table>

2. Заголовок таблиці

Тег <thead> використовується для групування рядків заголовка таблиці. Містить один або декілька рядків (<tr>) із заголовковими комірками (<th>), які визначають назви стовпців.

<table>
  <thead></thead>
</table>

3. Основна частина таблиці

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

<table>
  <thead></thead>
  <tbody></tbody>
</table>

4. Рядки таблиці

Тег <tr> представляє рядок у таблиці. Містить одну або декілька комірок таблиці (<td> або <th>), які визначають вміст кожного стовпця в рядку.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

5. Комірки таблиці

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

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Відеоінструкція