Створення та структурування HTML-таблиць
Почнемо з обговорення таблиць. Зокрема, розглянемо таку організацію тексту:
Таблиці
Таблиці в HTML використовуються для відображення даних у рядках і стовпцях, забезпечуючи структурований спосіб організації інформації.
Створення таблиць
Тег <table>
використовується для створення таблиці в HTML. Таблиці складаються з рядків (<tr>
) і комірок (<td>
), які визначають структуру та вміст таблиці. Базова структура таблиці виглядатиме так.
Приклад:
index.html
У наведеному вище прикладі:
- Тег
<table>
використовується для створення таблиці; - Кожен тег
<tr>
представляє рядок у таблиці; - Усередині кожного рядка теги
<td>
представляють комірки, визначаючи вміст кожної комірки.
Хоча на цьому можна завершити роботу з таблицями, їхню семантику можна покращити, щоб пошукові системи легше розуміли їхній вміст.
Заголовки таблиці
Тег <th>
визначає заголовки таблиці, які представляють заголовки стовпців або рядків. Його слід використовувати у секції <thead>
таблиці.
Приклад:
index.html
У наведеному вище прикладі:
- Секція
<thead>
містить комірки заголовків таблиці, визначені за допомогою тегу<th>
; - Кожен тег
<th>
представляє комірку заголовка.
Основна частина таблиці
Секція tbody
повинна розташовуватися після секції thead
та охоплювати всі дані таблиці, окрім заголовків. Усі елементи всередині tbody
залишаються без змін.
Приклад:
index.html
Підсумок
Таблиці мають ієрархічну структуру елементів:
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
Відеоінструкція
1. Який тег використовується для створення таблиці?
2. Який тег позначає рядок у таблиці?
3. Яке призначення тега <tbody>
?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
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
Створення та структурування HTML-таблиць
Свайпніть щоб показати меню
Почнемо з обговорення таблиць. Зокрема, розглянемо таку організацію тексту:
Таблиці
Таблиці в HTML використовуються для відображення даних у рядках і стовпцях, забезпечуючи структурований спосіб організації інформації.
Створення таблиць
Тег <table>
використовується для створення таблиці в HTML. Таблиці складаються з рядків (<tr>
) і комірок (<td>
), які визначають структуру та вміст таблиці. Базова структура таблиці виглядатиме так.
Приклад:
index.html
У наведеному вище прикладі:
- Тег
<table>
використовується для створення таблиці; - Кожен тег
<tr>
представляє рядок у таблиці; - Усередині кожного рядка теги
<td>
представляють комірки, визначаючи вміст кожної комірки.
Хоча на цьому можна завершити роботу з таблицями, їхню семантику можна покращити, щоб пошукові системи легше розуміли їхній вміст.
Заголовки таблиці
Тег <th>
визначає заголовки таблиці, які представляють заголовки стовпців або рядків. Його слід використовувати у секції <thead>
таблиці.
Приклад:
index.html
У наведеному вище прикладі:
- Секція
<thead>
містить комірки заголовків таблиці, визначені за допомогою тегу<th>
; - Кожен тег
<th>
представляє комірку заголовка.
Основна частина таблиці
Секція tbody
повинна розташовуватися після секції thead
та охоплювати всі дані таблиці, окрім заголовків. Усі елементи всередині tbody
залишаються без змін.
Приклад:
index.html
Підсумок
Таблиці мають ієрархічну структуру елементів:
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
Відеоінструкція
1. Який тег використовується для створення таблиці?
2. Який тег позначає рядок у таблиці?
3. Яке призначення тега <tbody>
?
Дякуємо за ваш відгук!