Тег <table>

Описание

Тег <table> создаёт таблицу для отображения структурированных данных в строках и столбцах. Это блочный элемент, содержащий комплексную систему вложенных тегов для семантической разметки табличных данных.

Базовый синтаксис:
<table> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> </tr> <tr> <td>Данные 1</td> <td>Данные 2</td> </tr> </table>

Основные дочерние элементы:

  • <caption> - заголовок таблицы
  • <thead>, <tbody>, <tfoot> - семантические разделы
  • <tr> - строка таблицы
  • <th> - ячейка заголовка
  • <td> - ячейка данных
  • <colgroup>, <col> - стилизация столбцов

Рекомендации по использованию:

  • Используйте только для табличных данных, не для верстки
  • Всегда добавляйте <th> для заголовков
  • Для доступности используйте scope и headers
  • Делайте таблицы адаптивными с overflow-x
  • Группируйте строки семантически (thead/tbody/tfoot)

Тег <table> остается важным инструментом для представления структурированных данных при соблюдении принципов семантики и доступности.

Атрибуты

align Выравнивание таблицы
bgcolor Цвет фона таблицы
border Толщина рамки таблицы
cellpadding Отступ внутри ячеек
cellspacing Промежуток между ячейками
frame Какие стороны рамки показывать
rules Правила отображения линий
summary Описание таблицы
width Ширина таблицы
class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
translate Определяет возможность перевода
role ARIA-роль
aria-* ARIA-атрибуты

Поддержка браузерами
2.0 1.0 2.0 1.0 1.0