Создание таблиц 2

Таблицы в HTML

Начало и конец таблицы задаются тегами <table> </table>.
Строки задаются тегами <tr> </tr>
Столбцы задаются тегами <td> </td>

Пример:

<table>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

В Wiki это будет выглядеть так:

Первая ячейка	Вторая ячейка
Третья ячейка	Четвертая ячейка

Рамка

Обозначение рамки

Для обозначения рамки используется тег border.

Пример:

<table border="1">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

В Wiki это будет выглядеть так:

Первая ячейка	Вторая ячейка
Третья ячейка	Четвертая ячейка

Толщина рамки

Вы сами можете менять толщину рамки вокруг таблицу (между ячейками рамка всегда одной толщины): border="1" - самая тонкая рамка, border="10" - самая толстая:

Первая ячейка	Вторая ячейка
Третья ячейка	Четвертая ячейка

Расстояние между ячейками

Для изменения расстояния между соседними ячейками используется тег cellspacing

Пример:

<table border="6" cellspacing="10">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

В Wiki это будет выглядеть так:

Первая ячейка	Вторая ячейка
Третья ячейка	Четвертая ячейка

Расстояние внутри ячеек

Для изменения расстояния внутри ячеек используется тег cellpadding.

Пример:

<table border="6" cellpadding="10">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

В Wiki это будет выглядеть так:

Первая ячейка	Вторая ячейка
Третья ячейка	Четвертая ячейка

Объединение ячеек

По горизонтали

Для объединения ячеек по горизонтали используется тег colspan.

Пример: (объединим первую и вторую ячейки)

<table border="1">
<tr>
<td colspan="2">Первая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

В Wiki это будет выглядеть так:

Первая ячейка
Третья ячейка	Четвертая ячейка

По вертикали

Для объединения ячеек по вертикали используется тег rowspan.

Пример: (объединим первую и третью ячейки)

<table border="1">
<tr>
<td rowspan="2">Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td>
</tr>
</table>

В Wiki это будет выглядеть так:

Первая ячейка	Вторая ячейка
	Четвертая ячейка