Таблиці і Дані

З поверненням.

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

Тепер ми заходимо у світ таблиць.

Таблиці корисні.

Таблиці потужні.

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

Тому сьогодні вчимося правильному способу.

Таблиці — для даних.

Не для layout.

Не для вирівнювання кнопок.

Не для побудови цілого сайту так, ніби зараз 1999 рік і інтернет ще пахне dial-up модемом.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

• для чого потрібні HTML-таблиці;
• як використовувати table;
• як створювати рядки за допомогою tr;
• як створювати заголовкові комірки за допомогою th;
• як створювати комірки даних за допомогою td;
• як додати caption;
• як використовувати thead, tbody і tfoot;
• чому таблиці не треба використовувати для layout сторінки;
• як робити таблиці зрозумілішими і змістовнішими.

Що Таке Таблиця?

Таблиця використовується для показу структурованих даних.

Наприклад:

• ціни;
• розклади;
• статистика;
• порівняльні дані;
• рахунки;
• списки продуктів;
• плани уроків;
• результати.

Таблиця має рядки і колонки.

Як spreadsheet.

Але в HTML.

І без страшних формул, які ховаються в комірці F37.

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

Ось проста таблиця:

<table>
  <tr>
    <th>Ім’я</th>
    <th>Роль</th>
  </tr>
  <tr>
    <td>Viktor</td>
    <td>Web Developer</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Designer</td>
  </tr>
</table>

Це створює таблицю з:

• одним заголовковим рядком;
• двома рядками даних;
• двома колонками.

Браузер розуміє це як структуровані дані.

А не випадковий текст, який прикидається організованим.

Елемент table

Уся таблиця починається з:

<table>

І закінчується на:

</table>

Усе всередині таблиці належить таблиці.

Рядки.

Заголовки.

Комірки.

Caption.

Таблиця — це контейнер.

Велика коробка.

Валіза для даних.

Рядки Таблиці з tr

Кожен рядок створюється за допомогою tr.

Приклад:

<tr>
  <td>HTML</td>
  <td>Beginner</td>
</tr>

tr означає table row.

Рядок іде горизонтально.

Так:

HTML | Beginner

Таблиця будується рядок за рядком.

Не колонка за колонкою.

Спочатку це здається дивним.

Потім мозок це приймає.

Колись.

Заголовкові Комірки з th

Заголовкові комірки використовують th.

Приклад:

<th>Курс</th>
<th>Рівень</th>

Заголовкові комірки описують, що означають дані.

Приклад:

<tr>
  <th>Курс</th>
  <th>Рівень</th>
</tr>

Це каже браузеру:

Ці комірки є заголовками для даних у таблиці.

Браузери зазвичай показують текст th жирним і по центру.

Але знову: значення важливіше за стиль.

HTML — це не просто декорація.

HTML — це значення в кутових дужках.

Комірки Даних з td

Звичайні комірки таблиці використовують td.

Приклад:

<td>HTML</td>
<td>Beginner</td>

td означає table data.

Рядок з даними виглядає так:

<tr>
  <td>HTML</td>
  <td>Beginner</td>
</tr>

Використовуй td для реальних даних.

Використовуй th для заголовків.

Не змішуй їх випадково, як шкарпетки після прання.

Додавання Caption

Таблиця може мати caption.

Приклад:

<table>
  <caption>Рівні Курсів</caption>
  <tr>
    <th>Курс</th>
    <th>Рівень</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>
</table>

caption описує таблицю.

Його треба ставити одразу після відкриваючого тегу table.

Хороший caption допомагає користувачам зрозуміти, про що таблиця.

Це дуже корисно для доступності.

І також для людей, які не люблять ігри у вгадайку.

Краща Структура Таблиці

Для більших таблиць HTML дає нам:

• thead;
• tbody;
• tfoot.

Приклад:

<table>
  <caption>Місячні Витрати</caption>

  <thead>
    <tr>
      <th>Позиція</th>
      <th>Вартість</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Hosting</td>
      <td>€10</td>
    </tr>
    <tr>
      <td>Domain</td>
      <td>€12</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Разом</th>
      <td>€22</td>
    </tr>
  </tfoot>
</table>

Ця структура робить таблицю зрозумілішою.

Таблиця має:

• область заголовка;
• основну область;
• фінальну область.

Дуже організовано.

Майже підозріло організовано.

thead

Елемент thead містить заголовкову секцію таблиці.

Приклад:

<thead>
  <tr>
    <th>Продукт</th>
    <th>Ціна</th>
  </tr>
</thead>

Тут зазвичай розміщуються заголовки колонок.

Це допомагає браузерам, screen readers і розробникам зрозуміти структуру таблиці.

Також це допомагає майбутньому тобі.

Майбутній ти цінує чистий код.

Майбутній ти втомлений.

tbody

Елемент tbody містить основні дані таблиці.

Приклад:

<tbody>
  <tr>
    <td>Laptop</td>
    <td>€800</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>€20</td>
  </tr>
</tbody>

Тут зазвичай живе більшість рядків.

Якщо таблиця — це сендвіч, то tbody — начинка.

Корисна частина.

Причина, чому ми тут.

tfoot

Елемент tfoot містить фінальну інформацію.

Приклад:

<tfoot>
  <tr>
    <th>Разом</th>
    <td>€820</td>
  </tr>
</tfoot>

