Тег <table>: табличные данные
Как разметить строки, заголовки и подпись таблицы без использования таблиц для макета.
Зачем нужен этот элемент
table показывает данные, смысл которых зависит от пересечения строк и столбцов. Примеры — сравнение параметров или расписание. Для раскладки карточек и колонок страницы используйте CSS Grid или Flexbox, а не таблицу.
caption кратко объясняет, что сравнивается. Заголовочные ячейки th со scope связывают значения с колонками или строками. В больших таблицах thead и tbody отделяют шапку от основной части. На мобильном экране таблице можно дать горизонтальную прокрутку в отдельной обёртке.
Синтаксис и пример
<table>
<caption>Файлы учебного сайта</caption>
<thead><tr><th scope="col">Файл</th><th scope="col">Назначение</th></tr></thead>
<tbody>
<tr><td>index.html</td><td>Структура</td></tr>
<tr><td>style.css</td><td>Оформление</td></tr>
</tbody>
</table>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| tr | Строка таблицы. |
| th scope="col" | Заголовок столбца. |
| td | Обычная ячейка данных. |
| caption | Название таблицы. |
Частая ошибка
Небольшая практика
Добавьте строку с размером файла JavaScript. Проверьте, можно ли однозначно понять каждое число по заголовку столбца.
Разберите также <div>, <p>: эти элементы пригодятся в том же интерфейсе.