Таблицы и статистика
В личном кабинете LearnUp ученик видит цифры: сколько курсов пройдено, сколько часов потрачено, какие оценки получены. Длинные данные выводят таблицей — компонент table, а несколько главных чисел — блоками статистики, компонент stats.
Таблица
Класс table ставят на обычную HTML-таблицу. Таблицу оборачивают в блок с overflow-x-auto, чтобы на узком экране она прокручивалась, а не ломала страницу:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="overflow-x-auto rounded-box border border-base-300">
<table class="table">
<thead>
<tr>
<th>Курс</th>
<th>Прогресс</th>
<th>Оценка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Основы HTML</td>
<td>12 из 12</td>
<td>95</td>
</tr>
<tr>
<td>JavaScript с нуля</td>
<td>8 из 24</td>
<td>88</td>
</tr>
</tbody>
</table>
</div>Аккуратная таблица в рамке: отступы в ячейках, тонкие линии между строками и бледные заголовки столбцов.
Модификаторы таблицы
| Модификатор | Что делает |
|---|---|
table-zebra | Чередует фон строк |
table-xs … table-xl | Меняет размер текста и отступов |
table-pin-rows | Закрепляет <thead> при прокрутке |
table-pin-cols | Закрепляет ячейки <th> в строках |
В ячейки можно класть другие компоненты — например, значок со статусом:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="overflow-x-auto">
<table class="table table-zebra">
<tbody>
<tr>
<td>Основы HTML</td>
<td><span class="badge badge-success">Пройден</span></td>
</tr>
<tr>
<td>JavaScript с нуля</td>
<td><span class="badge badge-warning">В процессе</span></td>
</tr>
<tr>
<td>Вёрстка на Flexbox</td>
<td><span class="badge badge-ghost">Не начат</span></td>
</tr>
</tbody>
</table>
</div>Строки чередуются белым и серым, а статус каждого курса отмечен цветным значком.
Статистика
Компонент stats — ряд блоков stat. В каждом три части: stat-title — подпись, stat-value — крупное число, stat-desc — пояснение:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="stats bg-base-100 shadow">
<div class="stat">
<div class="stat-title">Пройдено курсов</div>
<div class="stat-value">3</div>
<div class="stat-desc">из 5 купленных</div>
</div>
<div class="stat">
<div class="stat-title">Часов обучения</div>
<div class="stat-value text-primary">42</div>
<div class="stat-desc">+6 за неделю</div>
</div>
</div>Два блока рядом, разделённые линией; второе число окрашено утилитой text-primary. Модификатор stats-vertical ставит блоки друг под другом.
Частая ошибка
Поставить три-четыре блока stat в ряд и не проверить телефон. stats по умолчанию горизонтальный и не переносит блоки, поэтому на узком экране часть чисел уходит в горизонтальную прокрутку, которую легко не заметить. Делайте статистику вертикальной на маленьких экранах и горизонтальной на больших: class="stats stats-vertical lg:stats-horizontal".