Використовуй його для сум, підсумків або фінальної інформації таблиці.

Не кожній таблиці потрібен tfoot.

Використовуй його, коли це допомагає.

Не додавай теги тільки тому, що вони виглядають професійно.

Так сайти перетворюються на суп.

Створи Сторінку для Практики

Створи новий файл:

touch tables.html

Додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика Таблиць</title>
</head>
<body>
  <h1>Практика Таблиць</h1>

  <p>Ця сторінка показує просту таблицю з інформацією про курс.</p>

  <table>
    <caption>План Курсу</caption>

    <thead>
      <tr>
        <th>Урок</th>
        <th>Тема</th>
        <th>Статус</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>Перші Кроки</td>
        <td>Готово</td>
      </tr>
      <tr>
        <td>2</td>
        <td>HTML-Структура</td>
        <td>Готово</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Текст і Заголовки</td>
        <td>Готово</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Відкрий її в браузері.

Вона виглядатиме просто.

Це нормально.

HTML створює структуру.

CSS зробить її красивою пізніше.

Поки що таблиця жива.

Проста, але жива.

Не Використовуй Таблиці для Layout

Це важливо.

Таблиці не треба використовувати для побудови layout сторінки.

Погана ідея:

<table>
  <tr>
    <td>Sidebar</td>
    <td>Main Content</td>
  </tr>
</table>

Колись це було популярно.

Але сьогодні для layout ми використовуємо CSS.

Таблиці — для даних.

CSS — для layout.

Не змушуй таблиці переносити меблі.

Вони не вантажівки для переїзду.

Коли Використовувати Таблицю

Використовуй таблицю, коли контент має чіткі рядки і колонки.

Хороше використання таблиці:

Продукт | Ціна | Кількість
Laptop  | €800 | 1
Mouse   | €20  | 2

Погане використання таблиці:

Header | Main area | Footer

Це layout.

Пізніше використовуй CSS.

Тут будь строгий.

Майбутні проєкти подякують тобі.

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

Таблиці мають бути зрозумілими для всіх.

Використовуй:

• змістовні заголовки;
• caption;
• просту структуру;
• логічну організацію рядків і колонок.

Приклад:

<table>
  <caption>Тижневий Розклад Тренувань</caption>
  <thead>
    <tr>
      <th>День</th>
      <th>Активність</th>
      <th>Час</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Понеділок</td>
      <td>Карате</td>
      <td>19:00</td>
    </tr>
    <tr>
      <td>Середа</td>
      <td>Йога</td>
      <td>18:30</td>
    </tr>
  </tbody>
</table>

Це читабельно.

Це має значення.

Це не змушує браузер тихо плакати.

Типові Помилки

Забути tr

Неправильно:

<table>
  <td>HTML</td>
  <td>Beginner</td>
</table>

Правильно:

<table>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>
</table>

Комірки мають бути всередині рядків.

Рядки мають бути всередині таблиці.

Ієрархія важлива.

HTML — це не купа білизни.

Використовувати td для Заголовків

Не ідеально:

<tr>
  <td>Ім’я</td>
  <td>Email</td>
</tr>

Краще:

<tr>
  <th>Ім’я</th>
  <th>Email</th>
</tr>

Якщо це заголовок, використовуй th.

Забагато Даних

Гігантську таблицю може бути важко читати.

Не створюй таблицю з 40 колонками, а потім не дивуйся, що користувачі страждають.

Якщо таблиця стає надто великою, подумай про її поділ.

Або про іншу організацію даних.

Іноді найкраща таблиця — це менша таблиця.

Як піца.

Менші шматки легше пережити.

Практика

Створи сторінку:

schedule.html

Побудуй таблицю для тижневого розкладу.

Вона має містити:

• один h1;
• один вступний абзац;
• одну таблицю;
• один caption;
• thead;
• tbody;
• мінімум п’ять рядків;
• колонки для дня, активності і часу.

Без CSS.

Без JavaScript.

Тільки HTML-структура таблиці.

Міні-Завдання

Створи файл:

price-list.html

Побудуй таблицю цін.

Вона має містити:

• title сторінки;
• головний заголовок;
• короткий абзац;
• caption таблиці;
• колонки для послуги, опису і ціни;
• мінімум чотири послуги;
• фінальний рядок з нотаткою або сумою.

Приклади послуг:

• landing page;
• portfolio website;
• business website;
• website maintenance.

Тримай усе чисто.

Без layout-трюків.

Таблиці — для даних.

Ми уважно за ними дивимось.

Підсумок

Сьогодні ти дізнався, що:

• таблиці потрібні для структурованих даних;
• table створює таблицю;
• tr створює рядок таблиці;
• th створює заголовкову комірку;
• td створює комірку даних;
• caption описує таблицю;
• thead групує заголовкові рядки;
• tbody групує основні рядки даних;
• tfoot групує фінальні рядки;
• таблиці не треба використовувати для layout;
• хороші таблиці зрозумілі, змістовні і доступні.

Таблиці корисні, якщо їх використовувати правильно.

Але якщо ти використовуєш їх для layout, десь frontend developer розливає каву.

Наступний Урок

У наступному уроці ми вивчимо форми.

Форми — це момент, коли користувачі нарешті відповідають сайту.

Це потужно.

І це також місце, куди хаос любить заходити в сонцезахисних окулярах.