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

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

Для создания таблиц в HTML применяется тег < TABLE >, структура записи которого в общем виде следующая:

< TABLE ALIGN =" значение" WIDTH =" значение" BORDER =''целое число" CELLSPACING =" целое число" CELLPADDING =''целое число" >

< TR ALIGN =" значение" VALIGN =" значение" >

< TD ALIGN =" значение" VALIGN =" значение" COLSPAN=" целое число" ROWSPAN =" целое число" НЕIGНТ =" целое число" NOWRAP >

Содержимое ячеек

< / ТD >

< /TR >

< /TABLE >

Основополагающим тегом в блоке описания таблицы является директива < TABLE>, в нее вкладываются все остальные команды блока.

· ALIGN – задает горизонтальное позиционирование всей таблицы в целом, может принимать значения LEFT, RIGHT или CENTER.

· WIDTH – определяет ширину всей таблицы и может принимать значение целого числа, если ширина таблицы указывается в пикселах, либо числа от 1 до 100 с символом «%» (например, «60 %»), если ширина таблицы задается в процентах от ширины экрана пользователя.

· BORDER – указывает на толщину обрамления столбцов и ячеек таблицы в пикселах. Если значение данного атрибута равно нулю, таблица становится «невидимой».

· CELLSPACING – задает промежуток между ячейками в пикселах, a CELLPADDING — промежуток между содержимым ячейки и рамкой вокруг ячейки в пикселах.

В теги < TABLE> < /TABLE> вкладываются теги < TR> и < /TR>, определяющие строки таблицы. Количество данных тегов зависит от реального количества строк.

Команда < TR > использует атрибуты:

· ALIGN – определяет горизонтальное позиционирование содержимого ячейки внутри самой ячейки – LEFT, RIGHT и CENTER.

· VALIGN – задает вертикальное выравнивание содержимого ячейки – TOP, MIDDLE, BOTTOM и BASELINE.

В своеобразный контейнер, образуемый тегами < TR> и < /TR>, вкладываются команды < TD>, описывающие сами ячейки.

Команда < TD > использует атрибуты ALIGN и VALIGN, действие и параметры которых аналогичны таковым для тега < TR>.

Кроме того, тег < TD > оперирует следующими необязательными атрибутами: COLSPAN — число столбцов, перекрываемых ячейкой; ROWSPAN — число строк, перекрываемых ячейкой, HEIGHT — высота ячейки в пикселах и NO WRAP — запрет переноса слов внутри ячейки.

Пример простой таблицы, состоящей из четырех значений одинакового формата.

Такая таблица содержит две строки по две ячейки в каждой, или, другими словами, два элемента < TR>, каждый из которых содержит по два элемента < TD>. Отрывок html-кода, описывающего такую таблицу, можно представить следующим образом:

< TABLE>

< TR>

< TD> A< /TD>

< TD> B< /TD>

< /TR>

< TR>

< TD> C< /TD>

< TD> D< /TD>

< /TR>

< /TABLE>

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

Таблица по-прежнему содержит две строки, однако первая из них включает две ячейки, а нижняя — всего одну. Иными словами при описании второй строки мы должны использовать лишь один элемент < TD>:

< TABLE>

< TR>

< TD> A< /TD>

< TD> B< /TD>

< /TR>

< TR>

< TD> C< /TD>

< /TR>

< /TABLE>

Таблица с ячейками, заполненными текстом, подразумевает использование ряда специфических элементов, таких как заголовок столбца, определяемый тегом < ТН> и заголовок всей таблицы, задаваемый тегом < CAPTION>.

Директива < CAPTION> задает заголовок таблицы в целом. Синтаксис ее записи в общем виде таков:

< CAPTION ALIGN =" значение " > текст заголовка< /САРТION >

Заголовок таблицы всегда позиционируется относительно ее центра, поэтому в качестве значения атрибута ALIGN в данном случае может быть указан параметр ТОР или BOTTOM, с помощью которого разместить заголовок можно либо над таблицей, либо под ней.

Директива < ТН> определяет выделенный жирным шрифтом заголовок каждого столбца таблицы, поясняя его содержимое. В общем виде данный тег записывается следующим образом:

< ТН ALIGN =" значение" VALUE =" значение" WIDTH =" значение" НЕIGНТ =" значение" COLSPAN =" целое число" ROWSPAN =" целое число" NOWRA > содержимое заголовка< /ТН >

· ALIGN – определяет горизонтальное выравнивание заголовка столбца в ячейке,

· VALIGN – вертикальное выравнивание,

· WIDTH – ширину ячейки в пикселах,

· HEIGHT – высоту ячейки,

· COLSPAN – указывает на число столбцов, охваченных ячейкой,

· ROWSPAN – на число охваченных ячейкой строк,

· NOWRAP – запрещает перенос слов внутри ячейки.

По умолчанию значения атрибутов COLSPAN и ROWSPAN равны 1, для заголовка столбцов задается выравнивание по центру ячейки, в отличие от содержимого самих ячеек, определяемых тегом < TD>, оно выравнивается по левому краю столбца.

В качестве простого примера, демонстрирующего механизм применения команд < ТН > и < CAPTION >, привем небольшой отрывок кода HTML:

< TABLE BORDER=" 1" ALIGN=CENTER >

< CAPTION ALIGN =" TОР" > < STRONG> Мои увлечения < /STRONG> < / CAPTION >

< TR>

< TH> Иллюстрации< /TH>

< TH> Пояснения < /TH>

< /TR>

< TR>

< TD> < IMG SRC=" images/AG00154_.gif" ALIGN= MIDDLE А1T=" Маска " > < /TD>

< TD> < EM> Компьютеры< /EM> < /TD>

< /TR>

< TR>

< TD> < IMG SRC=" images/AG00139_.gif" ALIGN= MIDDLE А1T=" КакTус " > < /TD>

< TD> < EM> Цветоводство < /EM> < /TD>

< /TR>

< TR>

< TD> < IMG SRC=" images/PH01255G.gif" ALIGN= MIDDLE А1T=" Маяк " > < /TD>

< TD> < EM> Путешествия< /EM> < /TD>

< /TR>

< /TABLE>

Внешний вид таблицы, получившейся в результате обработки приведенного выше кода интерпретатором броузера, показан на рисунке 5.

Рис. 5. Внешний вид таблицы с текстовыми ячейками

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

C: \Program Files\Microsoft Office\CLIPART\ PUB60COR. Выберите любой файл с расширением .gif и скопируйте его в папку Images, чтобы затем ссылаться на него.

Содержание отчета

1. Тема и цель.

2. Распечатка страницы.

3. Распечатка исходного HTML – кода.