Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Створення та структурування HTML-таблиць | Таблиці та форми
Основи HTML

bookСтворення та структурування HTML-таблиць

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

Таблиці

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

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

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

index.html

index.html

copy

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

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

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

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

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

index.html

index.html

copy

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

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

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

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

index.html

index.html

copy

Підсумок

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

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>
index.html

index.html

copy

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

1. Який тег використовується для створення таблиці?

2. Який тег позначає рядок у таблиці?

3. Яке призначення тега <tbody>?

question mark

Який тег використовується для створення таблиці?

Select the correct answer

question mark

Який тег позначає рядок у таблиці?

Select the correct answer

question mark

Яке призначення тега <tbody>?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 1

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain the difference between <thead> and <tbody> in more detail?

How do I add more rows or columns to an HTML table?

What are some best practices for making tables accessible?

Awesome!

Completion rate improved to 3.13

bookСтворення та структурування HTML-таблиць

Свайпніть щоб показати меню

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

Таблиці

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

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

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

index.html

index.html

copy

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

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

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

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

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

index.html

index.html

copy

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

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

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

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

index.html

index.html

copy

Підсумок

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

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>
index.html

index.html

copy

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

1. Який тег використовується для створення таблиці?

2. Який тег позначає рядок у таблиці?

3. Яке призначення тега <tbody>?

question mark

Який тег використовується для створення таблиці?

Select the correct answer

question mark

Який тег позначає рядок у таблиці?

Select the correct answer

question mark

Яке призначення тега <tbody>?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 1
some-alt