Лабораторная работа №4. Организация текста внутри html-документов с помощью таблиц Элементы html для построения таблиц

Для создания таблицы используется элемент TABLE. Атрибут border в открывающем теге <TABLE> делает видимой рамку таблицы и сетку, разделяющую строки и столбцы. Между открывающим <TABLE> и закрывающим </TABLE> тегами для построения таблицы размещаются парные теги следующих элементов:

1. CAPTION

Текст, отмеченный тегами <CAPTION> и </CAPTION> этого элемента, выводится в виде заголовка таблицы.

2. TR

Теги <TR> и </TR> определяют каждую строку таблицы.

3. TH

Теги <TH> и </TH> маркируют заголовки строки или столбца для отображения немного более крупным и полужирным текстом.

4. TD

Пара тегов <TD> и </TD> отделяет текст каждой ячейки (пересечения строки и столбца) таблицы.

Пример листинга таблицы в элементах html

<TABLE border=3 bgcolor="gold">

<CAPTION>Информация о ценах на компьютеры </CAPTION>

<TR>

<TH>Процессор</TH>

<TH>ОЗУ (Мб)</TH>

<TH>Винчестер (Гб)</TH>

<TH>Цена (у.е.)</TH>

</TR>

<TR>

<TD>Celeron</TD>

<TD>256 </TD>

<TD>40 </TD>

<TD>400</TD>

</TR>

<TR>

<TD>Celeron</TD>

<TD>512</TD>

<TD>40 </TD>

<TD>420</TD>

</TR>

<TR>

<TD>Pentium</TD>

<TD>256 </TD>

<TD>40 </TD>

<TD>440</TD>

</TR>

<TR>

<TD>Pentium</TD>

<TD>512</TD>

<TD>40 </TD>

<TD>460</TD>

</TR>

</TABLE>

Отображение записи таблицы браузером:

Информация о ценах на компьютеры
Процессор	ОЗУ (Мб)	Винчестер (Гб)	Цена (у.е.)
Celeron	256	40	400
Celeron	512	80	420
Pentium	256	40	440
Pentium	512	80	460

Дополнительные возможности при построении таблиц

При создании таблиц можно реализовать следующие возможности:

Объединение нескольких строк в одну ячейку

Если одна ячейка должна занимать несколько строк таблицы, используется атрибут rowspan в элементе TD или TH. Например, чтобы ячека занимала две строки rowspan=2.

Пример таблицы с объединением нескольких строк:

Информация о ценах на компьютеры
Процессор	ОЗУ (Мб)	Винчестер (Гб)	Цена (у.е.)
Celeron	256	40	400
	512	80	420

Запись таблицы примет вид:

<TABLE BORDER>

<CAPTION> Информация о ценах на компьютеры </CAPTION>

<TR>

<TH> Процессор </TH>

<TH> ОЗУ (Мб) </TH>

<TH> Винчестер (Гб) </TH>

<TH> Цена (у.е.) </TH>

</TR>

<TR>

<TD rowspan=2> Celeron </TD>

<TD> 256 </TD>

<TD> 40 </TD>

<TD> 400 </TD>

</TR>

<TR>

<TD> 512 </TD>

<TD> 80 </TD

<TD> 420 </TD>

</TR>

</TABLE>

Объединение нескольких столбцов в одну ячейку

Чтобы распространить ячейку на любое количество столбцов, используется атрибут colspan в элементе TН или TD. Например, чтобы ячейка занимала два столбца colspan=2.

Пример таблицы с объединением нескольких столбцов:

Информация о ценах на компьютеры
Конфигурация			Цена (у.е.)
Процессор	ОЗУ (Мб)	Винчестер (Гб)
Celeron	256	40	400
	512	80	420

Запись таблицы примет вид:

<TABLE BORDER>

<CAPTION> Информация о ценах на компьютеры </CAPTION>

<TR>

<TH colspan=3> Конфигурация </TH>

<TH rowspan=2> Цена (у.е.) </TH>

</TR>

<TR>

<TH> Процессор </TH>

<TH> ОЗУ (Мб) </TH>

<TH> Винчестер (Гб)</TH>

</TR>

<TR>

<TD rowspan=2> Celeron</TD>

<TD> 256 </TD>

<TD> 40 </TD>

<TD> 400 </TD>

</TR>

<TR>

<TD> 512 </TD>

<TD> 80 </TD>

<TD> 420 </TD>

</TR>

</TABLE>