Определение структуры и цветовое оформление таблиц
Атрибут 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>  </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>