ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML БОЛЬШЕ 🔍 ◑ КНИГИ УПРАЖНЕНИЯ СПРАВОЧНИКИ
HTML теги. Полный справочник

HTML тег <table>

❮ Prev Полный HTML справочник Next ❯

Пример

Простая HTML таблица, содержащая два столбца и две строки:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
Попробуйте сами »

Больше примеров "Попробуйте сами" ниже.

Определение и использование

Тег <table> определяет HTML таблицу.

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

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

Более сложная HTML таблица также может включать элементы <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

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

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

Элемент
<table> Yes Yes Yes Yes Yes

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

Атрибуты "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", "width" не поддерживаются в HTML5.

Приведённые в таблице ниже атрибуты использовались ранее в версии HTML4, но на данный момент не являются актуальными. Для форматирования таблицы используйте CSS.

Атрибуты

Атрибут Значение Описание
align left
center
right		 Не поддерживается в HTML5.
Определяет выравнивание таблицы в соответствии с окружающим текстом
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Не поддерживается в HTML5.
Определяет цвет фона для таблицы
border 1
0		 Не поддерживается в HTML5.
Указывает, используется ли таблица для макета
cellpadding pixels Не поддерживается в HTML5.
Определяет пространство между стенкой ячейки и содержимым ячейки
cellspacing pixels Не поддерживается в HTML5.
Определяет пространство между ячейками
frame void
above
below
hsides
lhs
rhs
vsides
box
border		 Не поддерживается в HTML5.
Определяет, какие части внешних границ должны быть видны
rules none
groups
rows
cols
all		 Не поддерживается в HTML5.
Определяет, какие части внутренних границ должны быть видны
summary text Не поддерживается в HTML5.
Определяет сводку содержимого таблицы
width pixels
%		 Не поддерживается в HTML5.
Определяет ширину таблицы

Глобальные атрибуты

Тег <table> также поддерживает Глобальные атрибуты в HTML.

Атрибуты событий

Тег <table> также поддерживает Атрибуты событий в HTML.

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

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

Таблица с подписью
HTML-таблица с подписью.

Теги внутри таблицы
Как отобразить элементы внутри других элементов.

Ячейки, занимающие более одной строки / столбца
Как определить ячейки таблицы, которые занимают более одной строки или одного столбца.

Связанные страницы

HTML учебник: HTML Таблицы

HTML DOM справочник: Объект Table

CSS учебник: Стилизация таблиц

Настройки CSS по умолчанию

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

Пример

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}
Попробуйте сами »
❮ Prev Полный HTML справочник Next ❯