Определение структуры и цветовое оформление таблиц

Атрибут BGCOLOR=… тега <TABLE> задает цвет фона всей таблицы, а атрибут BGCOLOR=… тега <TR> определяет цвет фона текущей строки таб­лицы. Аналогично в теге <TD> можно задать цвет фона отдельной ячейки.

Атрибут bordercolor=… задает цвет всей рамки.

Атрибут bordercolorlight=… задает цвет светлой стороны рамки.

Атрибут bordercolordark=… задает цвет темной стороны рамки.

Атрибут cellspacing=… задает расстояние между ячейками таблицы.

Атрибут cellpadding=… задает расстояние между рамкой таблицы и ее содержимым.

Атрибут frame=… определяет форму внешней рамки таблицы:

– vsides – отображаются только вертикальные линии;

– hsides – отображаются только горизонтальные линии;

– box – отображается вся рамка.

Атрибут rules=… определяет форму рамок внутри таблицы:

– all – отображаются все части рамки внутри таблицы;

– rows – отображаются горизонтальные части рамки;

– сols – отображаются вертикальные части рамки.

Рассмотрим пример таблицы, содержащей графику.

Пример 2.

<table height=”200” border=”2” align=”right”

bgcolor=”#ccccff” cellspacing=”10” cellpadding=”5”>

<caption align=”top”><h3> Таблица c графикой и ссылками></h3>

</caption>

<TR bgcolor=”#ffff00”>

<TH> Колонка 1 </th> <TH> Колонка 2 </th> <TH> Колонка 3 </th>

</tr>

<TR>

<td> Ячейка 1-1</td> <TD> Ячейка 1- 2 </td>

<TD><IMG SRC="images/car.jpg"> </td>

</tr>

<TR>

<TD> Ячейка 2-1</td> <TD> Ячейка2-2 </td> <TD> Ячейка 2-3</td>

</tr>

<TR>

<TD> <A HREF="test-2.htm"> <IMG SRC="images/cat.jpg"> </a> </td>

<TD> Ячейка 3-2 </td> <TD> Ячейка 3-3 </td>

</tr>

</table>

5.1.2. Выравнивание в таблицах

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

Атрибуты Align и Valign в теге <TR> обеспечивают горизонтальное и вертикальное выравнивание содержимого всего ряда. При этом тег Valign может принимать значения TOP, BOTTOM, CENTER (см. выше).

Если нужно сделать горизонтальное и вертикальное выравнивание в отдель­ных ячейках, это делают атрибутами Align и VALIGN в тегах <TH> и <TD>.

Тег <COLGROUP> распространяет действие выравнивания (атрибут Align=…) в одной ячейке на весь столбец.

Атрибут объединения Span=… распространяет действие тега <COL­GROUP> на несколько столбцов.

Пример 3.

<table align=”left” width=”350” height=”300” border=”6”

frame=”box” rules=”all” bgcolor=”#ccccff” cellspacing=”8’

bordercolorlight=”#ffffff“ bordercolordark=”#666666”>

<colgroup align=”center” bgcolor=”#ffffff” span=”2”>

<colgroup align=”right” bgcolor=”#9999ff”>

<caption align=”left”> <H3> Пример простой таблицы /h3> </caption>

<TR bgcolor=”#ffff00”>

<TH> Колонка 1</th> <TH> Колонка 2</th> <TH align=”center”>

Колонка 3 </th>

</tr>

<TR Valign=”center”>

<TD align=”top”>Ячейка 1-1</td><TD> Ячейка 1-2</td>

<TD> Ячейка 1-3 </td>

</tr>

<TR>

<TD> Ячейка 2-1 </td> <TD> Ячейка 2-2</td> <TD> Ячейка 2-3 </td>

</tr>

<TR>

<TD> Ячейка 3-1 </td> <TD> Ячейка 3-2 </td> <TD> Ячейка 3-3 </td>

</tr>

</table>.