Пошук уроків, статей та іншого контенту
Побудуєте таблиці з рядками, комірками, заголовками, об’єднанням комірок і підписом таблиці.
HTML-таблиця призначена для відображення даних, які логічно організовані в рядки та стовпці. Не використовуйте таблиці для побудови загального макета сторінки — для цього призначені CSS Grid і Flexbox.
Базова структура таблиці складається з:
<table> — контейнер таблиці;
<tr> — рядок таблиці;
<th> — заголовкова комірка;
<td> — звичайна комірка;
<caption> — підпис таблиці.
<table>
<tr>
<th>Назва</th>
<th>Ціна</th>
</tr>
<tr>
<td>Книга</td>
<td>250 грн</td>
</tr>
</table>У цьому прикладі таблиця має два рядки:
рядок із заголовками;
рядок із даними.
Кожен <tr> містить комірки <th> або <td>.
Елемент <th> позначає заголовкову комірку. За замовчуванням браузер відображає її жирним шрифтом і вирівнює текст по центру.
<table>
<tr>
<th>Товар</th>
<th>Кількість</th>
<th>Вартість</th>
</tr>
<tr>
<td>Ноутбук</td>
<td>1</td>
<td>35 000 грн</td>
</tr>
</table>Заголовок комірки описує дані в певному стовпці або рядку. Це важливо не лише для візуального сприйняття, а й для доступності: допоміжні технології можуть використовувати заголовки, щоб пояснити призначення значень у таблиці.
scopeАтрибут scope уточнює, до яких комірок належить заголовок:
scope="col" — заголовок стовпця;
scope="row" — заголовок рядка.
<table>
<tr>
<th scope="col">Місяць</th>
<th scope="col">Продажі</th>
<th scope="col">Прибуток</th>
</tr>
<tr>
<th scope="row">Січень</th>
<td>120</td>
<td>48 000 грн</td>
</tr>
<tr>
<th scope="row">Лютий</th>
<td>150</td>
<td>60 000 грн</td>
</tr>
</table>У першому рядку заголовки описують стовпці, а в наступних рядках заголовки описують конкретні місяці.
Елемент <caption> додає назву або короткий опис таблиці. Він має бути безпосередньо всередині <table> і зазвичай розташовується перед іншими елементами таблиці.
<table>
<caption>Продажі за перший квартал</caption>
<tr>
<th scope="col">Місяць</th>
<th scope="col">Кількість замовлень</th>
</tr>
<tr>
<td>Січень</td>
<td>120</td>
</tr>
<tr>
<td>Лютий</td>
<td>150</td>
</tr>
</table><caption> відрізняється від заголовка <th>:
<caption> описує всю таблицю;
<th> описує окремий рядок або стовпець.
Підпис особливо корисний для користувачів, які переглядають сторінку за допомогою програм читання з екрана.
Для складніших таблиць рядки можна розділити на три логічні частини:
<thead> — заголовок таблиці;
<tbody> — основні дані;
<tfoot> — підсумок таблиці.
<table>
<caption>Витрати команди</caption>
<thead>
<tr>
<th scope="col">Категорія</th>
<th scope="col">Сума</th>
</tr>
</thead>
<tbody>
<tr>
<td>Обладнання</td>
<td>25 000 грн</td>
</tr>
<tr>
<td>Програмне забезпечення</td>
<td>12 000 грн</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Разом</th>
<td>37 000 грн</td>
</tr>
</tfoot>
</table>Ці елементи не створюють нових рядків. Вони групують уже наявні <tr> і роблять структуру таблиці зрозумілішою.
Порядок у HTML зазвичай такий:
<table>
<caption>...</caption>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>Браузер може візуально розташувати <tfoot> унизу таблиці навіть тоді, коли цей елемент записаний у коді перед <tbody>.
Іноді одна комірка має займати простір кількох стовпців або рядків. Для цього використовують атрибути:
colspan — об’єднання комірок по горизонталі;
rowspan — об’єднання комірок по вертикалі.
colspanЗначення colspan визначає, скільки стовпців повинна займати комірка.
<table>
<tr>
<th colspan="3">Інформація про замовлення</th>
</tr>
<tr>
<th>Товар</th>
<th>Кількість</th>
<th>Ціна</th>
</tr>
<tr>
<td>Монітор</td>
<td>2</td>
<td>18 000 грн</td>
</tr>
</table>У першому рядку <th colspan="3"> займає місце трьох звичайних комірок.
Якщо таблиця має три стовпці, то після об’єднаної комірки не потрібно додавати ще дві порожні комірки. Об’єднана комірка вже займає їхній простір.
rowspanЗначення rowspan визначає, скільки рядків повинна займати комірка.
<table>
<tr>
<th>День</th>
<th>Заняття</th>
<th>Час</th>
</tr>
<tr>
<th rowspan="2">Понеділок</th>
<td>HTML</td>
<td>10:00</td>
</tr>
<tr>
<td>CSS</td>
<td>12:00</td>
</tr>
</table>Комірка Понеділок займає два рядки. Тому в другому рядку немає ще однієї комірки для дня.
colspan і rowspanОбидва атрибути можна використовувати в одній таблиці.
<table>
<caption>Розклад конференції</caption>
<thead>
<tr>
<th scope="col">Час</th>
<th scope="col">Зала A</th>
<th scope="col">Зала B</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">10:00</th>
<td rowspan="2">Основна доповідь</td>
<td>Практичний воркшоп</td>
</tr>
<tr>
<th scope="row">11:00</th>
<td>Перерва</td>
</tr>
<tr>
<th scope="row">12:00</th>
<td colspan="2">Обід</td>
</tr>
</tbody>
</table>У цій таблиці:
«Основна доповідь» займає два рядки в залі A;
«Обід» займає два стовпці;
кількість комірок у кожному рядку змінюється через об’єднання.
Під час використання rowspan і colspan потрібно уважно стежити за структурою. У кожному рядку комірки разом мають утворювати однакову ширину таблиці.
Без стилів таблиця має базове браузерне оформлення. Для зручного читання зазвичай додають межі, внутрішні відступи та вирівнювання.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Таблиця замовлень</title>
<style>
table {
width: 100%;
max-width: 700px;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
caption {
margin-bottom: 12px;
font-size: 1.25rem;
font-weight: 700;
text-align: left;
}
th,
td {
padding: 10px 12px;
border: 1px solid #cbd5e1;
text-align: left;
}
thead {
background-color: #e2e8f0;
}
tbody tr:nth-child(even) {
background-color: #f8fafc;
}
tfoot {
background-color: #dbeafe;
font-weight: 700;
}
</style>
</head>
<body>
<table>
<caption>Замовлення за березень</caption>
<thead>
<tr>
<th scope="col">Товар</th>
<th scope="col">Кількість</th>
<th scope="col">Ціна</th>
</tr>
</thead>
<tbody>
<tr>
<td>Клавіатура</td>
<td>2</td>
<td>2 400 грн</td>
</tr>
<tr>
<td>Миша</td>
<td>3</td>
<td>1 800 грн</td>
</tr>
<tr>
<td colspan="2">Разом</td>
<td>4 200 грн</td>
</tr>
</tbody>
</table>
</body>
</html>border-collapseВластивість border-collapse: collapse об’єднує межі сусідніх комірок в одну лінію.
table {
border-collapse: collapse;
}Без цієї властивості межі комірок можуть відображатися як подвійні або мати проміжки.
Властивість padding додає простір між текстом і межами комірки:
th,
td {
padding: 10px 12px;
}Внутрішні відступи покращують читабельність таблиці, особливо коли комірки містять багато тексту.
Псевдоклас :nth-child(even) дає змогу оформити парні рядки і створити ефект «зебри»:
tbody tr:nth-child(even) {
background-color: #f8fafc;
}Це лише візуальне оформлення, яке допомагає не втрачати потрібний рядок у широкій таблиці.
За замовчуванням текст у комірках вирівнюється по лівому краю, а числові значення часто зручніше вирівнювати по правому.
td.number {
text-align: right;
}<td class="number">35 000 грн</td>Не потрібно вирівнювати дані за допомогою пробілів. Пробіли не забезпечують стабільне вирівнювання в різних шрифтах і на різних екранах. Для цього використовуйте CSS.
<td> замість <th>Неправильно:
<tr>
<td>Назва</td>
<td>Ціна</td>
</tr>Якщо рядок містить заголовки стовпців, використовуйте <th>:
<tr>
<th scope="col">Назва</th>
<th scope="col">Ціна</th>
</tr><tr>Комірки не можна розміщувати безпосередньо всередині <table>:
<table>
<td>Текст</td>
</table>Кожна комірка повинна бути частиною рядка:
<table>
<tr>
<td>Текст</td>
</tr>
</table>Якщо комірка має colspan="2", вона вже займає два стовпці:
<tr>
<td colspan="2">Об'єднана комірка</td>
<td>Третій стовпець</td>
</tr>Не додавайте зайві порожні комірки, щоб «заповнити» об’єднаний простір.
colspanНеправильно створювати заголовок, додаючи порожні комірки:
<tr>
<th>Інформація</th>
<th></th>
<th></th>
</tr>Краще об’єднати необхідні стовпці:
<tr>
<th colspan="3">Інформація</th>
</tr>Таблиця підходить для даних, які мають рядки та стовпці:
прайс-листів;
розкладів;
статистики;
списків замовлень;
порівняння характеристик.
Для розміщення блоків сторінки використовуйте CSS, а не <table>.
Створіть таблицю розкладу на один день.
Вона повинна містити:
підпис таблиці через <caption>;
заголовки стовпців через <th>;
щонайменше чотири рядки занять;
час, назву заняття та аудиторію;
об’єднану комірку для перерви за допомогою colspan;
окремий заголовок рядка з scope="row";
стилі для меж, відступів і заголовка таблиці.
<table> створює таблицю.
<tr> створює рядок.
<th> позначає заголовкову комірку.
<td> містить звичайні дані.
<caption> задає підпис усієї таблиці.
<thead>, <tbody> і <tfoot> групують рядки за призначенням.
scope="col" позначає заголовок стовпця, а scope="row" — заголовок рядка.
colspan об’єднує комірки по горизонталі.
rowspan об’єднує комірки по вертикалі.
CSS використовують для меж, відступів, кольорів і вирівнювання таблиці.
Таблиці призначені для табличних даних, а не для побудови макета сторінки.