Задача: Сверстайте таблица данных

Условие: Сверстайте таблица данных

Практический разбор «Сверстайте таблица данных» строится вокруг области «практическая задача: табличные данные». Для темы «Сверстайте таблица данных» предметный результат подтверждается так: проверьте 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 и чтение таблицы при горизонтальной прокрутке. После этого сравните исходное и изменённое состояние «Сверстайте таблица данных» на одном и том же содержимом. Затем исключите следующие риски: Превращение таблицы в набор несвязанных блоков может скрыть структуру данных — это предметный риск для «Сверстайте таблица данных»; Использование !important вместо разбора каскада при использовании «Сверстайте таблица данных»; Оптимизация кода до проверки корректности и доступности; для «Сверстайте таблица данных» проверьте это отдельно.