Тег <table>

Синтаксис

Описание

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

Внутри контейнера <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

Внимание!

Контейнеры <thead>, <tbody> и <tfoot> нужны для указания каждой части таблицы.

Любая таблица состоит из строк (тег <tr>) и ячеек (тег <td>).

Заголовок строки или столбца таблицы задается при помощи тега <th>. Данный элемент размещается в первой строке таблицы. В браузере он автоматически выделяется жирным.

Примечание!

Теги <thead>, <tbody>, <tfoot> и <th> не является обязательными элементами таблицы, но мы рекомендуем включать их в таблицу, так как они помогают лучше структурировать контент, а также помогает поисковым машинам лучше индексировать таблицы.

Атрибуты, которые можно использовать в теге <table>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

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

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег table</title>

</head>

<body>

<table>

<thead>

<tr>

<th>№</th>

<th>Страна</th>

<th>Город</th>

</tr>
</thead>
<tbody>

<tr>

<td>1</td>

<td>Россия</td>

<td>Москва</td>

</tr>

<tr>

<td>2</td>

<td>Беларусь</td>

<td>Минск</td>

</tr>

<tr>

<td>3</td>

<td>Украина</td>

<td>Киев</td>

</tr>
</tbody>

</table>

</body>

</html>

Отображение в браузере:

№	Страна	Город
1	Россия	Москва
2	Беларусь	Минск
3	Украина	Киев

Параметры CSS по умолчанию

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

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

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<table>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

<table>

Да

Тег <table>

Синтаксис

Описание

Внимание!

Примечание!

Атрибуты

Пример

Параметры CSS по умолчанию

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

Комментарии