HTML Списки и таблицы

Списки подразделяются на ненумерованные, создаваемые с тегом <UL>,
и нумерованные, создаваемые с тегом OL:

<!–пример # 8: ненумерованные и нумерованные списки–>

<HTML><HEAD>

<TITLE>Использование списков </TITLE></HEAD>

<BODY>

<CENTER><H3>Домашняя страница </H3></CENTER>

<h4>Ненумерованный список: Мои интересы:</h4>

<UL>

<LH><B>Занятия в свободное время:</B></LH>

<LI> Компьютеры

<LI> Чтение книг

<LI> Бассейн

<LI> Отдых на природе

</UL> <HR>

<H4> Нумерованный (упорядоченный) список.</H4>

<OL TYPE=1>

<LH><B>Мое путешествие</B></LH>

<LI> Прибытие в Варшаву

<LI> Автобусом в Будапешт

<LI> Самолетом в Рим

</OL> <HR>

<OL TYPE=A>

<LH><B>Продолжение путешествия</B></LH>

<LI> Автобусом в Берлин

<LI> Поездом в Варшаву

<LI> Пешком в Минск

</OL> <HR>

</BODY></HTML>

Атрибуты ненумерованного списка: type="disk | circle | square". Атрибут нумерованного списка start – устанавливает число, с которого будет начинаться отсчет. При этом вид нумерации устанавливается аргументом TYPE: TYPE=1 – стандартная нумерация 1,2,3,4…; TYPE=A – прописные буквы A, B, C, D…; TYPE=a – строчные буквы a,b,c,d…; TYPE=I – римские цифры I, II, III, IV…; TYPE=i – строчные римские цифры i,ii,iii,iv,v….

Еще один вид списков – списки определений DL – состоит из пар элементов: определяемого <DT> и определения <DD>.

<!–пример #9: списки определений–>

<HTML><HEAD>

<TITLE>Использование списков</TITLE></HEAD>

<BODY> <CENTER><H2> Толковый словарь</H2></CENTER><HR>

<DL>

<LH><Big><B> Cписок терминов</B></Big></LH><HR>

<DT><B>"Anchor"</B>

<DD><I>То, что образовывает гипертекстовую ссылку</I>

<DT><B>"Lamer"</B>

<DD><I> Юзер-идиот</I>

<DT><B>"Cookies "</B>

<DD><I>Технология, позволяющая сохранять индивидуальную информацию о пользователе сети</I> </DL>

</BODY></HTML>

Для создания таблиц используются следующие теги HTML: <TABLE> и </TABLE> – охватывают таблицу. Для того чтобы была видна сетка, разделяющая строки и столбцы, используется атрибут BORDER (например: <TABLE BORDER=1>). Текст в тегах <CAPTION> и </CAPTION> выводится в виде заголовка. В тегах <TH> и </TH> помещаются заголовки столбцов или строк. Теги <TR> и </TR> определяют каждую строку таблицы. Теги <TD> и </TD> определяют текст каждой ячейки таблицы.

<!–пример # 10: простая таблица–>

<HTML><HEAD>

<TITLE>Использование таблиц</TITLE>

</HEAD><BODY>

<TABLE BORDER>

<CAPTION ALIGN=top>Лучшие нападающие года</CAPTION>

<TR>

<TH>Имя</TH>

<TH>Команда</TH>

<TH>Очки</TH>

</TR>

<TR>

<TD>Small </TD>

<TD> Барселона</TD>

<TD>5</TD>

</TR>

<TR>

<TD>Superman</TD>

<TD> Dinamo</TD>

<TD>10</TD>

</TR>

</TABLE></BODY></HTML>

Чтобы ячейка занимала две строки вместо одной, можно заменить тег на следующий: <TD ROWSPAN=2> </TD>. Аналогично два столбца можно объеди­нить с помощью тега <TH COLSPAN=2> или <TD COLSPAN=2>. Изменить цвет в таблице можно с помощью аргумента BGCOLOR, как в следующем примере:

<!–пример # 11: изменение цвета–>

<HTML><HEAD>

<TITLE> Таблицы </TITLE></HEAD>

<BODY bgcolor="white">

<CENTER><FONT size=6>Примеры таблиц</font></center>

<HR color="blue">

<TABLE border=4 cellspacing=3>

<CAPTION><B>Стандартная таблица<B> </caption>

<TR><TH bgcolor="yellow">Заголовок 1

<TH bgcolor="yellow">Заголовок 2

<TR><TD>Ячейка 1

<TD>Ячейка 2

<TR><TD>Ячейка 3

<TD>Ячейка 4

</TABLE>

<HR color="blue">

<TABLE border="4" cellspacing=3 background="fon01.gif">

<CAPTION>Таблица с объединенными ячейками и фоновым

рисунком</caption>

<TR><TH rowspan="2">&nbsp;<TH colspan="2">Заголовок 1

<TR><TH>Заголовок 1.1<TH>Заголовок 1.2

<TR><TH>Заголовок 2<TD>Ячейка 1<TD>Ячейка 2

<TR><TH>Заголовок 3<TD>Ячейка 3<TD>Ячейка 4

</TABLE>

<HR color="blue">

<H2>Использование элементов THEAD, TBODY и TFOOT</h2>

<TABLE border=2>

<THEAD>

<TR> <TD>Заголовок 1<TD>Заголовок 2

<TFOOT>

<TR> <TD>Нижний блок таблицы<TD>&nbsp;

<TBODY>

<TR> <TD>Строка 1 <TD>Ячейка 1.2

<TR> <TD>Строка 2 <TD>Ячейка 2.2

<TBODY>

<TR> <TD>Строка 3 <TD>Ячейка 3.2

<TR> <TD>Строка 4 <TD>Ячейка 4.2

<TR> <TD>Строка 5 <TD>Ячейка 5.2

</TABLE>

<HR color="blue">

<H2>Объединение ячеек</h2>

<TABLE border=4 cellspacing=0 width=70%>

<TR><TD bgcolor="yellow"><B>Заголовок 1</b>

<TD bgcolor="yellow"><B>Заголовок 2</b>

<TR><TD rowspan=3 bgcolor="lime">Ячейка 1

<TD>Ячейка 2

<TR><TD>Ячейка 3

<TR><TD>Ячейка 4

<TR><TD colspan=2 bgcolor="aqua" align="center">Ячейка 5

</TABLE>

<HR color="blue">

<H2>Вложенная таблица</h2>

<TABLE border=4 cellspacing=2 width=75%>

<TR><TD bgcolor="yellow">Таблица 1

<TD bgcolor="yellow">

<TABLE border=2 cellspacing=2>

<TR><TD bgcolor="red">Таблица 2

<TD bgcolor="red">Ячейка 2-2

<TR><TD bgcolor="red">Ячейка 3-2

<TD bgcolor="red">Ячейка 4-2

</TABLE>

<TR><TD bgcolor="yellow">Ячейка 3-1

<TD bgcolor="yellow">Ячейка 4-1

</TABLE></BODY></HTML>

Вы можете следить за любыми ответами на эту запись через RSS 2.0 ленту. Вы можете оставить ответ, или trackback с вашего собственного сайта.

Оставьте отзыв

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
Rambler's Top100