HTML тег <table>

Элемент <table> (от англ. "table" ‒ «таблица») определяет таблицу HTML.

Таблица HTML состоит из элемента <table> и одного или нескольких элементов <tr>, <th> и <td>.

Элемент <tr> определяет строку таблицы, элемент <th> определяет верхний колонтитул/заголовок таблицы, а элемент <td> определяет ячейку таблицы.

Примечание: Тег <th>, отличается от <td> визуальным представлением данных внутри таблицы: по умолчанию, текст, размещенный в теге <th>, отображается жирным начертанием с выравниванием текста по центру, а текст тега <td> ‒ обычным начертанием с выравниванием по левому краю.

Более сложные таблицы могут содержать такие элементы как, <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

Примечание: Таблицы не должны использоваться для макета страницы! Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашёл воплощение на многих сайтах, тем не менее, существует множество альтернатив использованию таблиц для макета, в основном с использованием CSS.

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Закрывающий тег

Обязателен.

Атрибуты

alignУстарел в HTML5
Определяет выравнивание таблицы в соответствии с окружающим её текстом.

backgroundУстарел в HTML5
Задаёт фоновый рисунок в таблице.

bgcolorУстарел в HTML5
Задает цвет фона для таблицы.

borderУстарел в HTML5
Толщина рамки в пикселях.

bordercolorУстарел в HTML5
Задает цвет рамки.

cellpaddingУстарел в HTML5
Определяет расстояние между границей ячейки и ее содержимым.

cellspacingУстарел в HTML5
Указывает расстояние между ячейками.
colsУстарел в HTML5
Число колонок в таблице.

frameУстарел в HTML5
Сообщает браузеру, как отображать границы вокруг таблицы.

rulesУстарел в HTML5
Сообщает браузеру, где отображать границы между ячеек.

summaryУстарел в HTML5
Краткое описание таблицы.

widthУстарел в HTML5
Определяет ширину таблицы.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <table> со следующими значениями CSS по умолчанию:

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Различия между HTML 4.01 и HTML5

В HTML 5 была прекращена поддержка 12 атрибутов.

Пример использования:

Пример HTML:

Попробуй сам
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>

Спецификации

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 4.01 (W3C) Рекомендация
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

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


Попробуйте сами - Примеры

Как добавить рамку вокруг таблицы:
Граница таблицы

Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы

Как изменить поля и интервалы таблицы:
Поля и интервалы таблицы

Как изменить ширину таблицы:
Ширина таблицы

Как объединить столбцы таблицы:
Объединение столбцов

Как создать заголовок таблицы:
Заголовок таблицы

Как применять теги группирования элементов таблиц:
Теги группирования элементов таблиц


Учебник HTML

HTML уроки: HTML Табицы

HTML Элементы



Contema