Таблицы. Таблицы являются очень удобным средством форматирования данных на Web-станице

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

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

< TABLE> < /table> - внешний элемент талицы.

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

< TD> < /td> - элемент, задающий ячеку таблицы. Конечный тег также можно не использовать.

Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов:

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

Например, если нам нужно здать таблицу определенного размера, то мы укажем:

< TABLE width=" 500" >

< TR>

< TD> Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца.< /td>

< /tr>

< /table>

Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора (800х600, 1024 х 768, 1280 х 1024) у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы как 100%.

< TABLE width=" 100%" >

< TR>

< TD> Ширина этой таблицы 100%.< /td>

< TD> и она состоит из одной строки и двух столбцов < /td>

< /tr>

< /table>

Для всей таблицы может быть задан цвет фона: bgcolor=" Цвет" или bgcolor=" #RRGGBB", например:

< TABLE width=" 100%" bgcolor=" #00CC99" >

< TR>

< TD> Ширина этой таблицы 50%.< /td>

< /tr>

< TR>

< TD> и она состоит из двух строк и одного стобца < /td>

< /tr>

< /table>

Можно задавать отдельно цвет ячеек таблицы.

table width=" 600" border=" 1" cellspacing=" 0" cellpadding=" 5" align=" center" >
< tr>
< td bgcolor=" #00FFFF" > < /td>
< td bgcolor=" #CCFF00" > < /td>
< td bgcolor=" #FF6633" > < /td>
< /tr>
< tr>
< td bgcolor=" #0000FF" > < /td>
< td bgcolor=" #33FF66" > < /td>
< td bgcolor=" #FF00FF" > < /td>
< /tr>
< tr>
< td bgcolor=" #CCCCCC" > < /td>
< td bgcolor=" #9933FF" > < /td>
< td bgcolor=" #FFFFCC" > < /td>
< /tr>
< /table>

Шириной боковой грани управляет атрибут border. Можно задать ширину боковой грани таблицы в пикселах.

< TABLE width=" 100%" bgcolor=" #00CC99" border=" 3" >

< TR>

< TD> < /td>

< TD> Ширина этой таблицы 300 пикселов< /td>

< TD> < /td>

< /tr>

< TR>

< TD> и она состоит из двух строк и трех столбцов< /td>

< TD> < /td>

< TD> < /td>

< /tr>

< /table>

Можно сделать грани таблицы невидимыми, для этого ширину бордюра таблицы нужно задать равной 0:

< TABLE width=" 100%" bgcolor=" #00CC99" border=" 0" >

< TR>

< TD> < /td>

< TD> Ширина этой таблицы 300 пикселов< /td>

< TD> < /td>

< /tr>

< TR>

< TD> и она состоит из двух строк и трех столбцов< /td>

< TD> < /td>

< TD> < /td>

< /tr>

< /table>

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

left - выравнивание влево;

right - выравнивание вправо;

center - центрирование.

Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:

top - выравнивание по верхнему краю ячейки

center - выравнивание по центру

baseline - выравнивание по первой строке.

< table width=" 100%" border=" 1" cellspacing=" 0" cellpadding=" 5" align=" center" >
< tr> < td width=" 257" > Выравнивание по горизонтали< /td>
< td width=" 233" align=" center" >
По центру
< /td>
< td width=" 217" align=" left" >
По левому краю
< /td>
< td width=" 246" align=" right" >
По правому краю
< /td>
< /tr>
< tr>
< td width=" 257" height=" 112" > Выравнивание по вертикали< /td>
< td width=" 233" height=" 112" valign=" top" > По верхнему краю< /td>
< td width=" 217" height=" 112" valign=" middle" > По центру< /td>
< td width=" 246" height=" 112" valign=" baseline" > По нижнему краю< /td>
< /tr>
< /table>