ЗадачаАктуально

Задача: Исправьте таблица данных

Исправьте таблица данных: практическая задача по вёрстке со стартовым кодом, критериями готовности, усложнением и самопроверкой.

Условие: Исправьте таблица данных

Цель темы «Исправьте таблица данных» — сохранить связи заголовков, строк и столбцов на любом экране. Для темы «Исправьте таблица данных» предметный результат подтверждается так: проверьте caption, th и чтение таблицы при горизонтальной прокрутке. Проверьте «Исправьте таблица данных» в компоненте внутри узкого контейнера, а не viewport, выполнив действие: проверьте caption, th и чтение таблицы при горизонтальной прокрутке. Результат задачи «Исправьте таблица данных» должен сохранять семантический HTML, адаптивную раскладку и понятные состояния управления.

Стартовый код

html
<div class="table-scroll" tabindex="0">
  <table><caption>Сравнение</caption><tr><th>Вариант</th><th>Значение</th></tr></table>
</div>

Критерии готовности

  • Проверьте caption, th и чтение таблицы при горизонтальной прокрутке применительно к теме «Исправьте таблица данных»
  • Сопоставьте результат «Исправьте таблица данных» с целью «сохранить связи заголовков, строк и столбцов на любом экране» и объясните каждое использованное условие
  • Повторите проверку «Исправьте таблица данных» с другими данными и убедитесь, что исключён риск: превращение таблицы в набор несвязанных блоков может скрыть структуру данных
  • Назначение «Исправьте таблица данных» понятно без декоративного оформления

Усложнение задачи

Соберите «Исправьте таблица данных» в рабочем фрагменте интерфейса. Для «Исправьте таблица данных» выполните предметную проверку: проверьте caption, th и чтение таблицы при горизонтальной прокрутке. Затем замените демонстрационные данные «Исправьте таблица данных» реальными.

Самопроверка решения

Проверяя «Исправьте таблица данных», соблюдайте правило: проверьте caption, th и чтение таблицы при горизонтальной прокрутке. Для «Исправьте таблица данных» изменяйте одно условие за запуск и фиксируйте фактический результат. Затем исключите следующие риски: Превращение таблицы в набор несвязанных блоков может скрыть структуру данных — это предметный риск для «Исправьте таблица данных»; Использование физической стороны там, где нужен логический отступ при использовании «Исправьте таблица данных»; Дублирование интерактивной роли без нативного управления; для «Исправьте таблица данных» проверьте это отдельно.

Спецификации и источники

Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.