- •1.6.3. Вложенные списки
- •1.7. Графика
- •1.7.1. Вставляем изображение в Web-страницу
- •1.8.3. Гиперссылки на адрес электронной почты
- •1.9. Таблицы
- •1.9.1. Вставляем таблицу в документ
- •1.9.2. Выводим заголовок таблицы
- •1.9.3. Описываем строку таблицы
- •1.9.4. Описываем каждую ячейку таблицы
- •1.9.5. Форматируем Web-страницу при помощи таблиц
- •1.10. Фреймы
- •1.10.1. Делим окно Web-браузера на несколько областей
- •1.10.2. Структура html-документа содержащего фреймы
- •1.10.3. Описываем фреймовую структуру
- •1.10.4. Описываем отдельную область
- •1.10.6. Загружаем документ в определенный фрейм
- •1.11. Карты-изображения
- •1.11.1. Создаем панель навигации при помощи карт-изображений
- •1.11.2. Структура карт-изображений
- •1.11.4. Описываем активную область на карте-изображении
- •1.12. Формы
- •1.12.1. Создаем форму для регистрации сайта
- •1.12.2. Структура документа с формами
- •1.12.3. Вставляем форму в документ
- •1.13.2. Создаем панель навигации
- •1.13.3. Создаем формы для ввода данных
1.9.2. Выводим заголовок таблицы
<CAPTION align="top">Заголовок</CAPTION>
<CAPTION align="bottom">Заголовок</CAPTION>
1.9.3. Описываем строку таблицы
<TR align="left">
<TR align="right">
<TR align="center">
<TR align="justify">
<TR valign="top">
<TR valign="middle">
<TR valign="bottom">
<TR valign="baseline">
1.9.4. Описываем каждую ячейку таблицы
Листинг 1.8. Объединение ячеек по горизонтали
<TABLE border="1" align="center" width="200">
<CAPTION>Заголовок таблицы<CAPTION>
<TR>
<TD align="center" colspan="2">1 и 2 объединены</TD>
</TR>
<TR>
<TD align="center">3</TD>
<TD align="center">4</TD>
</TD>
</TR>
</TABLE>
<TD align="center">1</TD>
<TD align="center" colspan="2">1 и 2 объединены</TD>
<TD align="center">2</TD>
Листинг 1.9. Объединение ячеек по вертикали
<TABLE border="1" align="center" width="200">
<CAPTION>Заголовок таблицы<CAPTION>
<TR>
<TD align="center" rowspan="2">1 и 3 объединены</TD>
<TD align="center">2</TD>
</TR>
<TR>
<TD align="center">4</TD>
</TD>
</TR>
</TABLE>
<TD align="center">1</TD>
<TD align="center" rowspan="2">1 и 3 объединены</TD>
<TD align="center">3</TD>
1.9.5. Форматируем Web-страницу при помощи таблиц
Листинг 1.10. Форматирование Web-страницы при помощи таблиц
<HTML>
<HEAD>
<TITLE>Форматирование Web-страниц при помощи таблиц</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<TABLE border="0" cellspacing="0" cellpadding="5" width="100%" height="100%">
<!-- Таблица полностью заполняет всю страницу -->
<TR>
<TD align="center" colspan="3" height="100" bgcolor="silver">
<FONT size="5" face="Tahoma" color="red"><B>"Шапка" документа</B></FONT>
</TD>
</TR>
<TR valign="top">
<TD width="180">
<!-- Эта ячейка содержит панель навигации -->
<BR><H3 align="center">Оглавление</H3>
<UL type="disk">
<LI><A href="charter1.html">Глава 1</A>
<LI><A href="charter2.html">Глава 2</A>
<LI><A href="charter3.html">Глава 3</A>
<LI><A href="charter4.html">Глава 4</A>
</UL>
</TD>
<TD align="center">
<!-- Эта ячейка содержит основную часть страницы -->
<BR><H2>Глава 1</H2>
<P>Содержание Главы 1</P>
<!-- А это пример вложенности таблиц -->
<TABLE border="1" width="200">
<CAPTION>Заголовок таблицы<CAPTION>
<TR>
<TD align="center">1</TD>
<TD align="center">2</TD>
</TR>
<TR>
<TD align="center">3</TD>
<TD align="center">4</TD>
</TD>
</TR>
</TABLE>
</TD>
<TD align="center" width="150">
<!-- Эта ячейка содержит изображение -->
<BR>
<IMG src="foto.gif" width="120" height="240" border="0" alt="Текст подсказки">
</TD>
</TR>
<TR>
<TD align="center" colspan="3" height="50" bgcolor="silver">
<!-- Эта ячейка содержит информацию об авторе -->
Авторские права
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<BODY bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
Листинг 1.11. Выравнивание элемента Web-страницы по центру
<HTML>
<HEAD>
<TITLE>Форматирование Web-страниц при помощи таблиц</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<TABLE border="0" cellspacing="0" width="100%" height="100%">
<TR>
<TD align="center" valign="middle">
<B>Текст в центре окна</B>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>