Коротко: таблица в HTML строится тегами <table>, <thead>, <tbody>, <tr>, <th>, <td>. В CSS её оформляют через border-collapse: collapse, отступы в ячейках, «зебру» строк и границы. Для мобильных таблицу оборачивают в блок с горизонтальной прокруткой.
Правильная разметка
<table class="table">
<caption>Сравнение тарифов</caption>
<thead>
<tr>
<th scope="col">Тариф</th>
<th scope="col">Цена</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Базовый</th>
<td>1 000 ₽</td>
</tr>
<tr>
<th scope="row">Про</th>
<td>2 500 ₽</td>
</tr>
</tbody>
</table>Вкладки: разбор
thead— шапка таблицы;tbody— основное содержимое;tfoot— итоговая строка;th— ячейка-заголовок (жирный, по центру);td— обычная ячейка.
caption — подпись таблицы, важна для доступности и SEO.
<td colspan="2">Итого</td> /* объединить по строке */
<td rowspan="2">Да</td> /* объединить по столбцу */colspan объединяет ячейки по горизонтали, rowspan — по вертикали. Будьте аккуратны: легко «съехать» на одну ячейку.
.table {
width: 100%;
border-collapse: collapse; /* убрать двойные рамки */
font-size: 16px;
}
.table th, .table td {
padding: 12px 16px;
border-bottom: 1px solid #eee;
text-align: left;
}
.table thead th {
background: #f3f3f3;
font-weight: 600;
}
.table tbody tr:nth-child(even) {
background: #fafafa; /* «зебра» */
}border-collapse: collapse — главное свойство: без него рамки удваиваются и таблица выглядит «толстой».
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}Оберните таблицу в контейнер с прокруткой — тогда на телефоне прокручивается только сама таблица, а не страница. Альтернатива — «карточная» раскладка через медиа-запрос.
Практика: таблица тарифов
- Разметьте шапку в
thead, данные вtbody. - Добавьте
captionс названием. - Стилизуйте:
border-collapse, отступы, границы. - Добавьте «зебру» для читаемости.
- Оберните в контейнер с
overflow-x: auto. - Проверьте на телефоне.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Двойные рамки | нет border-collapse |
добавить collapse |
| Таблица «вылезает» на мобильном | нет прокрутки | обернуть в overflow-x: auto |
| Ячейки «съехали» | ошибка в colspan/rowspan | пересчитать объединения |
| Не читается вслепую | нет th и scope |
использовать заголовки ячеек |
Проверьте себя
colspan="2"?
Вопросы и ответы
th — ячейка-заголовок, браузер показывает её жирной и по центру, скринридеры читают её как заголовок строки или столбца.
Селектором tbody tr:nth-child(even) { background: #fafafa; } — чередование фона каждой второй строки.
Позиционированием thead th { position: sticky; top: 0; } внутри прокручиваемого контейнера.
Разбивать на страницы, добавлять поиск и сортировку, либо переносить данные в отдельные блоки-карточки на мобильных.
Итоги
- Структура:
table/thead/tbody/tr/th/td, подпись —caption. - Объединение ячеек —
colspanиrowspan. - Стилизация —
border-collapse, отступы, «зебра». - На мобильных — обёртка с
overflow-x: auto.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.