Заголовок и подпись таблицы (caption)

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

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

Добавление подписи к таблице

id: 37837_html-caption-task-1

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

CSS
body {
  font-family: sans-serif;
  padding: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
caption {
  padding: 10px;
  font-weight: bold;
  font-size: 1.1em;
  caption-side: top;
  text-align: center;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
thead {
  background-color: #f2f2f2;
}
HTML
<table>
  <input1>Планеты Солнечной системы</input1>
  <thead>
    <tr>
      <th>Планета</th>
      <th>Диаметр (км)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Меркурий</td>
      <td>4,879</td>
    </tr>
    <tr>
      <td>Земля</td>
      <td>12,742</td>
    </tr>
  </tbody>
</table>
Чтобы добавить подпись или заголовок к таблице, используется тег `<caption>`. Его необходимо размещать сразу после открывающего тега `<table>`. В данном случае, вам нужно обернуть текст 'Планеты Солнечной системы' в этот тег.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Правильное оформление тега подписи

id: 37837_html-caption-task-2

Вы уже знаете, какой тег использовать для подписи. Теперь оформите текст 'Расписание занятий' как полноценный HTML-элемент, используя парные теги, чтобы он стал официальным заголовком таблицы.

CSS
body {
  font-family: sans-serif;
  padding: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
caption {
  padding: 10px;
  font-weight: bold;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
thead {
  background-color: #f2f2f2;
}
HTML
<table>
  <input1>Расписание занятий</input2>
  <thead>
    <tr>
      <th>Время</th>
      <th>Предмет</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>09:00 - 10:30</td>
      <td>Математика</td>
    </tr>
    <tr>
      <td>11:00 - 12:30</td>
      <td>Физика</td>
    </tr>
  </tbody>
</table>
Любой контент внутри HTML-элемента должен находиться между открывающим и закрывающим тегами. Для подписи таблицы используйте открывающий тег `<caption>` и закрывающий `</caption>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация подписи с помощью класса

id: 37837_html-caption-task-3

Подпись таблицы можно стилизовать так же, как и любой другой элемент. Примените к подписи CSS-класс `table-title`, который уже подготовлен в стилях, чтобы визуально выделить её.

CSS
body {
  font-family: sans-serif;
  padding: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
.table-title {
  font-size: 1.3em;
  font-weight: bold;
  color: #2c3e50;
  padding-bottom: 10px;
  text-align: left;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}
thead {
  background-color: #f2f2f2;
}
HTML
<table>
  <caption input1="table-title">Список сотрудников</caption>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Отдел</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иван</td>
      <td>Разработки</td>
    </tr>
    <tr>
      <td>Мария</td>
      <td>Маркетинга</td>
    </tr>
  </tbody>
</table>
Чтобы применить CSS-класс к HTML-элементу, используется атрибут `class`. Добавьте атрибут `class` к тегу `<caption>` со значением `table-title`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37837_html-caption-task-4

Хорошая таблица нуждается в заголовках для столбцов. Замените обычные ячейки в 'шапке' таблицы на специальные ячейки-заголовки, чтобы семантически обозначить, какие данные находятся в каждом столбце.

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

Улучшение доступности с атрибутом scope

id: 37837_html-caption-task-5

Чтобы таблицы были более доступны для программ чтения с экрана, важно указывать, к чему относятся заголовки. Добавьте к заголовкам атрибут `scope`, чтобы указать, что они являются заголовками для своих столбцов.

CSS
body {
  font-family: sans-serif;
  padding: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
caption {
  padding: 10px;
  font-weight: bold;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
thead th {
  background-color: #f0f0f0;
}
HTML
<table>
  <caption>Остатки на складе</caption>
  <thead>
    <tr>
      <th input1="col">Артикул</th>
      <th input1="col">Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>N-54321</td>
      <td>15 шт.</td>
    </tr>
    <tr>
      <td>K-98765</td>
      <td>42 шт.</td>
    </tr>
  </tbody>
</table>
Атрибут `scope` используется в тегах `<th>` для указания области их действия. Для заголовков столбцов используется значение `col`. Вам нужно добавить `scope="col"` к каждому тегу `<th>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Заголовки для строк

id: 37837_html-caption-task-6

Заголовки могут быть не только у столбцов, но и у строк. В таблице характеристик товара сделайте первый столбец заголовками строк и укажите с помощью атрибута `scope`, что они относятся к строкам.

CSS
body {
  font-family: sans-serif;
  padding: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
caption {
  padding: 10px;
  font-weight: bold;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
tbody th {
  background-color: #f9f9f9;
  font-weight: normal;
}
HTML
<table>
  <caption>Характеристики смартфона</caption>
  <tbody>
    <tr>
      <input1 input2="row">Экран</input1>
      <td>6.1 дюйм</td>
    </tr>
    <tr>
      <input1 input2="row">Батарея</input1>
      <td>4000 мАч</td>
    </tr>
    <tr>
      <input1 input2="row">Камера</input1>
      <td>48 МП</td>
    </tr>
  </tbody>
</table>
Чтобы создать заголовок для строки, используйте тег `<th>` в качестве первой ячейки в строке. Чтобы указать, что это заголовок строки, добавьте ему атрибут `scope` со значением `row`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сборка полной структуры таблицы

id: 37837_html-caption-task-7

Пришло время собрать всё вместе. Создайте полную и семантически верную структуру таблицы, включающую саму таблицу, её подпись и 'шапку' для заголовков столбцов. Заполните пропуски соответствующими тегами.

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