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)	Рекомендация

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

Элемент
<table>	3+	1+	3.5+	1+	1+	1+

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

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

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

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

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

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

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

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

Учебник HTML

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

HTML Элементы

Справочники