Створення та Структурування Таблиць у HTML
Таблиці корисні для представлення складних взаємозв'язків шляхом організації контенту у комірки. Вони особливо ефективні для відображення табличних даних, таких як розклади транспорту, календарі, нарахування заробітної плати, результати матчів, фінансові транзакції, меню ресторанів, прайс-листи та інша інформація, яка природно вписується у табличний формат, подібно до Google Sheets.
Для створення таблиць у HTML використовуйте наступні основні елементи:
<table>: визначає таблицю на веб-сторінці;<tr>: визначає рядок у таблиці;<th>: визначає заголовкову комірку у рядку. Заголовкові комірки зазвичай виділені жирним і вирівняні по центру;<td>: визначає стандартну комірку з даними у рядку.
Розглянемо кроки створення таблиці для меню:
Крок 1: Створення HTML-структури
Почніть зі створення базової HTML-структури для вашої сторінки:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Крок 2: Визначення таблиці
Усередині елемента <body> додайте тег <table>, щоб визначити таблицю:
<table>
<!-- Table content will go here -->
</table>
Крок 3: Додавання підпису до таблиці (необов'язково)
Якщо потрібно додати заголовок до таблиці, використовуйте тег <caption>:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Крок 4: Створення заголовків таблиці
Далі додайте заголовки таблиці всередині елемента <thead>. Кожен заголовок визначається за допомогою тега <th>:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
Крок 5: Заповнення таблиці даними
Використовуйте елемент <tbody>, щоб охопити рядки таблиці, і теги <td>, щоб визначити комірки з даними:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Appetizer</td>
<td>Garlic Shrimps</td>
<td>8$</td>
</tr>
<tr>
<td>Pasta</td>
<td>Lobster Linguine Noodles</td>
<td>16$</td>
</tr>
<tr>
<td>Sandwich</td>
<td>Lobster Tail Sandwich</td>
<td>11$</td>
</tr>
</tbody>
</table>
Повний код
Будь ласка, приділіть час уважному перегляду всіх елементів, щоб переконатися, що їх взаємозв’язок є зрозумілим.
index.html
index.css
Примітка
За замовчуванням HTML-таблиці не мають певного візуального стилю. Щоб налаштувати вигляд таблиці, додайте CSS-стилі у окремий CSS-файл або у тег
<style>у секції<head>HTML-файлу.Однак наразі немає потреби вивчати CSS, оскільки основна увага приділяється лише HTML.
Якщо бажаєте побачити, як виглядає таблиця без будь-якого CSS-оформлення, видаліть рядок 4:
<link rel="stylesheet" href="index.css" />, який імпортує CSS-стилі.Якщо бажаєте дізнатися більше про CSS, розгляньте можливість пройти курс Основи CSS.
1. Який елемент HTML використовується для визначення таблиці на веб-сторінці?
2. Який елемент HTML використовується для визначення рядка в таблиці?
3. Яке призначення елемента <th> у таблиці HTML?
Дякуємо за ваш відгук!
