Вивчай

Таблиці

HTML таблиці — дерев'яний органайзер з відсіками для сортованих дрібниць як структуровані даніHTML таблиці — дерев'яний органайзер з відсіками для сортованих дрібниць як структуровані дані

У попередньому уроці ми навчилися створювати посилання та додавати зображення. Тепер вивчимо таблиці — інструмент для структурування даних у рядках та стовпцях.

Коли використовувати таблиці?

Використовуй для табличних даних — будь-яка інформація, яку логічно організувати в рядки та стовпці:

  • Розклад уроків
  • Порівняння цін
  • Таблиця оцінок
  • Статистика

Не використовуй для розмітки сторінки (створення колонок, шапки сайту тощо) — для цього є CSS Grid та Flexbox.

Інфо

У 1990-х та 2000-х таблиці масово використовували для розмітки сторінок — бо CSS ще не вмів робити колонки. Цей підхід називають "table layout hell" — він ускладнював код і ламав доступність. Сьогодні це антипатерн.

Базова таблиця

<table>
  <tr>
    <th>Ім'я</th>
    <th>Оцінка</th>
  </tr>
  <tr>
    <td>Олена</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Максим</td>
    <td>10</td>
  </tr>
</table>
ТегЩо робить
<table>Контейнер таблиці
<tr>Table Row — рядок
<td>Table Data — комірка з даними
<th>Table Header — комірка-заголовок (жирний текст, вирівняний по центру)

Структура: thead, tbody, tfoot

Для великих таблиць корисно розділити їх на логічні секції:

<table>
  <caption>Оцінки за семестр</caption>

  <thead>
    <tr>
      <th>Предмет</th>
      <th>1 семестр</th>
      <th>2 семестр</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Математика</td>
      <td>10</td>
      <td>11</td>
    </tr>
    <tr>
      <td>Фізика</td>
      <td>9</td>
      <td>10</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Середня</td>
      <td>9.5</td>
      <td>10.5</td>
    </tr>
  </tfoot>
</table>
ТегПризначення
<caption>Заголовок таблиці (для доступності)
<thead>Шапка — рядки з заголовками стовпців
<tbody>Тіло — основні дані
<tfoot>Підсумок — підсумкові рядки (суми, середні)
Порада

<caption> — це як alt для зображень. Він допомагає скрін-рідерам зрозуміти про що таблиця, ще до зачитування даних.

Об'єднання комірок: colspan та rowspan

colspan — об'єднання по горизонталі

"Розтягни цю комірку на N стовпців":

<table>
  <tr>
    <th colspan="3">Розклад на понеділок</th>
  </tr>
  <tr>
    <th>Час</th>
    <th>Предмет</th>
    <th>Кабінет</th>
  </tr>
  <tr>
    <td>8:30</td>
    <td>Математика</td>
    <td>301</td>
  </tr>
</table>

rowspan — об'єднання по вертикалі

"Розтягни цю комірку на N рядків":

<table>
  <tr>
    <th>День</th>
    <th>Час</th>
    <th>Предмет</th>
  </tr>
  <tr>
    <td rowspan="2">Понеділок</td>
    <td>8:30</td>
    <td>Математика</td>
  </tr>
  <tr>
    <!-- "Понеділок" вже займає цей рядок -->
    <td>10:15</td>
    <td>Фізика</td>
  </tr>
</table>
Увага

Коли використовуєш rowspan або colspan, не забудь прибрати зайві <td> з рядків, які перекриваються. Інакше таблиця "поїде".

Доступність таблиць

Щоб таблиця була зрозумілою для скрін-рідерів, використовуй атрибут scope:

<thead>
  <tr>
    <th scope="col">Ім'я</th>
    <th scope="col">Вік</th>
    <th scope="col">Місто</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Олена</th>
    <td>16</td>
    <td>Київ</td>
  </tr>
</tbody>
  • scope="col" — "я заголовок стовпця"
  • scope="row" — "я заголовок рядка"

Практика: розклад занять

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Розклад</title>
</head>
<body>
  <h1>Мій розклад</h1>

  <table>
    <caption>Розклад занять на тиждень</caption>
    <thead>
      <tr>
        <th scope="col">Час</th>
        <th scope="col">Понеділок</th>
        <th scope="col">Вівторок</th>
        <th scope="col">Середа</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">8:30</th>
        <td>Математика</td>
        <td>Фізика</td>
        <td>Хімія</td>
      </tr>
      <tr>
        <th scope="row">10:15</th>
        <td>Англійська</td>
        <td colspan="2">Фізкультура (подвійний урок)</td>
      </tr>
      <tr>
        <th scope="row">12:00</th>
        <td>Інформатика</td>
        <td>Історія</td>
        <td>Біологія</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Підсумок

  • <table> — контейнер, <tr> — рядок, <td> — комірка, <th> — заголовок
  • <thead>/<tbody>/<tfoot> — логічні секції таблиці
  • <caption> — заголовок таблиці для доступності
  • colspan — об'єднання комірок по горизонталі
  • rowspan — об'єднання комірок по вертикалі
  • scope — допомагає скрін-рідерам зрозуміти зв'язки між заголовками та даними
  • Таблиці — тільки для даних, не для розмітки сторінки

Що далі?

У наступному уроці вивчимо форми та елементи введення — як збирати інформацію від користувачів.

Інфо

Корисні посилання: