Заголовок таблицы можно сформировать с помощью тэга-контейнера <CAPTION>, располагаемом в любом месте внутри тэгов <TABLE> и </TABLE>. По умолчанию текст заголовка таблицы располагается над ней (align=top) и центрируется в горизонтальном направлении.
Параметр align может принимать значения bottom, left, center и right. Для возможности одновременного выравнивания по горизонтали и вертикали введен параметр valign, принимающий значения top и bottom. Например (рис. 1.4.1):
<HTML>
<HEAD>
<TITLE>Пример таблицы с заголовком</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="70%">
<CAPTION align="left" valign="bottom">Население городов</CAPTION>
<TR><TH>Город</TH><TH>Население</TH></TR>
<TR><TD>Москва</TD><TD>10 400 000</TD></TR>
<TR><TD>Санкт-Петербург</TD><TD>4 600 000</TD></TR>
<TR><TD>Ростов-на-Дону</TD><TD>1 100 000</TD></TR>
</TABLE>
</BODY>
</HTML>
Рис. 1.4.1. Горизонтальное
и вертикальное выравнивание
заголовка таблицы
Тэг <TABLE> имеет следующие параметры:
1) border – определяет ширину рамки вокруг таблицы в пикселях. Наличие этого параметра задает рамки вокруг каждой ячейки таблицы. По умолчанию рамки ячеек отсутствуют;
2) cellspacing – указывает расстояние между смежными рамками ячеек в пикселях. По умолчанию значение данного параметра равно 2;
3) cellpadding – определяет интервал между рамкой и данными ячейки в пикселя. По умолчанию значение параметра равно 1;
4) width – указывает ширину таблицы в пикселях или процентах от размера окна. По умолчанию ширина таблицы автоматически вычисляется браузером;
5) height – определяет высоту таблицы в пикселях или процентах от размера окна. По умолчанию высота таблицы автоматически вычисляется браузером;
6) align – задает горизонтальное расположение таблицы в окне браузера. Значение параметра left определяет выравнивание таблицы по левому краю окна, величина right – по правому краю, center – по центру окна. По умолчанию таблица выровнена по левому краю окна;
7) summary – предоставляет краткую информацию о назначении и структуре таблицы;
8) bgcolor – устанавливает цвет фона ячеек таблицы;
9) frame – показывает, какая часть внешней рамки будет видимой. Параметр имеет допустимые значения: box или border — рамка рисуется со всех четырех сторон, above — только с верхней стороны, below — только с нижней стороны, hsides — рисуется нижняя и верхняя сторона, vsides — рисуется левая и правая сторона, lhs — только с левой стороны, rhs — только с правой стороны, void — таблица без внешних рамок;
10) rules управляет прорисовкой внутренних линий сетки таблицы и может принимать следующие значения: all — рисуются все внутренние линии, groups — рисуются только линии, разделяющие группы, rows — рисуются линии, разделяющие строки, cols — рисуются линии, разделяющие столбцы, none — внутренние линии не рисуются.
Тэг <TR> имеет следующие параметры:
1) align – задает горизонтальное расположение данных в строке таблицы. Значение параметра left определяет выравнивание данных по левому краю ячеек, величина right – по правому краю, center – по центру, justify – по обоим краям;
2) valign – указывает вертикальное расположение данных в строке таблицы. Значение параметра top определяет выравнивание данных по верхнему краю ячеек, величина bottom – по нижнему краю, middle – по вертикальному центру, baseline – по базовой линии. По умолчанию данные выровнены по вертикальному центру;
3) nowrap – отключает возможность автоматического разбиения текста на строки в ячейках;
4) bgcolor – устанавливает цвет фона ячеек строки таблицы.
Тэги <TH> и <TD> имеют следующие параметры:
1) align – задает горизонтальное расположение данных ячейки таблицы. Значение параметра left определяет выравнивание данных по левому краю ячейки, величина right – по правому краю, center – по центру, justify – по обоим краям. По умолчанию содержимое ячейки выровнено по левому краю;
2) valign – указывает вертикальное расположение данных ячейки таблицы. Значение параметра top определяет выравнивание данных по верхнему краю ячейки, величина bottom – по нижнему краю, middle – по вертикальному центру, baseline – по базовой линии. По умолчанию содержимое ячейки выровнено по вертикальному центру;
3) nowrap – отключает возможность автоматического разбиения текста на строки в ячейке;
4) bgcolor – устанавливает цвет фона ячейки таблицы;
5) width – указывает рекомендуемую ширину ячейки таблицы в пикселях;
6) height – определяет рекомендуемую высоту ячейки таблицы в пикселях;
7) colspan – указывает число столбцов, на которые нужно расширить ячейку;
8) rowspan – определяет число строк, на которые необходимо расширить ячейку;
9) headers – указывает список ячеек заголовков, предоставляющих заголовочную информацию для текущей ячейки;
10) scope – определяет набор ячеек данных, для которых заголовочная информация задается текущим заголовком. Значения: row – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в строке, col – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в столбце, rowgroup – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в группе строк, colgroup – текущая ячейка содержит заголовок, предоставляемый следующим ячейкам в группе столбцов;
11) abbr – указывает сокращенную форму содержимого ячейки.
Пример использования параметров border, width, align, summary тэга <TABLE> (рис. 1.4.2):
HEAD>
<TITLE>Table: border, width, align, summary</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="50%" align="center"
summary="This table contains information about people population in cities.">
<TR><TH>Город</TH><TH>Население</TH></TR>
<TR><TD>Москва</TD><TD>8 400 000</TD></TR>
<TR><TD>Санкт-Петербург</TD><TD>4 600.000</TD></TR>
<TR><TD>Ростов-на-Дону</TD><TD>4 600.000</TD></TR>
</TABLE>
</BODY>
</HTML>
 |
