Руины:

Глава седьмая - таблицы

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

Ячейка №1	Ячейка №2
Ячейка №3	Ячейка №4

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

Итак как вы поняли тэг задающий таблицу <table>, а закрывающий </table>. В нашем примере тэг для таблицы написан сразу с параметрами. Перечислю основные параметры которые можно применять к тэгу <table>:

height="число либо %" - задает высоту таблицы в пикселях либо в процентах от размера окна

width="число либо число%" - задает ширину таблицы

border="число" - задает толщину рамки, по умолчанию 0 (без рамки)

align="left,right либо center" - определяет расположение таблицы в документе (прижата к левому краю, либо по центру и т.д.)

bgcolor="цвет" - цвет фона таблицы

Теперь обратите внимание на тэг <tr>. Он определяет горизонтальную строку в таблице, и закрывает ее </tr>. Тэг <td> определяет столбец. Таким образом мы в нашем примере задали строку тэгом <tr> и разбили ее на две ячейки тэгом <td>:

<tr>
<td>Ячейка №1</td>
<td>Ячейка №2</td>
</tr>

Далее как вы можете видеть в нашем примере мы задали еще строку и разбили ее на 2 части (ячейки). Для строк и ячеек также есть свои параметры:

align="left (right, center)" - задает выравнивание текста в строке (ячейке) по левому краю (правому краю, центру)

valign="top (center, bottom) - задает вертикальное выравнивание для текста по верхнему краю (центру, нижнему краю соответственно)

bgcolor="цвет" - устанавливает цвет фона строки или ячейки

Например если бы в нашем примере было бы много текста, то задав для первого тэга <tr> следующие значение параметра align
<tr align="left">
мы бы выровняли текст в ячейках №1 и №2 по левому краю.

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

<table width="100%">
<tr>
<td width="200">Тут ссылки</td>
<td>Тут основной текст</td>
</tr>
</table>

Итак мы создали таблицу без рамки шириной во все окно (<table width="100%">), высота же определится автоматически в зависимости от заполнения таблицы. Для первой колонки (в которой ссылки) мы поставили ширину 200 пикселей (<td width="200">), вторая же колонка у нас шириной до конца экрана. Попробуем сделать страничку (назовите ее tables.html к примеру) с помощью таблицы с ссылками на другие наши страницы:

Посмотрите что должно получится: пример

Текст в колонке нельзя выровнять по-ширине с помощью этого параметра (только по-центру или левому/правому краю), поэтому можно выровнять текст по ширине с помощью параграфа (смотри Главу Третью), заключив его между <p align="justify"> и </p>.

У ячеек есть еще два важных параметра:

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

rowspan="число" - растягивание ячейки по строке

Например <td colspan="2"> означает что ячейка будет растянута по горизонтали на две колонки.

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

<table width="100%">
<tr>
<td width="200">Ссылка 1</td>
<td width="200">Ссылка 2</td>
<td width="200">Ссылка 3</td>
</tr>
<tr>
<td colspan="3">Основной текст</td>
</tr>
</table>

Мы первую строку разбиваем на 3 ячейки, вторая строка у нас получается уже как бы поделенная на три части (хоть у нас и одна ячейка во второй строке). Поэтому чтоб текст не располагался столбиком в треть экрана а занимал всю ширину мы написали для нижней ячейки <td colspan="3"> - растянули ее на три колонки.

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

Глава восьмая