Оформление списков и таблиц

Списки и таблицы из главы об HTML браузер показывает в простом виде: чёрные точки, ячейки без рамок. В этом уроке — свойства, которые превращают их в аккуратное меню, список преимуществ или прайс-лист.

Вид маркера

Свойство list-style-type выбирает маркер — знак перед пунктом списка. Это может быть точка, кружок, квадрат, цифры или буквы:

<style>
  .square { list-style-type: square; }
  .roman { list-style-type: upper-roman; }
</style>
 
<ul class="square"><li>Чай</li><li>Кофе</li></ul>
<ol class="roman"><li>Вступление</li><li>Основная часть</li></ol>

Значение	Маркер
`disc`	закрашенная точка (по умолчанию у `<ul>`)
`circle`, `square`	кружок, квадрат
`decimal`	1, 2, 3 (по умолчанию у `<ol>`)
`upper-roman`, `lower-alpha`	I, II, III или a, b, c
`none`	без маркера

Свой маркер

Псевдоэлемент ::marker оформляет сам маркер: цвет, размер, а свойство content заменяет его любым текстом:

<style>
  .benefits li::marker { content: "✓ "; color: seagreen; font-weight: 700; }
</style>
 
<ul class="benefits">
  <li>Доставка за один день</li>
  <li>Возврат в течение месяца</li>
</ul>

У ::marker работают не все свойства — в основном цвет, шрифт и content. Для сложных значков используют ::before. Свою нумерацию, например 1.1 и 1.2, делают счётчиками — о них урок «Счётчики CSS».

Меню из списка

Меню сайта — это список ссылок. Чтобы оно выглядело как меню, у списка убирают маркеры и отступы, а пункты ставят в строку через flexbox:

<style>
  .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
  .menu a { color: steelblue; text-decoration: none; }
</style>
 
<ul class="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Каталог</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

Сокращение list-style задаёт вид маркера одной записью. Отступ слева у списка — это его padding, поэтому его обнуляют отдельно.

Ячейки таблицы

Таблице нужны склеенные рамки (border-collapse из урока о таблицах), внутренние отступы в ячейках и выравнивание. Текст выравнивают по левому краю, числа — по правому, чтобы разряды стояли друг под другом:

<style>
  table { border-collapse: collapse; }
  th, td { padding: 6px 12px; border-bottom: 1px solid silver; text-align: left; }
  .num { text-align: right; }
</style>
 
<table>
  <tr><th>Товар</th><th class="num">Цена</th></tr>
  <tr><td>Рюкзак</td><td class="num">$40</td></tr>
  <tr><td>Палатка</td><td class="num">$120</td></tr>
</table>

Полосы-зебра

Длинную таблицу легче читать, если строки чередуются по цвету. Чётные строки выбирают псевдоклассом :nth-child(even), а строку под курсором — :hover:

<style>
  table { border-collapse: collapse; }
  th, td { padding: 6px 12px; text-align: left; }
  thead { background: steelblue; color: white; }
  tbody tr:nth-child(even) { background: aliceblue; }
  tbody tr:hover { background: lightyellow; }
</style>
 
<table>
  <thead><tr><th>День</th><th>Занятие</th></tr></thead>
  <tbody>
    <tr><td>Понедельник</td><td>Йога</td></tr>
    <tr><td>Вторник</td><td>Бассейн</td></tr>
    <tr><td>Среда</td><td>Теннис</td></tr>
    <tr><td>Четверг</td><td>Бег</td></tr>
  </tbody>
</table>

Подпись таблицы

<caption> по умолчанию стоит над таблицей. Свойство caption-side: bottom переносит подпись вниз:

<style>
  table { border-collapse: collapse; }
  td { padding: 6px 12px; border: 1px solid silver; }
  caption { caption-side: bottom; padding-top: 6px; color: gray; font-size: 14px; }
</style>
 
<table>
  <caption>Цены указаны с налогом</caption>
  <tr><td>Чай</td><td>$3</td></tr>
  <tr><td>Кофе</td><td>$4</td></tr>
</table>

Частая ошибка

Рамка у строки <tr> не появляется, пока у таблицы нет border-collapse: collapse: в обычном режиме рамки рисуют только ячейки:

<style>
  table { margin-bottom: 8px; }
  td { padding: 6px 12px; }
  tr { border-bottom: 2px solid crimson; }
  .fixed { border-collapse: collapse; }
</style>
 
<table><tr><td>Без collapse</td><td>линии нет</td></tr></table>
<table class="fixed"><tr><td>С collapse</td><td>линия есть</td></tr></table>

Спасибо, что читаете!