Задача: Улучшите таблица данных
Улучшите таблица данных: практическая задача по вёрстке со стартовым кодом, критериями готовности, усложнением и самопроверкой.
Условие: Улучшите таблица данных
Практический разбор «Улучшите таблица данных» строится вокруг области «практическая задача: табличные данные». Для темы «Улучшите таблица данных» предметный результат подтверждается так: проверьте caption, th и чтение таблицы при горизонтальной прокрутке. Контрольный критерий «Улучшите таблица данных» формулируется так: проверьте caption, th и чтение таблицы при горизонтальной прокрутке. Результат задачи «Улучшите таблица данных» должен сохранять семантический HTML, адаптивную раскладку и понятные состояния управления.
Стартовый код
<div class="table-scroll" tabindex="0">
<table><caption>Сравнение</caption><tr><th>Вариант</th><th>Значение</th></tr></table>
</div>Критерии готовности
- Проверьте caption, th и чтение таблицы при горизонтальной прокрутке применительно к теме «Улучшите таблица данных»
- Сопоставьте результат «Улучшите таблица данных» с целью «сохранить связи заголовков, строк и столбцов на любом экране» и объясните каждое использованное условие
- Повторите проверку «Улучшите таблица данных» с другими данными и убедитесь, что исключён риск: превращение таблицы в набор несвязанных блоков может скрыть структуру данных
- Назначение «Улучшите таблица данных» понятно без декоративного оформления
Усложнение задачи
Перенесите тему «Улучшите таблица данных» на контрольной странице и изменяйте по одному условию. После каждого запуска «Улучшите таблица данных» проверяйте: проверьте caption, th и чтение таблицы при горизонтальной прокрутке.
Самопроверка решения
Рабочий критерий для «Улучшите таблица данных»: проверьте caption, th и чтение таблицы при горизонтальной прокрутке. Если результат «Улучшите таблица данных» меняется вместе с посторонним условием, пример ещё не изолирован. Затем исключите следующие риски: Превращение таблицы в набор несвязанных блоков может скрыть структуру данных — это предметный риск для «Улучшите таблица данных»; Визуальное изменение порядка, не совпадающее с DOM и фокусом при использовании «Улучшите таблица данных»; Непредсказуемое наследование значения из внешнего компонента; для «Улучшите таблица данных» проверьте это отдельно.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.