Two Pilots - учебные странички

Уроки HTML

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>

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

<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

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

Параметр	Значение	Описание	Пример	Смотрите
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%

Параметр	Значение	Описание	Пример	Смотрите
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>