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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cols - отображаются вертикальные части рамки

 

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

<tableheight=200 border=2 align=rightbgcolor=#ccccffcellspacing=10 cellpadding=5>

<captionalign=top><h3>Пример таблицы c графикой и ссылками </caption></h3>

<TR bgcolor=#ffff00>

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

</TR>

<TR>

<td>Ячейка1-1</td><td>&nbsp </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>

<img src="images/car.jpg"> – описываетизображение car.jpg, отображаемоевячейкетаблицы

 

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

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

Атрибут Alignв теге <TR> обеспечивает горизонтальное и вертикальное выравнивание содержимого всего ряда.

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

 

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

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

Пример.

<table align=left width=350 height=300 border=6frame=box rules=allbgcolor=#ccccff

cellspacing=8 bordercolorlight=#ffffffbordercolordark=#666666>

<colgroup align=center span=2>

<colgroup align=right>>

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

<TR bgcolor=#ffff00>

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

</TR >

<tr align=center>

<tdalign=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>

Составные ячейки

Несколько ячеек можно объединять в одну как по горизонтали, так и по вертикали.

Атрибут COLSPAN= объединяет несколько ячеек в ряду в одну широкую ячейку.

Атрибут ROWSPAN= объединяет несколько ячеек по высоте в одну высокую ячейку.

Пример 3

<tablealign=center width=300 border=2 bgcolor = ccccff>

<caption><font size=4 color=#aa0000>Примерсоставнойтаблицы!</caption>

<tr bgcolor =#ffee00>

<TH width=35% >Заголовок 1</TH><th colspan=2 >Заголовок 2</th>

</tr>

<tr>

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

</tr>

<tr>

<td>Ячейка2-1<br></td><td colspan=2>Ячейка2-2</td>

</tr>

<tr>

<td>Ячейка3-1</td><td rowspan=2 align=center bgcolor=#ffee33>Ячейка3-2</td><td>Ячейка3-3</td>

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

<td colspan=3 align=center bgcolor=#ffee00>Конецсоставнойтаблицы!</td>

</tr>

</table>