Знакомство с таблицами / Заголовок таблицы [11/23]
×

Заголовок таблицы [11/23]

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

Сейчас подпись Распределение браузеров сделана с помощью заголовка первого уровня. В принципе, можно догадаться, что это название таблицы, но семантически правильнее будет сделать это название с помощью тега <caption>.

Тег <caption> должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов. Вот так:

<table>
  <caption>Текст</caption>
  ...
 </table>

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.

По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.

По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Заголовок таблицы</title> </head> <body> <h1>Распределение браузеров</h1> <table> <tr> <td>Браузер</td> <td>Посещения</td> <td>Доля</td> </tr> <tr> <td>Mozilla Firefox</td> <td>163</td> <td>59%</td> </tr> <tr> <td>Google Chrome</td> <td>78</td> <td>28%</td> </tr> <tr> <td>Safari</td> <td>35</td> <td>13%</td> </tr> </table> </body> </html>
CSS
table { border-collapse: collapse; border: 2px solid black; } td { padding: 5px; padding-right: 30px; border: 1px solid lightgray; } th { padding: 10px; border: 1px solid black; } caption { /* стили для заголовка таблицы */ }
HTML Academy
  1. Создайте заголовок таблицы Распределение браузеров с помощью тега <caption>.
  2. В CSS-редакторе для caption добавьте свойство caption-side: bottom;,
  3. затем для него же добавьте свойство text-align: right;.
  4. Измените text-align: right; на text-align: left;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.