<TR><TD colspan="2" align="right"> Всего 14 100 000</TD></TR>
</TABLE>
</BODY>
</HTML>
 |
Рис.1.4.6. Использование
rowspan и colspan для
объединения ячеек
Тэги структурирования таблицы <THEAD>, <TBODY>,<TFOOT>
Тэги <THEAD>, <TBODY> и <TFOOT > более строго задают структуру описания таблицы, выделяя ячейки заголовка таблицы, основное содержимое таблицы и итоговую строку. Эти тэги могут встречаться только в описании таблиц внутри пары тэгов <TABLE> и </TABLE>.
Тэги <THEAD> и <TFOOT> используются для описания верхнего и нижнего колонтитулов таблицы. Эти тэги могут встречаться в таблице не более одного раза. Завершающий тэг для них можно опускать. Использование данных тэгов удобно при создании больших таблиц, выходящих за пределы одной страницы.
Тэг <TBODY> может встречаться многократно в описании таблицы, при этом требуется использование завершающего тэга </TBODY>. Этот тэг выполняет логическое группирование данных так же, как и тэг <COLGROUP>, выполняющий группирование смежных столбцов.
Тэги <THEAD>, <TBODY> и <TFOOT> имеют одинаковый набор параметров:
1) align – задает горизонтальное расположение данных в ячейках. Значение атрибута left определяет выравнивание данных по левому краю ячеек, величина right – по правому краю, center – по центру, justify – по обоим краям;
2) valign – указывает вертикальное расположение данных в ячейках. Значение атрибута top определяет выравнивание данных по верхнему краю ячеек, величина bottom – по нижнему краю, middle – по вертикальному центру, baseline – по базовой линии. По умолчанию данные выровнены по вертикальному центру;
3) bgcolor – цвет фона строк и ячеек таблицы, помещенных в эти тэги.
Пример использования тэгов <THEAD>, <TBODY> и <TFOOT> (рис. 1.4.7):
<HTML>
<HEAD><TITLE>Tags THEAD, TBODY and TFOOT</TITLE></HEAD>
<BODY>
<TABLE border="1" width="70%" rules="groups">
<THEAD>
<TR><TH>Город<TH>Население
<TFOOT>
<TR><TD>Всего<TD>14 100 000
<TBODY>
<TR><TD>Москва<TD>8 400 000
<TR><TD>Санкт-Петербург<TD>4 600 000
<TBODY>
<TR><TD>Ростов-на-Дону<TD>1 100 000
</TABLE>
</BODY>
</HTML>
 |
Рис. 1.4.7. Результат использования тэгов <THEAD>, <TBODY> и <TFOOT>
Выравнивание данных в столбцах таблицы
Характерной проблемой при создании таблиц является задание параметров выравнивания для отдельных строк или столбцов. Для выравнивания содержимого всех ячеек текущей строки достаточно задать требуемые параметры в коде <TR>. Однако чаще необходимо обеспечить одинаковое выравнивание для всех элементов одного столбца, так как в большинстве случаев в столбце располагаются однородные данные. Для этого предусмотрены специальные тэги <COL> и <COLGROUP>, которые должны располагаться сразу же за описанием <TABLE> перед первым появлением тэга <TR>.
Параметрами тэгов <COL> и <COLGROUP> могут быть span, определяющий количество смежных колонок, на которые распространяется действие значений параметров, и align, определяющий горизонтальное выравнивание данных во всех ячейках соответствующего столбца (или столбцов). Допустимыми значениями параметра align являются left, right и center. для параметра span значение по умолчанию равно единице.
Тэг <COLGROUP> дополнительно позволяет задавать параметр valign, определяющий вертикальное выравнивание данных в ячейках. Допустимыми значениями параметра valign являются middle, top и bottom.
Различие между тэгами <COLGROUP> и <COL> заключается в том, что первый из них, помимо задания параметров выравнивания данных для столбцов, выполняет также условное объединение нескольких столбцов в группу. Эффект такого объединения проявляется при использовании параметра rules, который описывается ниже. По умолчанию все столбцы таблицы считаются одной группой. Тэг <COL> должен использоваться только для определения выравнивания данных в отдельных столбцах в группе.
Пример использования тэгов <COLGROUP> и <COL> (рис. 1.4.8.):
<HTML>
<HEAD>
<TITLE>Table: headers and axis</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="400" rules="groups">
<COLGROUP width="130">
<COL width="100%">
<COLGROUP span="3" width="*">
<COL width="*" align="center">
<COL width="*" align="center">
<THEAD>
<TR bgcolor="lightblue">
<TH>Город<TH> Население города<TH>Население с пригородами
<TBODY>
<TR>
<TD id="city1">Москва<TD headers="city1 popCity">8 400 000
<TD headers="city1 popWithSub">14 500 000
<TR>
<TD id="city2">Санкт-Петербург<TD headers="city2 popCity">4 600.000<TD headers="city2 popWithSub">7 200 000
<TR>
<TD id="city3"> Ростов-на-Дону<TD headers="city3 popCity">1 100 000<TD headers="city3 popWithSub">1 900 000
</TABLE>
</BODY>
</HTML>
 |
Рис. 1.4.8. Результат использования тэгов <COLGROUP> и <COL>
1.5 Графика
Фоновые изображения
Можно управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Для задания цвета фона используется параметр bgcolor тэга <BODY>, а фоновое изображение включается в документ при помощи параметра background. В качестве значения параметра bgcolor указывается название цвета или его компоненты в шестнадцатеричном коде. В качестве фонового изображения должен использоваться графический файл формата GIF или JPG. Названия стандартных цветов и их шестнадцатеричное представление приведено в приложении 2.
Фоновое изображение для HTML-документа всегда заполняет все окно просмотра. Если размер изображения меньше размеров окна просмотра, то оно будет размножено по принципу мозаики. Поэтому фоновые изображения должны создаваться так, чтобы при появлении на экране границы сшивки повторяющихся изображений были бы невидимы. Обычно в качестве фонового берется небольшое изображение, для загрузки которого по сети не требуется значительного времени.
Пример записи тэга <BODY> с указанием фонового цвета и фонового изображения:
<BODY background=texture. gif bgcolor=gray>
Встраивание изображений в HTML-документы
Для встраивания изображений в HTML-документ следует использовать тэг <IMG>, имеющий единственный обязательный параметр src, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения:
<IMG src=picture. gif>
Данный тэг может иметь ряд параметров, обсуждение которых дается ниже.
Выравнивание изображений
При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра align тэга <IMG>.
Возможные значения этого параметра:
тор – верхняя граница изображения выравнивается по самому высокому элементу текущей строки;
техттор – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки;
middle – выравнивание середины изображения по базовой линии текущей строки;
absmiddle – выравнивание середины изображения посередине текущей строки;
baseline или bottom – выравнивание нижней границы изображения по базовой линии текущей строки;
absbottom – выравнивание нижней границы изображения по нижней границе текущей строки;
left – изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны;
right – изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны.
Все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения параметра – left и right. При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с противоположной стороны. Текст, размещаемый рядом с изображением, может занимать несколько строчек. К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой строки текста, правда, достаточно большой (типа буквицы).
Пример HTML-кода, в котором используются изображения, как
элемент строки (рис. 1.5.1).
<HTML>
<TITLE>Выравнивание изображений</TITLE>
<BODY>
Выравнивание<IMG src=square. gif align=”top”>no верхнему краю
<Р> Выравнивание no<IMG src = square. gif align=Ьазе1iпе>базовой линии
</BODY>
</HTML>
 |
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 |
