Шаг №6 Таблицы

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

<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>

Более сложный пример таблицы. В ней две строки по две ячейки в каждой.

<table border="1">
<tr>
<td >ваш текст</td>
<td >ваш текст2</td>
</tr>
<tr>
<td >ваш текст3</td>
<td>ваш текст4</td>
</tr>
</table>

Атрибут border - это толщина окантовки таблицы, значение задается в пикселях. Между тегами <td></td> пишем текст который будет располагаться внутри одной ячейки. Итак чтобы построить таблицу обозначаем ее тегами <table></table>, затем прописываем строку тегом <tr> и внутри его прописываем ячейку тегами <td></td> и закрываем строку тегом </tr>.

В таблице можно задать фон каждой ячейки. Для этого прописываем уже знакомый нам атрибут bgcolor в тег <td>.

<table border="1">
<tr>
<td bgcolor="FF0000">ваш текст</td>
<td bgcolor="green">ваш текст2</td>
</tr>
<tr>
<td bgcolor="aqva">ваш текст3</td>
<td bgcolor="grey">ваш текст4</td>
</tr>
</table>

А вот эта самая таблица в браузере:

Напомню, что цвета можно задавать как буквенным названием цвета, так и числовым.
Мы также можем задать высоту и ширину каждой ячейки, знакомыми нам атрибутами height и width.

<table border="1">
<tr>
<td bgcolor="FF0000"  height="40" width="90" >ваш текст</td>
<td bgcolor="green" width="50">ваш текст2</td>
</tr>
<tr>
<td bgcolor="aqva" height="40" width="90" >ваш текст3</td>
<td bgcolor="grey" width="90" >ваш текст4</td>
</tr>
</table>

Высота (height) задается только один раз потому что, если вы в ряду задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. Так что не имеет смысла указывать высоту второй раз. Кстати, можно задавать сразу размер таблицы, тогда размеры всех ячеек станут одинаковыми.

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

<table>
<tr>
<td bgcolor="FF0000"  height="40" width="90" colspan="2" rowspan="2">ваш текст</td>
</tr>
<tr>
<td bgcolor="aqva" height="40" width="90" >ваш текст3</td>
<td bgcolor="grey" width="90" >ваш текст4</td>
</tr>
</table>

Сellspacing - атрибут, который задает расстояние между ячейками. Чтобы убрать это расстояние ставим значение 0.
Сellpadding - добавляет пространство по бокам, сверху и снизу.
Пример:

<table Сellspacing="4" Сellpadding="3">
<tr>
<td bgcolor="FF0000"  height="40" width="90" colspan="2" rowspan="2">ваш текст</td>
</tr>
<tr>
<td bgcolor="aqva" height="40" width="90" >ваш текст3</td>
<td bgcolor="grey" width="90" >ваш текст4</td>
</tr>
</table>

Текст в таблицах выравнивается атрибутом valing со значениями:
valing="top"- текст находится вверху
valing="bottom" - текст находится внизу. По умолчанию текст выравнивается посередине.