MP Web Studio
HTMLБазовый трек
08 / 120

УРОК 08 ИЗ 120

Таблица для данных

Представьте сравнимые данные в доступной таблице.

Официальный источникWHATWG HTML — tablesПроверено: 2026-08-26
ШАГ 1 · ИЗУЧИТЕ

Как это работает

Таблицы предназначены для данных. caption и th объясняют связи.

Правильный пример
<table>
  <caption>Сроки услуг</caption>
  <thead><tr><th scope="col">Услуга</th><th scope="col">Срок</th></tr></thead>
  <tbody><tr><td>Аудит</td><td>2 дня</td></tr></tbody>
</table>

caption называет набор данных. thead и tbody отделяют заголовки от значений, а scope связывает th с колонкой.

Частая ошибка
<table><tr><td>Услуга</td><td>Срок</td></tr></table>

Первая строка выглядит как заголовок, но td не объявляет связь с колонкой.

ШАГ 2 · ПРИМЕНИТЕ

Ваше задание

Добавьте caption, thead, tbody, два th scope="col" и две строки.

ШАГ 3 · СОЗДАЙТЕ

Напишите и посмотрите результат

index.htmlHTML
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ

Что должно пройти

0%не проверено
  • У таблицы есть caption.
  • В таблице есть thead и tbody.
  • Колонки используют th scope="col".
  • В tbody две строки.
Объясните логику решения

Начните с caption, перенесите заголовки в thead, значения в tbody и задайте scope каждому th.