<table>
- 25 января 2023
Тег <table>
используется для отображения данных в форме таблицы. Он позволяет создавать строки и столбцы, которые можно легко организовать и стилизовать.
Синтаксис тега <table>
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
</tr>
</table>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <table>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Отображение списка товаров с изображениями, названиями и ценами:
<table>
<thead>
<tr>
<th>Изображение</th>
<th>Название</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="product1.jpg" alt="Продукт 1"></td>
<td>Продукт 1</td>
<td>$10.00</td>
</tr>
<tr>
<td><img src="product2.jpg" alt="Product 2"></td>
<td>Продукт 2</td>
<td>$15.00</td>
</tr>
</tbody>
</table>
Создание расписания для конференции с несколькими треками:
<table>
<thead>
<tr>
<th>Время</th>
<th>Трек 1</th>
<th>Трек 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td>Сессия 1А</td>
<td>Сессия 1B</td>
</tr>
<tr>
<td>10:00 AM</td>
<td>Сессия 2А</td>
<td>Сессия 2B</td>
</tr>
</tbody>
</table>
Для чего использовать тег <table>
- для отображения данных в виде таблицы, что облегчает сравнение и анализ информации;
- для создания таблицы цен на продукты или услуги;
- для отображения таблицы лидеров в игре или соревновании;
- для создания календаря с днями, неделями и месяцами;
- для создания диаграммы или графика с данными в формате таблицы.
Атрибуты тега <table>
У тега нет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
- таблицы сложно сделать отзывчивыми на небольших экранах, они могут вызывать горизонтальную прокрутку;
- таблицы не следует использовать для вёрстки, так как они могут повлиять на доступность и структуру страницы.
Нюансы
- Если таблица имеет несколько строк и столбцов, её может быть трудно читать и понимать. В таких случаях лучше использовать альтернативные теги или разбить таблицу на более мелкие таблицы или диаграммы.
- Если в таблице есть ячейки с большим количеством текста, он может быть трудночитаемым и может повлиять на общую компоновку страницы.
Поддержка браузеров
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
- теги
<ul>
и<li>
могут быть использованы для создания списков элементов; - теги
<dl>
,<dt>
и<dd>
могут использоваться для создания списков определений.
Чем заменить тег
<div>
можно использовать для вёрстки;<figure>
и<figcaption>
могут использоваться для подписи к изображениям и видео.
Актуальность
Тег <table>
не является устаревшим.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023