4. Таблицы.

• Создание таблиц

• Параметры таблицы

• Параметры ячеек

• Упражнение

Создание таблиц

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

Для добавления таблицы на веб-страницу используется тег <table>. Таблица должна содержать хотя бы одну строку и колонку. Задать ширину таблицы можно в пикселах и процентах. Значение, заданное в пикселах, является фиксированным значением. В этом примере ширина всегда будет занимать 250 пикселов в окне браузера.

<table width="250"> </table>

Пример самой простой таблицы, имеющей всего одну строку и одну колонку:

Привет :-)

Эта табличка в виде кода выглядит так:

<table border=1 width="250"> <tr>   <td>   Привет :-)   </td> </tr> </table>

Для добавления строк используются теги <tr> и </tr>. Чтобы разделить строки на колонки применяются теги <td> и </td>. Таблица с двумя колонками (используем теги <td> и </td>):

Привет :-)

Пока!

Она имеет следующий код:

<table border=1> <tr>   <td>  Привет :-)</td>   <td>  Пока!      </td> </tr> </table>

Для добавления строк используем теги <tr> и </tr> Данная таблица имеет две стоки и два столбца:

Весна	Лето
Зима	Осень

Код таблицы будет выглядеть следующим образом:

<table> <tr>   <td>Весна</td>   <td>Лето</td> </tr> <tr>    <td>Зима</td>    <td>Осень</td> </tr> </table>

Параметры таблицы

Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге <table> <table параметр1=... параметр2=...>

Параметр	Значение	Описание	Пример	Смотрите
align=	left right center	Выравнивание таблицы	align=center
width=	n n%	Минимальная ширина таблицы, можно задавать в пикселах или процентах	width=50%
height=	n n%	Минимальная высота таблицы, можно задавать в пикселах или процентах	height=50%
background=	URL	Фоновый рисунок	background=pic.gif
bgcolor=	#rrggbb	Цвет фона таблицы	bgcolor=#FF9900 bgcolor=yellow
border=	n	Толщина рамки в пикселах	border=8
bordercolor=	#rrggbb	Цвет рамки	bordercolor=#FE0202
cellpadding=	n	Расстояние между ячейкой и ее содержимым	cellpadding=7
cellspacing=	n	Дистанция между ячейками	cellspacing=15
frame=	void above below lhs rhs hsides vsides box	Задание типа рамки таблицы	frame=hsides

Параметры ячеек

С помощью параметров ячеек можно изменять вид и оформление таблиц. Параметры, которые могут быть добавлены к тегам <tr> и <td>.

Параметр	Значение	Описание	Пример	Смотрите
align=	left right center	Выравнивание содержимого ячейки	align=center
background=	URL	Устанавливает фоновый рисунок в ячейке	background=pic.gif
bgcolor=	#rrggbb	Цвет фона ячейки	bgcolor=#FF9900
valign=	top bottom	Выравнивание содержимого ячейки по высоте	valign=top
width=	n n%	Минимальная ширина ячейки, можно задавать в пикселах или процентах	width=30%
height=	n n%	Минимальная высота ячейки, можно задавать в пикселах или процентах	height=30%

Параметры, которые могут быть добавлены только к тегу <td>.

Параметр	Значение	Описание	Пример	Смотрите
colspan=	n	Устанавливает размер ячейки относительно ниже расположенных колонок; colspan=2 означает, что ширина ячейки будет соответствовать ширине двух колонок.	colspan=2
rowspan=	n	Размер ячеек по вертикали относительно строк. rowspan=2 устанавливает, что высота ячейки соответствует высоте двух строк	rowspan=2

Пример таблицы.

Времена года	Весна	Лето
	Осень	Зима

Рассмотрим ее код:

<table border=5 bordercolor=#FAD0D0 cellpadding=7 width=40%> <tr>    <td rowspan=2 align=center><b>Времена года</b></td>    <td width=20%>Весна</td>    <td width=20%>Лето</td> </tr> <tr>   <td>Осень</td>    <td>Зима</td> </tr> </table>

В данном случае было задано для всей таблицы:

 border=5 - толщина рамки таблицы в 5 пикселей;

 bordercolor=#FAD0D0 - цвет рамки таблицы розовый;

 cellpadding=7 - расстояние между ячейками и их содержимым;

 width=40% - ширина таблицы в процентах от всего окна браузера; Для ячеек

 width=20% - ширина ячейки от всей ширины таблицы. Ширина ячейки "Весна" будет равна ширине ячейки "Осень".

 align=center - размещение текста по центру. По умолчанию текст в ячейке будет расположен слева.

 rowspan=2 - задание высоты ячейки "Времена года" в две строки.