Списки и таблицы
Списки и таблицы — два частых способа показать данные: список навыков в портфолио, таблица проектов с годами и технологиями. Pico даёт им отступы, линии и выравнивание, вам остаётся только правильная разметка.
Списки
Маркированный <ul> и нумерованный <ol> получают аккуратные отступы, вложенные списки сдвигаются вправо:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<h3>Чем я занимаюсь</h3>
<ul>
<li>Вёрстка лендингов</li>
<li>
Сайты на CMS
<ul>
<li>WordPress</li>
<li>Статические генераторы</li>
</ul>
</li>
</ul>
<h3>Как я работаю</h3>
<ol>
<li>Обсуждаем задачу</li>
<li>Показываю прототип</li>
<li>Сдаю готовый сайт</li>
</ol>В превью — список с маркерами и вложенным подсписком, ниже нумерованные шаги. Внутри <nav> те же теги Pico показывает без маркеров, в строку — это будет в уроке о навигации.
Таблица
Таблице достаточно правильной структуры: <thead> для шапки, <tbody> для строк. Pico рисует горизонтальные линии между строками и выделяет шапку:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<table>
<thead>
<tr>
<th scope="col">Проект</th>
<th scope="col">Год</th>
<th scope="col">Технологии</th>
</tr>
</thead>
<tbody>
<tr><td>Сайт кофейни</td><td>2024</td><td>HTML, Pico</td></tr>
<tr><td>Портфолио фотографа</td><td>2025</td><td>Astro</td></tr>
<tr><td>Лендинг курса</td><td>2025</td><td>HTML, Sass</td></tr>
</tbody>
</table>Таблица растягивается на всю ширину, шапка жирная, строки разделены тонкими линиями.
Полосы и прокрутка
| Что нужно | Как сделать |
|---|---|
| Чередующиеся полосы строк | class="striped" у <table> |
| Прокрутка широкой таблицы | Обернуть в <div class="overflow-auto"> |
| Итоговая строка | Тег <tfoot> |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<div class="overflow-auto">
<table class="striped">
<thead>
<tr><th scope="col">Месяц</th><th scope="col">Записей</th><th scope="col">Просмотров</th></tr>
</thead>
<tbody>
<tr><td>Январь</td><td>4</td><td>1200</td></tr>
<tr><td>Февраль</td><td>3</td><td>980</td></tr>
<tr><td>Март</td><td>5</td><td>1640</td></tr>
</tbody>
<tfoot>
<tr><th scope="row">Всего</th><td>12</td><td>3820</td></tr>
</tfoot>
</table>
</div>Нечётные строки получили серый фон, итог внизу выделен. На узком экране таблица прокручивается внутри своего блока, а не ломает ширину страницы.
Частая ошибка
Свёрстать таблицу без <thead> и <tbody>, сложив все <tr> прямо в <table>. Браузер сам добавит <tbody>, но шапки не будет: строка с названиями колонок станет обычной строкой, а класс striped начнёт красить и её. Всегда отделяйте шапку тегом <thead>.