Рис. 1.4.2. Внешний вид
таблицы
Пример изменения цвета фона таблицы, строк и ячеек с помощью параметра bgcolor (рис. 1.4.3):
<HTML>
<HEAD><TITLE>Table: bgcolor</TITLE></HEAD>
<BODY>
<TABLE bgcolor="#EEEEEE" border="1">
<TR bgcolor="blue"> <TH><FONT color="white">City</FONT ></TH>
<TH><FONT color="white">Population</FONT ></TH>
</TR>
<TR bgcolor="green"><TD>Москва</TD><TD>8 400 000</TD></TR>
<TR>
<TD>Санкт-Петербург</TD><TD bgcolor="yellow">4 600 000</TD></TR>
<TR><TD bgcolor="red">Ростов-на-Дону</TD><TD>1 100 000</TD></TR>
</TABLE>
</BODY>
</HTML>
Рис. 1.4.3. Использование параметра
bgcolor
Пример таблицы без сетки (рис. 1.4.4):
<HTML>
<HEAD><TITLE>Table: border, cellspacing Ё cellpadding</TITLE></HEAD>
<BODY>
<TABLE border="0" cellspacing="0" cellpadding="0" width="200">
<TR bgcolor="#AAAAFF"><TH>Город</TH><TH>Население</TH>
<TR bgcolor="#DDDDDD"><TD>Москва</TD><TD>8 400 000</TD>
<TR bgcolor="#AAAAFF"><TD>Санкт-Петербург</TD><TD>4 600 000</TD>
<TR bgcolor="#DDDDDD"><TD>Ростов-на-Дону</TD><TD>1 100 000</TD>
</TABLE>
</BODY>
</HTML>
 |
Рис. 1.4.4. Таблица без сетки
с чередующимся цветом фона для строк
Пример использования параметра frame (рис. 1.4.5):
<HTML>
<HEAD><TITLE>Table: frame</TITLE></HEAD>
<BODY>
<TABLE border="1" cellspacing="1" cellpadding="0" frame="above">
<TR><TH>Город</TH><TH>Население</TH></TR>
<TR><TD>Москва</TD><TD>8 400 000</TD></TR>
<TR><TD>Санкт-Петербург</TD><TD>4 600 000</TD></TR>
<TR><TD>Ростов-на-Дону</TD><TD>1 100 000</TD></TR>
</TABLE>
</BODY>
</HTML>
 |
Рис.1.4.5. Таблица со значением параметра
frame равным above
Пример использования параметров rowspan и colspan (рис. 1.4.6):
<HTML>
<HEAD><TITLE>Table: colspan and rowspan</TITLE></HEAD>
<BODY>
<TABLE border="1" width="70%">
<TR><TH>Город</TH><TH>Население</TH>
<TH> Всего </TH></TR>
<TR><TD>Москва</TD><TD>8 400.000</TD><TD rowspan="3">14 100 000</TD></TR>
<TR><TD>Санкт-Петербург</TD><TD>4 600 000</TD></TR>
<TR><TD>Ростов-на-Дону</TD><TD>1 100 000</TD></TR>
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 |
