Таблицы в HTML нужны для структурированного представления данных — например, прайс‑листов, расписаний, сравнительных характеристик. В этой статье пошагово разберём, как создать простую таблицу, какие теги использовать и на что обратить внимание.
Базовая структура таблицы
Любая таблица в HTML строится из нескольких обязательных тегов:
<table>— контейнер всей таблицы;<thead>— заголовочная часть (не обязательна, но полезна для семантики);<tbody>— основное содержимое таблицы (тоже не обязателен, но рекомендуется);<tr>— строка таблицы (table row);<th>— ячейка заголовка (table header);<td>— обычная ячейка с данными (table data).
Пример минимальной таблицы
<table> <thead> <tr> <th>Название товара</th> <th>Цена, руб.</th> <th>Наличие</th> </tr> </thead> <tbody> <tr> <td>Чай зелёный</td> <td>250</td> <td>Есть</td> </tr> <tr> <td>Кофе в зёрнах</td> <td>600</td> <td>Нет</td> </tr> </tbody> </table>
| Название товара | Цена, руб. | Наличие |
|---|---|---|
| Чай зелёный | 250 | Есть |
| Кофе в зёрнах | 600 | Нет |
В этом примере:
<thead>выделяет строку заголовков;- каждая строка данных обернута в
<tr>; - заголовки столбцов — в
<th>, а данные — в<td>.
Пошаговый разбор
Шаг 1. Создаём контейнер таблицы.
Открываем и закрываем тег <table> — это основа.
Шаг 2. Добавляем строку заголовков.
Внутри <table> создаём <thead>, затем внутри него — <tr>. В этой строке размещаем ячейки-заголовки <th>. Количество <th> должно соответствовать количеству столбцов.
Шаг 3. Добавляем строки с данными.
После <thead> (или сразу после <table>, если <thead> не используется) добавляем <tbody> и внутри него строки <tr>, а в них — ячейки <td> с данными.
Шаг 4. Проверяем соответствие ячеек.
В каждой строке количество ячеек (<th> или <td>) должно быть одинаковым. Иначе таблица может отображаться некорректно в некоторых браузерах.
Важные нюансы
- Семантика. Использование
<thead>и<tbody>делает таблицу понятнее для скринридеров и поисковых систем. Это особенно важно, если таблица большая. - Отсутствие стилей. Сама по себе HTML‑таблица не имеет рамок и отступов. Чтобы она выглядела аккуратно, обычно добавляют CSS.
- Атрибут
border. Раньше для рамок использовали атрибутborder="1"у тега<table>:html<table border="1"> <!-- содержимое --> </table>
Сейчас этот способ считается устаревшим: внешний вид лучше контролировать через CSS.
Таблица с базовым оформлением через CSS
Пример, где таблица имеет рамки и минимальные отступы:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Пример таблицы</title> <style> table { border-collapse: collapse; /* убирает двойные рамки */ width: 100%; } th, td { border: 1px solid #ccc; padding: 8px 12px; text-align: left; } th { background-color: #f5f5f5; font-weight: bold; } </style> </head> <body> <h1>Прайс-лист на товары</h1> <table> <thead> <tr> <th>Товар</th> <th>Артикул</th> <th>Цена</th> <th>Статус</th> </tr> </thead> <tbody> <tr> <td>Ноутбук</td> <td>NB-001</td> <td>45 000 ₽</td> <td>В наличии</td> </tr> <tr> <td>Мышь беспроводная</td> <td>MS-123</td> <td>1 200 ₽</td> <td>Под заказ</td> </tr> <tr> <td>Клавиатура механическая</td> <td>KB-456</td> <td>3 500 ₽</td> <td>В наличии</td> </tr> </tbody> </table> </body> </html>
Прайс-лист на товары
| Товар | Артикул | Цена | Статус |
|---|---|---|---|
| Ноутбук | NB-001 | 45 000 ₽ | В наличии |
| Мышь беспроводная | MS-123 | 1 200 ₽ | Под заказ |
| Клавиатура механическая | KB-456 | 3 500 ₽ | В наличии |
Здесь:
border-collapse: collapseубирает двойные границы между ячейками;paddingдобавляет внутренние отступы, чтобы текст не прилипал к рамкам;- для заголовков задан светло‑серый фон и жирный шрифт.
Объединение ячеек
Иногда нужно объединить ячейки по горизонтали или вертикали. Для этого используют атрибуты:
colspan— объединяет ячейки по горизонтали (в пределах одной строки);rowspan— объединяет по вертикали (занимает несколько строк).
Пример с объединением
<table> <thead> <tr> <th colspan="2">Отдел продаж</th> <th>Телефон</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Менеджер</td> <td>Иванов И. И.</td> <td>+7 (999) 111‑22‑33</td> </tr> <tr> <td>Петров П. П.</td> <td>+7 (999) 444‑55‑66</td> </tr> </tbody> </table>
| Отдел продаж | Телефон | |
|---|---|---|
| Менеджер | Иванов И. И. | +7 (999) 111‑22‑33 |
| Петров П. П. | +7 (999) 444‑55‑66 | |
В этом примере:
- в заголовке первые две ячейки объединены в одну с помощью
colspan="2"; - в теле таблицы ячейка «Менеджер» занимает две строки благодаря
rowspan="2".
При использовании rowspan и colspan важно следить, чтобы общее количество ячеек в каждой строке оставалось согласованным — иначе могут появиться «дыры» в таблице.
Частые ошибки и как их избежать
- Пропуск закрывающих тегов. Каждый открывающий тег должен иметь соответствующий закрывающий. Особенно важно закрывать
<tr>,<th>,<td>. - Неравное количество ячеек. Если в одной строке три
<td>, а в другой — четыре, таблица может выглядеть «сломанной». - Использование таблицы для вёрстки макета. Таблицы не предназначены для размещения блоков на странице (колонки, сетка). Для этого лучше использовать Flexbox или Grid.
Таким образом, простая HTML‑таблица собирается из небольшого набора тегов, а её внешний вид и удобство определяются правильным использованием семантики и CSS.
Загрузка...