Пример 10. Простейшие таблицы
<head>
<title>Оформление таблиц</title>
</head>
<body>
<TABLE Border>
<CAPTION>ТАБЛИЦА №1
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания размеров ячеек</TD>
</TR>
</TABLE> <BR>
<TABLE BORDER=3>
<CAPTION>ТАБЛИЦА №2
<TR>
<TD WIDTH=50>
ширина ячейки 50 пикселей</TD>
<TD WIDTH=100>
ширина ячейки 100 пикселей</TD>
<TD WIDTH=150>
ширина ячейки 150 пикселей</TD>
</TR>
</TABLE>
</body>
</html>
Этот файл создает в броузере две таблицы, содержащие одну строку и три столбца. Для первой таблицы размеры не определены. Она занимает всю ширину окна броузера. Для второй – ширина столбцов задана 50, 100 и 150 пикселей. Кроме того, у второй таблицы задана толщина рамки – 3 пикселя. Вид этих таблиц в броузере показан на рис. 8.9.
Рис. 8.9. Вид таблиц (пример 8) в броузере
Пример 11. Таблица, содержащая объединенные ячейки
<html>
<head>
<title>Оформление таблиц</title>
</head>
<body>
<TABLE BORDER=7 CELLSPACING=0 WIDTH=500
HEIGHT=100 ALIGN=CENTER BGCOLOR=YELLOW>
<CAPTION>ТАБЛИЦА №3 Ширина ячеек задана в % от ширины таблицы
<TR ALIGN=CENTER>
<TD WIDTH=20%>Ширина ячейки 20% </TD>
<TD WIDTH=50%>Ширина ячейки 50% </TD>
<TD WIDTH=30%>Ширина ячейки 30% </TD>
</TR>
<TR>
<TD ALIGN=CENTER COLSPAN=3>Объединенная ячейка (COLSPAN=3)
</TD>
</TR>
</TABLE>
</body>
</html>
Для этой таблицы заданы размеры: ширина (WIDTH) – 500 пикселей, высота (HEIGHT) – 100 пикселей, толщина рамки таблицы – 7 пикселей; выравнивание таблицы по центру страницы (см. рис. 8.10).
Рис. 8.10. Таблица с объединенными ячейками
Фон таблицы задан желтого цвета. Ширина ячеек задается в процентах от ширины таблицы. Таблица содержит две строки. В первой строке три столбца. Вторая строка имеет объединенные ячейки, т.е. все три столбца объединены в один.
8.9. Рисунки в html-документах
Рисунки (фото) имеют большое значение в оформлении Web-документов. Графика оживляет Web-страницу, помогает сделать ее интуитивно более понятной, нескучной для просмотра, позволяет быстрее ориентироваться в тексте. Удачно подобранные рисунки – хороший способ заинтересовать читающего, привлечь его внимание к наиболее важным разделам документа. Единственная трудность при работе с графикой в том, что она загружается дольше, чем тысячи слов текста. Поэтому для обеспечения быстродействия нужно уменьшать размеры графических файлов.
Графика или изображения в HTML определяются тегом <IMG>, который имеет несколько атрибутов. Общий синтаксис встроенной картинки следующий:
<IMG SCR=URL файла картинки>.
Атрибуты тега img
SCR=url - определяет URL для файла изображения. Броузеры (например, Internet Explorer) поддерживают несколько графических форматов: GIF, JPG,BMP.
ALIGN=тип_выравнивания – определяет выравнивание текста относительно изображения. Возможные значения:
TOP – текст располагается на уровне верхней части изображения;
MIDDLE - текст располагается на уровне средней части изображения;
CENTER - текст располагается на уровне центральной части изображения;
BOTTOM - текст располагается на уровне нижней части изображения;
LEFT – изображение располагается слева по отношению к обтекающему тексту;
RIGHT - изображение располагается справа по отношению к обтекающему тексту.
ALT=текст – задает альтернативный текст, который будет виден на экране, если рисунок не загружен. Этот текст является также текстом всплывающих подсказок. Очень важно, чтобы при наличии на странице рисунков для них был задан альтернативный текст. Некоторые пользователи для ускорения процесса загрузки страниц в своем броузере устанавливают опцию Do not load images (не загружать рисунки). При этом наличие альтернативного текста позволяет без затруднения знакомиться с содержимым узла.
Border=n – задает толщину рамки вокруг рисунка в пикселях. Рамка отображается на экране только в том случае, если изображение является гиперссылкой (о гиперссылках подробнее см. ниже п. 8.9).
HEIGHT=n и WIDTH=n – высота и ширина изображения в пикселях. Если эти параметры заданы, то броузер перед загрузкой изображения обычно рисует пустой прямоугольник. Если его размеры отличны от фактических размеров рисунка, то изображение растягивается или сжимается в соответствии с указанными границами.
HSPACE=n и VSPACE=n – задают размеры полей вокруг рисунка в пикселях.