Руководство по HTML

Полный список HTML-тегов

HTML: <table> тег

Онлайн пример

Два примера HTML-таблиц:

Пример

!doctype　html
<html>
<head>
<meta　charset="UTF-8">
<title>HTML　table标签的使用(基础教程网　oldtoolbag.com)</title>
</head>
<body>
<br>
　　<tr>
　　　　<th>Item</th>
　　　　<th>Amount</th>
　　</tr>
　　<tr>
　　　　<td>Bananas</td>
　　　　<td>$5</td>
　　</tr>
　　<tr>
　　　　Oranges
　　　　<td>Апельсины</td>
　　</tr>
</table>
<td>$17</td>
<br>
　　　　<table border="1">
　　　　　　　　<tr>
　　　　　　　　　　　　<thead>
　　　　　　　　</tr>
　　　　<th colspan="2">Заголовок таблицы</th>
　　　　</thead>
　　　　　　　　<tr>
　　　　　　　　　　　　<td>Тело таблицы</td>
　　　　　　　　　　　　<td>с двумя столбцами</td>
　　　　　　　　</tr>
　　　　</tbody>
</table>
</body>
</html>

Проверьте, ›/›

Совместимость браузеров

IEFirefoxOperaChromeSafari

Все основные браузеры поддерживают тег <table>.

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

Элемент <table> определяет таблицу HTML

HTML-таблица включает элемент <table>, один или несколько <tr>、<th> и <td> Элементы.

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

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

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

В HTML5 поддерживается только атрибут "border", и разрешены только значения "1" или "".

Атрибут

Атрибут	Значение	Описание
align	left center right	HTML5 не поддерживает. HTML 4.01 уже устарел. Определяет способ выравнивания таблицы по отношению к окружающим элементам.
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 не поддерживает. HTML 4.01 уже устарел. Определяет цвет фона таблицы.
border	1 ""	Определяет, имеет ли ячейка таблицы границу.
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.

Больше онлайн примеров

Таблица без рамки
Этот пример демонстрирует таблицу без рамки.

Заголовок таблицы (Heading)
Этот пример демонстрирует, как отображается заголовок таблицы.

Таблица с заголовком
Этот пример демонстрирует таблицу с заголовком (caption).

Ячейки таблицы, пересекающиеся по строкам или столбцам
Этот пример демонстрирует, как определить таблицу ячеек, пересекающихся по строкам или столбцам.

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

Отступ между ячейками (Cell padding)
Этот пример демонстрирует, как использовать Cell padding для создания пробела между содержимым ячейки и ее рамкой.

Интервал между ячейками (Cell spacing)
Этот пример демонстрирует, как использовать Cell spacing для увеличения расстояния между ячейками.

Связанные статьи

Урок HTML:Таблицы HTML

Руководство по HTML DOM:Объект Table

HTML: <tbody> тег HTML: <summary> тег