Тег table создает таблицу. Используется совместно с тегами tr, td, th. Тег tr создает ряд таблицы, а теги td и th создают ячейки этой таблицы. Разница между td и th: первый - это обычная ячейка, а второй - это ячейка-заголовок.

Тег по умолчанию не блочный и не строчный, а имеет собственную блочную модель. Подробнее см. свойство display.

См. также теги thead, tbody и tfoot, которые группируют ряды таблицы (отделяют верхнюю часть, основную часть и нижнюю часть таблицы).

См. также тег caption, который задает заголовок всей таблицы.

См. также полезные CSS свойства для таблиц border-collapse, border-spacing, empty-cells, table-layout.

См. также CSS свойство vertical-align, которое задает выравнивание текста в ячейках таблицы по вертикали (оно работает не только для таблиц).

См. также атрибуты rowspan и colspan, которые объединяют ряды и столбцы таблицы.

Атрибуты

Атрибут Описание
cellspacing Задает расстояние между ячейками. Устарел в HTML5, вместо него следует использовать CSS свойство border-spacing. Имеет ненулевое значение по умолчанию из-за чего наблюдаются отступы между ячеками таблицы, см. пример 1.
cellpadding Задает расстояние между текстом и границей ячейки. Устарел в HTML5, вместо него следует использовать CSS свойство padding.
border Задает границу ячеек и таблицы. Устарел (но работает), вместо него следует использовать CSS свойство border.

Примеры

Пример

В данном примере создана таблица с ячейками th и td. Также добавлен атрибут border, который задает границу таблице и ее ячейкам (обратите внимание на отступы, которые возникают между ячейками - это результат действия по умолчанию cellspacing):

<table border="1">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Посмотреть пример.

Пример

В первом примере можно было наблюдать расстояние между ячейками, хотя и не был задан атрибут cellspacing (так как он имеет ненулевое значение по умолчанию). Обнулим этот атрибут, чтобы расстояние между ячейками исчезло (при этом станет двойная граница, проблема решается с помощью CSS свойства border-collapse):

<table border="1" cellspacing="0">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Посмотреть пример.