Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023