ТОП 10:

Гиперссылки на адрес электронной почты



<A href="mailto:mail@mysite.ru">Текст</A>

Таблицы

Листинг 1.7. Структура HTML-таблиц

<TABLE border="1" align="center" 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>

Вставляем таблицу в документ

<TABLE><!-- Здесь сетка не отображается -->

<TABLE border="0"><!-- Здесь сетка не отображается -->

<TABLE border="5"><!-- В этом случае сетка отображается, а толщина рамки вокруг таблицы равна 5 пикселам -->

<TABLE cellspacing="0">

<TABLE cellpadding="2">

<TABLE width="200">

<TABLE width="100%">

<TABLE height="200">

<TABLE height="100%">

<TABLE align="left">

<TABLE align="right">

<TABLE align="center">

<TABLE bgcolor="silver">

<TABLE bgcolor="#C0C0C0">

<TABLE background="foto.gif">

<TABLE background="http://www.mysite.ru/foto.gif">

<TABLE border="2" bordercolor="red">

<TABLE border="2" bordercolor="#FF0000">

Выводим заголовок таблицы

<CAPTION align="top">Заголовок</CAPTION>

<CAPTION align="bottom">Заголовок</CAPTION>

Описываем строку таблицы

<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.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>

Форматируем 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>

Фреймы

Делим окно Web-браузера на несколько областей

Листинг 1.12. HTML-документ содержащий заголовок (doc1.html)

<HTML>

<HEAD>

<TITLE>Заголовок</TITLE>

</HEAD>

<BODY bgcolor="#FFFFFF">

<TABLE border="0" cellspacing="0" width="100%" height="100%">

<TR>

<TD align="center" valign="middle">

<H1>Заголовок</H1>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Листинг 1.13. HTML-документ содержащий панель навигации (doc2.html)

<HTML>

<HEAD>

<TITLE>Панель навигации</TITLE>

</HEAD>

<BODY bgcolor="#FFFFFF">

<BR><H3 align="center">Оглавление</H3>

<UL type="disk">

<LI><A href="charter1.html" target="charter">Глава 1</A>

<LI><A href="charter2.html" target="charter">Глава 2</A>

</UL>

</BODY>

</HTML>

Листинг 1.14. HTML-документ содержащий основное содержание Главы 1 (charter1.html)

<HTML>

<HEAD>

<TITLE>Глава 1</TITLE>

</HEAD>

<BODY bgcolor="#FFFFFF">

<BR><H2 align="center">Глава 1</H2>

<P>Содержание Главы 1</P>

</BODY>

</HTML>

Листинг 1.15. HTML-документ содержащий основное содержание Главы 2 (charter2.html)

<HTML>

<HEAD>

<TITLE>Глава 2</TITLE>

</HEAD>

<BODY bgcolor="#FFFFFF">

<BR><H2 align="center">Глава 2</H2>

<P>Содержание Главы 2</P>

</BODY>

</HTML>

Листинг 1.16. HTML-документ описывающий фреймовую структуру (test.html)

<HTML>

<HEAD>

<TITLE>Пример использования фреймов</TITLE>

</HEAD>

<FRAMESET rows="100, *">

<FRAME src="doc1.html" scrolling="no">

<FRAMESET cols="20%, 80%">

<FRAME src="doc2.html">

<FRAME src="charter1.html" name="charter">

</FRAMESET>

</FRAMESET>

<NOFRAMES>

Ваш Web-браузер не отображает фреймы

</NOFRAMES>

</HTML>

 

<BODY bgcolor="#FFFFFF">

<BODY bgcolor="#C0C0C0">

Структура HTML-документа содержащего фреймы

Листинг 1.17. Структура HTML-документа с фреймами

<HTML>

<HEAD>

<TITLE>Заголовок страницы</TITLE>

</HEAD>

<FRAMESET rows="100, *">

<FRAME>

<FRAMESET cols="20%, 80%">

<FRAME>

<FRAME>

</FRAMESET>

</FRAMESET>

<NOFRAMES>

Ваш Web-браузер не отображает фреймы

</NOFRAMES>

</HTML>







Последнее изменение этой страницы: 2016-08-01; Нарушение авторского права страницы

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 34.237.76.91 (0.012 с.)