Как уже говорилось в первом уроке «С чего начать?», структуру сайта легко представить в виде таблицы. Рассмотрим эту тему подробнее.

Создать таблицу на нашей страничке можно при помощи тега <table></table>.

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

<table width="100%">
<tr>
<td>Строка 1 Столбец 1</td>
<td>Строка 1 Столбец 2</td>
</tr>
<tr>
<td>Строка 2 Столбец 1</td>
<td>Строка 2 Столбец 2</td>
</tr>
</table>

Из данного кода видно, что столбцы задаются внутри строки.

Вот что у нас получилось:

Теперь раскрасим ячейки в нашей таблице:

<table width="100%">
<tr>
<td bgcolor="#e9f116">Строка 1 Столбец 1</td>
<td >Строка 1 Столбец 2</td>
</tr>
<tr>
<td bgcolor="#fa963e">Строка 2 Столбец 1</td>
<td bgcolor="#e9f116">Строка 2 Столбец 2</td>
</tr>
</table>

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

Чтобы ячейки в таблице не были такими мелкими и в них были отступы от текста, необходимо задать высоту и ширину ячеек.

Если Вы указали высоту/ширину ячейки меньше, чем высота/ширина объекта (текст, картинка) внутри ячейки, то высота/ширина ячейки по умолчанию будет равна высоте/ширине объекта.

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

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

Здесь нужна точность, т.к. могут “съехать” соседние столбцы или строки.

<table>
<tr height="50 px">
<td width="200 px">Строка 1 Столбец 1</td>
<td width="200 px">Строка 1 Столбец 2</td>
</tr>
<tr>
<td>Строка 2 Столбец 1</td>
<td>Строка 2 Столбец 2</td>
</tr>
</table>

Для выравнивания текста/картинок в ячейках таблицы используем уже знакомый нам атрибут align.

Также полезным для нас будет новый атрибут valign, он служит для выравнивания объектов по вертикали. Значения для атрибута следующие: top (выравнивание по верхней границе), bottom (выравнивание по нижней границе), middle (выравнивание по середине).