Таблицы HTML

Таблица состоит из множества маленьких ячеек, которые расположены в определенном порядке. У них много строк и столбцов. Расположение, состоящее из строк и столбцов, называется таблицей, и таблицы определяются тегом table.

Пример таблицы HTML:

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

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

<table　border="1"　width="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

Таблицы HTML

Таблица определяется тегом <table>. Каждая таблица имеет несколько строк (определяемых тегом <tr>), и каждая строка разделена на несколько ячеек (определяемых тегом <td>). Буква 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>

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

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

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

Используйте атрибут рамки для отображения таблицы с рамкой:

<table border="1">
　　　　<tr>
　　　　　　　　<td>Строка 1, столбец 1</td>
　　　　　　　　<td>Строка 1, столбец 2</td>
　　　　</tr>
</table>

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

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

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

<table border="1">
　　　　<tr>
　　　　　　　　<th>Заголовок один</th>
　　　　　　　　<th>Заголовок два</th>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>Строка 1, столбец 1</td>
　　　　　　　　<td>Строка 1, столбец 2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>Строка 2, столбец 1</td>
　　　　　　　　<td>Строка 2, столбец 2</td>
　　　　</tr>
</table>

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

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

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

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

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

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

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

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

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

Теги HTML таблицы