Таблицы HTML

Вы можете создавать таблицы с помощью HTML.

Пример

Таблица
Этот пример демонстрирует, как создавать таблицы в документе HTML.
Рамки таблицы
Этот пример демонстрирует различные типы рамок таблицы.

(Более примеров можно найти в нижней части страницы)

Таблица

Таблицы определяются тегом <table>. Каждая таблица имеет несколько строк (определяемых тегом <tr>), каждая строка делится на несколько ячеек (определяемых тегом <td>). Letter td означает данные таблицы (table data), то есть содержимое ячеек данных. Ячейки данных могут содержать текст, изображения, списки, абзацы, формы, горизонтальные линии, таблицы и т.д.

<table border="1">
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td>строка 2, ячейка 1</td>
<td>строка 2, ячейка 2</td>
</tr>
</table>

В браузере будет отображаться следующим образом:

строка 1, ячейка 1 строка 1, ячейка 2
строка 2, ячейка 1 строка 2, ячейка 2

Таблицы и атрибут рамки

Если не определить атрибут рамки, таблица не будет отображать рамку. Иногда это полезно, но в большинстве случаев мы хотим отображать рамку.

Используйте атрибут рамки, чтобы отобразить таблицу с рамкой:

<table border="1">
<tr>
<td>Строка 1, ячейка 1</td>
<td>Строка 1, ячейка 2</td>
</tr>
</table>

Заголовки таблицы

Заголовки таблицы определяются тегом <th>.

Большинство браузеров будут отображать заголовки таблицы как жирный текст по центру:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td>строка 2, ячейка 1</td>
<td>строка 2, ячейка 2</td>
</tr>
</table>

В браузере будет отображаться следующим образом:

Heading Another Heading
строка 1, ячейка 1 строка 1, ячейка 2
строка 2, ячейка 1 строка 2, ячейка 2

Пустые ячейки в таблице

В некоторых браузерах таблицы без содержимого отображаются не очень хорошо. Если ячейка пуста (нет содержимого), браузер может не показать рамку этой ячейки.

<table border="1">
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td></td>
<td>строка 2, ячейка 2</td>
</tr>
</table>

Браузер может отображаться следующим образом:

Пустые ячейки в таблице

Внимание:Эта пустая ячейка рамку не показывает. Чтобы избежать这种情况, добавьте пустой маркер-заполнитель в пустые ячейки, чтобы рамка была видна.

<table border="1">
<tr>
<td>строка 1, ячейка 1</td>
<td>строка 1, ячейка 2</td>
</tr>
<tr>
<td> </td>
<td>строка 2, ячейка 2</td>
</tr>
</table>

В браузере будет отображаться следующим образом:

строка 1, ячейка 1 строка 1, ячейка 2
  строка 2, ячейка 2

Более примеров

Таблица без рамки
Этот пример показывает таблицу без рамки.
Заголовки таблицы (Heading)
Этот пример показывает, как отображать заголовки таблицы.
Пустые ячейки
Этот пример показывает, как обрабатывать ячейки таблицы без содержимого с помощью " ".
Таблица с заголовком
Этот пример показывает таблицу с заголовком (caption).
Ячейки таблицы,跨越多行或多列
Этот пример показывает, как определить таблицу с跨越多行或多 столбцов ячеек.
Тэги в таблице
Этот пример показывает, как отображать элементы в различных элементах.
Отступ между ячейками (Cell padding)
Этот пример показывает, как использовать "Cell padding" для создания пустого пространства между содержимым ячеек и их рамкой.
Интервал между ячейками (Cell spacing)
Этот пример показывает, как использовать "Cell spacing" для увеличения расстояния между ячейками.
Добавление фонового цвета или изображения к таблице
Этот пример показывает, как добавить фоновый цвет или изображение к таблице.
Добавление фонового цвета или изображения к ячейкам таблицы
Этот пример показывает, как добавить фоновый цвет или изображение к одной или нескольким ячейкам таблицы.
Выравнивание содержимого ячеек таблицы
Этот пример показывает, как использовать атрибут "align" для выравнивания содержимого ячеек, чтобы создать красивую таблицу.
Атрибут рамки (frame)
Этот пример показывает, как использовать атрибут "frame" для управления рамкой вокруг таблицы.

Тэг таблицы

Таблица Описание
<table> Определяет таблицу.
<caption> Определяет заголовок таблицы.
<th> Определяет заголовок таблицы.
<tr> Определяет строку таблицы.
<td> Определяет ячейку таблицы.
<thead> Определяет верхний колонтитул таблицы.
<tbody> Определяет тело таблицы.
<tfoot> Определяет нижний колонтитул таблицы.
<col> Определяет атрибуты, используемые для столбцов таблицы.
<colgroup> Определяет группу столбцов таблицы.