Таблицы.

Построение таблиц - это очень важная тема, т.к. таблицы используются не только по своему назначению – для вывода табличных данных, но и для разметки (вёрстки) страниц.

Для построения таблиц используются теги <table></table>. Для того, чтобы мы могли видеть контур таблицы, используется параметр border, значение которого равно 0, т.к. нам нужно видеть контур таблицы его необходимо изменить на 1.

<table border="1">

Между тегами <table></table>, располагаются теги:
<tr></tr> - служит для создания строки таблицы;
<td></td> - предназначен для создания одной ячейки таблицы.

<table border="1">
<tr><td> Строка из одной ячейки </td></tr>
</table>

Разобьём строку на три ячейки:

<table border="1">
<tr>
<td>Ячейка №1</td>
<td>Ячейка №2</td>
<td>Ячейка №3</td>
</tr>
</table>

Как я уже говорил тег <table> имеет параметр border, кроме него есть такие как cellpadding и cellspacing.
cellpadding - отступ от рамки до содержимого ячейки.
cellspacing - расстояние между ячейками.

Таблицы (<table>) и ячейки (<td>), также как и изображение могут иметь размеры: ширину (width) и высоту (heigth).

<table border="1" width="200" height="50">
<tr>
<td>Ячейка №1</td>
<td>Ячейка №2</td>
<td>Ячейка №3</td>
</tr>
</table>

<table border="1">
<tr>
<td width="100" height="30">Ячейка №1</td>
<td>Ячейка №2</td>
<td>Ячейка №3</td>
</tr>
</table>

Для заголовка таблицы служат теги <th></th>, т.е. текст, находящийся в этих ячейках будет жирным и располагаться по середине.

<table border="1">
<tr>
<th>Заголовок №1</th>
<th>Заголовок №2</th>
<th>Заголовок №3</th>
</tr>
<tr>
<td>Ячейка №1</td>
<td>Ячейка №2</td>
<td>Ячейка №3</td>
</tr>
</table>

Обратите внимание, что размеры, заданные для ячейки «Заголовок №1», автоматически применились к «Ячейка №1»

Для объединения горизонтальных или вертикальных ячеек к тегу <td> применяются параметры:
colspan - объединяет горизонтальные ячейки;
rowspan - объединяет вертикальные ячейки.

<table border="1" cellpadding="10">
<tr>
<td>№1</td>
<td>№2</td>
<td>№3</td>
<td rowspan="2">№4</td>
</tr>
<tr>
<td colspen="3">№5</td>
</tr>
</table>

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

Пример

<table border="1" cellpadding="0" cellspacing="0" width="100%" id="table-1">
<tr>
<td width="100%">логотип</td>
</tr>
<tr>
<td width="100%">
<table border="1" cellpadding="0" cellspacing="0" width="100%" id="table-2">
<tr>
<td width="20%" valign="top">>
<ul>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
</ul>

</td>
<td width="50%" valign="top">контент-верх</td>
<td width="30%" valign="top">суб-контент-верх</td>
</tr>
<tr>
<td width="20%">текст</td>
<td width="50%" >контент-низ</td>
<td width="30%">суб-контент-низ</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">подвал</td>
</tr>