Модуль 2 · Урок 7
Семантичні таблиці даних
Table потрібна, коли values читаються через relationships рядків і колонок. Visual grid без header associations не пояснює ці relationships programmatically, а table для layout спотворює meaning.
Data gridCaptionth + tdscope
Спочатку model, потім markup
- Назвіть grain: що означає один data row.
- Визначте column headers і, за потреби, row headers.
- Перевірте rectangular grid і spans.
- Додайте короткий
caption, що описує topic/purpose. - Лише після цього пишіть
table/tr/th/td.
Проста таблиця з associations
<table>
<caption>План практики на тиждень</caption>
<thead>
<tr><th scope="col">День</th><th scope="col">Тема</th></tr>
</thead>
<tbody>
<tr><th scope="row">Понеділок</th><td>Структура</td></tr>
</tbody>
</table>th позначає header cell, td — data cell. scope="col" і scope="row" роблять напрям association явним для простої таблиці.
Структура й складність
| Mechanism | Навіщо | Межа |
|---|---|---|
thead/tbody/tfoot | Явні row groups і зручне styling/printing | Самі по собі не замінюють headers |
caption | Видима назва/purpose table | Не містить всю інструкцію complex table |
scope | Simple row/column/group association | Не завжди достатньо для irregular multi-level headers |
id/headers | Explicit complex associations | Потребує унікальних IDs і careful review |
Не використовуйте table для layout
Розташування hero, cards або columns є presentation-задачею майбутніх CSS modules. Table markup заявляє data relationships.
Практика
- Заповніть
table-header-map.csv. - Перетворіть перший row starter table на column headers, а weekday cells — на row headers.
- Додайте caption і явні row groups.
- Прочитайте кожну data cell разом із пов’язаними headers і перевірте HTML validator.
Офіційні джерела
Практична перевірка · урок 7 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.