3. Фон таблицы и ячеек

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

<TABLE border=5 bordercolor=blue bgcolor=grey>,

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

<TABLE border=5 bordercolor=blue> <!--Начало таблицы-->

<TR align=center bgcolor=red><!--Начало первой строки таблицы-->

<TD>

ФИО

</TD>

<TD>

Дата рождения

</TD>

</TR>

<TR bgcolor=green> <!--Начало второй строки таблицы-->

<TD>

Орлов Н.Л.

</TD>

<TD>

12.03.1970

</TD>

</TR>

<TR> <!--Начало третьей строки таблицы-->

<TD>

Яковлев В.К.

</TD>

<TD>

05.06.1981

</TD>

</TR>

</TABLE> <!--Конец таблицы-->

Если необходимо, чтобы фоном таблицы было какое-то графическое изображение, тогда в теге <TABLE> используется параметр background, значением которого является путь доступа к нужному файлу, например:

…

<TABLE border=5 bordercolor=blue background="C:/Мои документы/kletka.gif"> <!--Начало таблицы-->

<TR align=center><!--Начало первой строки-->

…

3. Шрифт таблицы и ячеек

Чтобы изменить шрифт текста во всей таблице, достаточно до использования тега <TABLE> записать тег <FONT> с соответствующим типом шрифта, например:

<FONT face=Verdana><TABLE border=5 bordercolor=blue>

…

</TABLE> </FONT>

Если же необходимо изменить шрифт, цвет и размер текста в отдельных ячейках таблицы, то необходимо тег <FONT> записать в том месте, где необходимо изменение указанных параметров, например:

<TABLE border=5 bordercolor=blue>

<TR align=center bgcolor=red>

<TD> <FONT face=Verdana size=5 color=blue> ФИО </FONT> </TD>

<TD> <FONT face=Verdana size=5 color=blue> Дата рождения</FONT> </TD>

</TR>

…

3. Объединение ячеек

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

Времена года
зима	весна	лето	осень

или

Зима	декабрь
	январь
	февраль
Весна	март
	апрель
	май

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

Для слияния смежных ячеек, находящихся в одной строке, используется параметр colspan, для слияния смежных ячеек одного столбца – параметр rowspan. Эти параметры указываются в теге <TD> объединенной ячейки. Значениями этих параметров являются целые числа, обозначающие количество объединяемых ячеек.

Приведем пример HTML-кода для получения первой таблицы.

…

<TABLE border=1> <!--Начало таблицы-->

<TR> <!--Начало первой строки-->

<TD colspan=4 align=center>

Времена года

</TD>

</TR>

<TR> <!--Начало второй строки-->

<TD> зима </TD>

<TD> весна</TD>

<TD> лето </TD>

<TD> осень</TD>

</TR>

</TABLE> <!--Конец таблицы-->

</HTML>

Теперь запишем HTML-код для второй таблицы.

…

<TABLE border=1> <!--Начало таблицы-->

<TR>

<TD rowspan=3 align=center>

Зима

</TD>

<TD> декабрь</TD>

</TR>

<TR>

<TD> январь</TD>

</TR>

<TR>

<TD> февраль </TD>

</TR>

<TR>

<TD rowspan=3 align=center>

Весна

</TD>

<TD> март</TD>

</TR>

<TR>

<TD> апрель</TD>

</TR>

<TR>

<TD> май </TD>

</TR>

</TABLE> <!--Конец таблицы-->