Заголовки таблиц (th) и атрибуты scope

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 33
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий мы сосредоточимся на правильном семантическом оформлении таблиц. Вы научитесь использовать тег `<th>` для создания ячеек-заголовков, которые визуально и структурно выделяют важную информацию. Также мы изучим атрибут `scope`, который играет ключевую роль в улучшении доступности ваших таблиц. Этот атрибут помогает скринридерам (программам для чтения с экрана) правильно связывать данные в ячейках с их заголовками, делая информацию понятной для всех пользователей. Задания построены от простого к сложному: от создания одного заголовка до построения сложных таблиц с заголовками для строк и столбцов.
Список тем

Создание первого заголовка таблицы

id: 37834_th-scope-1-basic-th

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

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}
HTML
<table>
  <tr>
    <input1>Имя</input1>
    <td>Город</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Москва</td>
  </tr>
</table>
Для создания ячейки-заголовка в таблице используется тег `<th>` (table head) вместо обычного тега `<td>` (table data). Замените открывающий и закрывающий теги `<td>` на `<th>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Завершение строки заголовков

id: 37834_th-scope-2-full-header-row

Продолжим работу с таблицей. Теперь вам нужно преобразовать всю первую строку в строку заголовков. Сделайте так, чтобы и 'Имя', и 'Возраст' стали заголовками столбцов.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}
HTML
<table>
  <tr>
    <input1>Имя</input1>
    <input2>Возраст</input2>
  </tr>
  <tr>
    <td>Анна</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Петр</td>
    <td>34</td>
  </tr>
</table>
Как и в предыдущем задании, используйте тег `<th>` для всех ячеек в первой строке, которые должны быть заголовками.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указание области действия для столбцов

id: 37834_th-scope-3-scope-col

Теперь, когда у нас есть заголовки, давайте сделаем таблицу более доступной. Добавьте атрибут, который явно укажет, что 'Продукт' и 'Цена' являются заголовками для своих столбцов.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}
HTML
<table>
  <tr>
    <th input1="col">Продукт</th>
    <th scope="input2">Цена</th>
  </tr>
  <tr>
    <td>Ноутбук</td>
    <td>80000 руб.</td>
  </tr>
</table>
Используйте атрибут `scope` со значением `col` (от 'column' - столбец) внутри тегов `<th>`. Это поможет программам для чтения с экрана понять структуру таблицы.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Создание заголовков строк

id: 37834_th-scope-4-scope-row

Заголовки могут быть не только у столбцов, но и у строк. В этой таблице с расписанием, сделайте дни недели ('Пн', 'Вт', 'Ср') заголовками для своих строк.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}
HTML
<table>
  <tr>
    <input1 scope="input2">Пн</input1>
    <td>Работа</td>
    <td>Спортзал</td>
  </tr>
  <tr>
    <th input3="row">Вт</th>
    <td>Работа</td>
    <td>Курсы HTML</td>
  </tr>
  <tr>
    <th scope="row">Ср</th>
    <td>Работа</td>
    <td>Отдых</td>
  </tr>
</table>
Используйте тег `<th>` для ячеек с днями недели и добавьте к ним атрибут `scope` со значением `row`, чтобы указать, что они являются заголовками строк.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Таблица с заголовками строк и столбцов

id: 37834_th-scope-5-combined-scope

Создайте полноценную структуру заголовков в таблице. 'Модель', 'Память', 'Цена' должны быть заголовками столбцов, а названия смартфонов — заголовками строк.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}
HTML
<table>
  <tr>
    <td></td>
    <th input1="col">Память</th>
    <th scope="input2">Цена</th>
  </tr>
  <tr>
    <input3 scope="row">Смартфон A</input3>
    <td>128 ГБ</td>
    <td>30000 руб.</td>
  </tr>
  <tr>
    <th input4="row">Смартфон B</th>
    <td>256 ГБ</td>
    <td>45000 руб.</td>
  </tr>
</table>
Для заголовков столбцов используйте `<th scope="col">`. Для заголовков строк используйте `<th scope="row">`. Внимательно расставьте теги и атрибуты.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексная практика

id: 37834_th-scope-6-full-practice

Перед вами таблица успеваемости. Ваша задача — правильно расставить все теги `<th>` и атрибуты `scope`, чтобы таблица была семантически верной и доступной. Укажите заголовки для столбцов и для строк.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}
HTML
<table>
  <caption>Успеваемость студентов</caption>
  <tr>
    <td></td>
    <th scope="input1">Математика</th>
    <th input2="col">История</th>
  </tr>
  <tr>
    <input3 scope="row">Иванов</th>
    <td>5</td>
    <td>4</td>
  </tr>
  <tr>
    <th scope="input4">Петрова</th>
    <td>4</td>
    <td>5</td>
  </tr>
</table>
Первая строка содержит заголовки столбцов (`scope="col"`). Первый столбец содержит заголовки строк (`scope="row"`). Пустая ячейка в углу не требует тега `<th>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Структурирование таблицы

id: 37834_th-scope-7-thead-tbody

Хорошей практикой является группировка заголовков и тела таблицы с помощью тегов `<thead>` и `<tbody>`. В этой таблице уже есть эти теги. Ваша задача — правильно разместить заголовок столбца, используя тег `<th>` и атрибут `scope`.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
thead {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
HTML
<table>
  <thead>
    <tr>
      <input1 input2="input3">Город</input1>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Париж</td>
    </tr>
    <tr>
      <td>Токио</td>
    </tr>
  </tbody>
</table>
Строка с заголовками (`<tr>` с `<th>`) должна находиться внутри `<thead>`. Укажите для `<th>` атрибут `scope` со значением `col`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру