Табличная верстка

Прежде чем вы начнете создавать таблицу, продумайте хорошенько ее вид, размер, количество ячеек, цвет фона и вид границ. Для этого можно ее нарисовать на компьютере или на бумаге, художником для этого быть не нужно, достаточно простого схематичного рисунка.

Теги таблиц

<table> открывающий тег таблицы
</table> закрывающий тег таблицы

<tr>тег - начало строки
эти теги создают новый ряд (строку) ячеек
</tr> тег - конец строки

<th> открывающий тег ячейки
содержимое ячейки - table header (заголовок таблицы)
текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован
</th> закрывающий тег ячейки

<td> открывающий тег ячейки
содержимое ячейки
</td> закрывающий тег ячейки

Атрибуты

width - ширина таблицы указывается в "%" или в пикселях "800"

border - толщина рамки

cellspacing - расстояние между ячейками

cellpadding - расстояние между рамкой ячейки и текстом

align - выравнивание по горизонтали ( слева="left" центр="center" справа="right" )

valign - выравнивание по вертикали ( верх="top" середина="middle" низ="bottom" )

colspan - количество ячеек по горизонтали

rowspan - количество ячеек по вертикали

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

Таблица с одной ячейкой

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Ячейка </td>
</tr>
</table>

Результат

Таблица может включать заголовок, который располагается между тегами <caption>Таблица</caption>

Таблица с тремя ячейками (строки)

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<caption>Заголовок</caption>
<tr>
<td>Это ячейка № 1</td>
</tr>
<tr>
<td>Это ячейка № 2</td>
</tr>
<tr>
<td>Это ячейка № 3</td>
</tr>
</table>

Результат

Если до и после тегов <td> </td> не ставить теги <tr> </tr> ячейки будут располагаться горизонтально

Таблица с тремя ячейками (столбцы)

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Это ячейка № 1</td>
<td>Это ячейка № 2</td>
<td>Это ячейка № 3</td>
</tr>
</table>

Результат

Таблица (три строки) + (три столбца)

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33%">1</td>
<td width="33%">01</td>
<td width="34%">001</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">02</td>
<td width="34%">002</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">03</td>
<td width="34%">003</td>
</tr>
</table>

Результат

Чтобы содержимое ячеек не касалось границ, изменяйте значение параметра cellpadding

Отступ

<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td width="33%">1</td>
<td width="33%">01</td>
<td width="34%">001</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">02</td>
<td width="34%">002</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">03</td>
<td width="34%">003</td>
</tr>
</table>

Результат

При измении значения параметра cellspacing меняется внешний вид таблицы

cellspacing

<table border="1" cellpadding="5" cellspacing="10" width="100%">
<tr>
<td width="33%">1</td>
<td width="33%">01</td>
<td width="34%">001</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">02</td>
<td width="34%">002</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">03</td>
<td width="34%">003</td>
</tr>
</table>

Результат

Также можно вставлять в таблицу еще одну, две и т.д. таблицы, вообщем столько, сколько нужно.

Вложенные таблицы

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%">логотип</td>
</tr>
<tr>
<td width="100%">

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<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>
</table>

Результат

CSS (Таблицы Каскадных Стилей)

Делая таблицы для своих страниц, лучше избегать вставок background'ов и т.д.. Используйте для этого CSS. Добавив таблице, ячейке class (class="...") или id (id="..."), можно будет управлять их внешним видом, используя CSS.