Интернет программирование стр.9

В HTML-тексте таблица помещается между тэгами <table> и </table>. Между этими тэгами последовательно описывается каждая строка таблицы, заключаемая в тэги <tr> и </tr>, а уже внутри каждой строки описываются ячейки столбцов. Причем столбцы всегда должны находиться в обрамлении тэгов <td> и </td>. Например, следующая конструкция воспроизводит матрицу размером 3 на 3, состоящую из цифр от 1 до 9.

<table> <tr>

<td> 1</td> <td> 2</td> <td> 3</td> </tr> <tr>

<td> 4</td> <td> 5</td> <td> 6</td> </tr> <tr>

<td> 7</td> <td> 8</td> <td> 9</td> </tr> </table>

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

Листинг 1.5. Файл 1-5.html

<html> <head> <Т1ТЪЕ>Таблица!</TITLE>

С/НЕАЕ» <BODY>

<TABLE ALIGN=LEFT B0RDER=3 WIDTH=70ce> <TR>

<TD> 1</TD> <TD> 2</TD> <TD> 3</TD> </TR> <TR>

<TD> 4</TD> <TD> 5</TD> <TD> 6</TD> </TR> <TR>

<TD> 7</TD> <TD> 8</TD> <TD> 9</TD> </TR> </TABLE> </BODY> </HTML>

Результат просмотра этого файла в браузере показан на рис. 1.5.

Рис. 1.5. Окно браузера с результатом просмотра файла, приведенного в листинге 1.5

Рис. 1.5. Окно браузера с результатом просмотра файла, приведенного в листинге 1.5

Как видно, в тэге table параметр align задает выравнивание таблицы по левому краю окна браузера, параметр border задает ширину границы таблицы (в пикселах), a width задает ширину таблицы в пикселах, или, как в нашем случае, в процентах от ширины окна браузера.

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

Листинг 1.6. Файл 1-6.html

<HTML> <HEAD>

<Т1ТЬЕ>Таблица!</TITLE> </HEAD> <BODY> <TABLE B0RDER=3>

<CAPTION ALIGN=bo11om> Таблица №1 </CAPTION> <TRXTDX/TDXTH>PoCT</THXTH>Bec</THX/TR>

<TRXTD>Cama</TDXTD AL I GN= cen t e r > 17 0 < / T DXT D AL I GN= cent e r >7 5 < / T DX / TR> <TRXTD>Mama</TDXTD AL I GN= cen t e r > 16 8 < / T DXT D AL I GN= cent e r >5 7 < / T DX / TR> </TABLE> </BODY> </HTML>

Результат представлен на рис. 1.6.

Рис. 1.6. Окно браузера с результатом просмотра файла, приведенного в листинге 1.6

Рис. 1.6. Окно браузера с результатом просмотра файла, приведенного в листинге 1.6

Теперь рассмотрим параметры всех упомянутых тэгов. Для всех тэгов существует параметр align, принимающий значения left, right, center и justify, который задает выравнивание объекта по левому или правому краю, по центру и по левому и правому краю одновременно. Кроме него, существует схожий по действию параметр valign, задающий выравнивание по вертикали. Он имеет значения top, middle, bottom и baseline для верти кального выравнивания объекта по верхней границе, по центру, по нижней границе и по базовой линии текста соответственно. Параметр bordercolor задает цвет границы объекта. Параметры bordercolordark и bordercolorlight задают темный и светлый цвета для трехмерного изображения рамки вокруг объекта.


⇐ вернуться назад| |читать дальше ⇒


*