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

Таблиці

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

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

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

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

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

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

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

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

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

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

Тіло таблиці

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

Підсумок

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

1. Таблиця

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

<table></table>

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

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

9
1
2
3
<table>
  <thead></thead>
</table>

3. Тіло таблиці

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

9
1
2
3
4
<table>
  <thead></thead>
  <tbody></tbody>
</table>

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

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

9
1
2
3
4
5
6
7
8
9
<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

5. Клітинки таблиці

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

99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

Відео-урок