В этом небольшом уроке рассмотрим создание таблиц в HTML документе.

Html таблицы полезная штука в сайтостроении. С их помощью делают "каркас" сайта или "каркас" меню.

Обновлено: 5.11.2011

На данный момент таблицы всё меньше используются в HTML, их замещают блоки div, более удобные при вёрстке. Таблицы теперь используются по своему прямому назначению, для вывода табличных данных.

Используемые тэги при создании таблиц в html:

- table (контейнер)

Создаёт таблицу. Имеет атрибут border, определяющий толщину рамки таблицы.

- tr (контейнер)

Создаёт новый ряд в таблице.

- td (контейнер)

Создаёт новую ячейку в ряду. Вот пример:

<table border="1">
<tr>
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Что получится:

То есть сначала создаётся ряд <tr>, а потом ячейки <td>
По умолчанию размер ряда и ячейки зависит от их содержимого.

Теперь попробуем обьединить ячейки в верхнем ряду.

Для этого существует атрибут colspan. По умолчанию значение ="1" Пример:

<table border="1">
<tr>
<td colspan="2">ряд 1 ячейка 1+2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Получится так:

Соединяем ряды в пределах ячейки. Для этого есть атрибут rowspan. По умолчанию тоже ="1"

<table border="1">
<tr>
<td rowspan="2">Ячейка 1, ряд 1+2</td>
<td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td>
</tr>
</table>

Получится вот так:

В принципе не сложно, если что то не понятно просмотрите ещё раз. Я тоже не сразу понял.

Перейти к следующему уроку

Таблицы в HTML. часть 2