Семь уроков по HTML:

В HTML существует несколько видов списков, которые позволяют структуризировать и упорядочивать информацию для удобного просмотра ее браузером.

Неупорядоченный список создается с помощью тэга <UL>
Атрибуты тэга <UL>:
type ="disc", "circle", "square" - вид значка, отображаемого перед каждым элементом списка.
По умолчанию отображается "disc" - небольшой затененный кружок.
compact - задает более компактный вид списка.

Пример:
Текст программы:
Задаем общий стиль для всех элементов списка:
<UL type="circle">
<LI>первый элемент списка</LI>
<LI>второй элемент списка</LI>
<LI>третий элемент списка</LI>
</UL>
Задаем стиль для каждого элемента списка:
<UL>
<LI type="circle">первый элемент списка</LI>
<LI type="square">второй элемент списка</LI>
<LI type="disc">третий элемент списка</LI>
</UL>
Результат выполнения:
Задаем общий стиль для всех элементов списка:

• первый элемент списка
• второй элемент списка
• третий элемент списка

• первый элемент списка
• второй элемент списка
• третий элемент списка

Упорядоченный список создается с помощью тэга <OL>
Атрибуты тэга <OL>:
type="A", "a", "I", "i", "1" - стиль нумерации списка. По умолчанию список будет цифровым

Type	Стиль
A	буквы верхнего регистра	A, B, C, ...
a	буквы нижнего регистра	a, b, c, ...
I	римские цифры в верхнем регистре	I, II, III, ...
i	римские цифры в нижнем регистре	i, ii, iii, ...
1	арабские цифры	1, 2, 3, ...

start - задает начальный номер первого элемента в упорядоченном списке. По умолчанию начальный номер - "1". Помните, что, хотя значением этого атрибута является целое число, соответствующая метка может быть нецифровая. Если в качестве стиля выбраны латинские буквы верхнего регистра (A, B, C, ...), start=3 означает "C". Если в качестве стиля выбраны римские цифры нижнего регистра, start="3" означает "iii" и т.д.
compact - задает более компактный вид списка.

Пример:
Текст программы:
Список, пронумерованный большими буквами:
<OL type="A">
<LI>первый элемент списка</LI>
<LI>второй элемент списка</LI>
<LI>третий элемент списка</LI>
</OL>
Цифровой список, со стартовой позиции = 10:
<OL type="1" start="10">
<LI>первый элемент списка</LI>
<LI>второй элемент списка</LI>
<LI>третий элемент списка</LI>
</OL>
Результат выполнения:
Список, пронумерованный большими буквами:

1. первый элемент списка
2. второй элемент списка
3. третий элемент списка

10. первый элемент списка
11. второй элемент списка
12. третий элемент списка

Можно пропустить несколько элементов списка, установив для них атрибут VALUE тэга <LI>. Нумерация для последующих элементов списка будет продолжаться с нового значения

Пример:
Текст программы:
<OL>
<LI value="10">элемент списка номер 10</LI>
<LI value="20">элемент списка номер 20</LI>
<LI>элемент списка номер 21</LI>
</OL>
Результат выполнения:

10. элемент списка номер 10.
20. элемент списка номер 20.
21. элемент списка номер 21.

Список определений состоит из двух частей-термина и определения. Список создается с помощью тэга <DL>. Термин указывается после тэга <DT>, определение - после тэга <DD>.

Пример:
Текст программы:
<DL>
<DT>первый термин</DT>
<DD>определение для первого термина</DD>
<DT>второй термин</DT>
<DD>определение для второго термина</DD>
</DL>
Результат выполнения:

первый термин

определение для первого термина

второй термин

определение для второго термина

Таблица - один из самых часто используемых элементов HTML. Таблицы сплошь и рядом применяются для создания структуры странички, вывода в удобночитаемом виде текстовой и другой информации.

Таблица объявляется с помощью тэгов <TABLE>таблица</TABLE>
Атрибутами этого тэга задается общий вид таблицы
Атрибуты тэга <TABLE>:
align="left", "right", "center". Выравнивание таблицы по горизонтали. По умолчанию таблица выравнивается по левому краю страницы.
width. Задание ширины таблицы. Если ширина не задана, браузер сам подбирает оптимальную ширину таблицы.
border. Указание ширины границы таблицы в пикселях. По умолчанию border=0, т.е. границы таблицы не отображаются.
cellspacing. Ширина свободного пространства между ячейками таблицы (по умолчанию 2pix).
cellpadding. Ширина свободного пространства между содержимым ячейки и ее границами.
bgcolor. Цвет фона таблицы.
bordercolor. Цвет рамки таблицы (только для IE).
bordercolordark. Для трехмерных таблиц цвет нижнего и правого участка рамки таблицы (только для IE).
bordercolorlight. Для трехмерных таблиц цвет верхнего и левого участка рамки таблицы (только для IE).
background - Изображение, выводимое в качестве фона таблицы.
summary - Краткая информация о таблице.
clear - Форматирование текста, расположенного в документе HTML после таблицы

• "no" - текст размещается сразу после таблицы;
• "left" - текст размещается на первой строке после таблицы. Эта строка выравнивается по левой границе;
• "right" - текст размещается на первой строке после таблицы. Эта строка выравнивается по правой границе.

• "border" - рамка со всех сторон таблицы (по умолчанию);
• "void" - рамка не отображается;
• "above" - отображается верхняя рамка;
• "below" - отображается нижняя рамка;
• "hsides" - отображается верхняя и нижняя рамка;
• "lhs" - отображается левая рамка;
• "rhs" - отображается правая рамка;
• "vsides" - отображается левая и правая рамка;
• "box" - рамка отображается только с внешней стороны таблицы.

• "none" - разделительные линии между ячейками таблицы не отображаются;
• "groups" - отображаются горизонтальные разделительные линии между всеми группами таблиц, определенными тэгами <thread>, <tbody>, <tfoot> и <colgroup>;
• "rows" - отображаются горизонтальные разделительные линии между всеми строками таблицы;
• "cols" - отображаются вертикальные разделительные линии между всеми столбцамитаблицы;
• "all" - отображаются все линии между всеми столбцами и строками таблицы;

Заголовок создается с помощью тэгов <CAPTION>заголовок</CAPTION>
Атрибуты заголовка:
align="left", "right", "center", "bottom". Выравнивание заголовка. По умолчанию заголовок выравнивается по центру. Если указать align="bottom", заголовок будет выведен внизу таблицы.

Пример:
Текст программы:
<TABLE border="1" width="100%" bgcolor="teal">
<CAPTION align="left">заголовок таблицы</CAPTION>
<TR>
<TD>ячейка1,1</TD>
<TD>ячейка1,2</TD>
</TR>
</TABLE>
Результат выполнения:

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

ячейка1,1

ячейка1,2

Строка создается с помощью тэгов <TR>строка</TR>
Атрибуты строки:
align = "left", "center", "right", "justify", "char" - Горизонтальное выравнивание данных в ячейке.
где:

• "left" - выравнивание по левому краю;
• "center" - выравнивание по центру;
• "right" - выравнивание по правому краю;
• "justify" - выравнивание по ширине ячейки;
• "char" - выравнивание по указанному символу (по умолчанию символ десятичной точки для текущего языка;

• "top" - выравнивание по верхнему краю;
• "middle" - выравнивание по центру;
• "bottom" - выравнивание по нижнему краю;
• "baseline" - выравнивание по базовой линии, общей для всех ячеек;

Ячейка создается с помощью тэгов <TD></TD> или тэгов <TH></TH>
Текст находящийся между тэгами <TH></TH> отображается жирным шрифтом, т.е. <TH>текст</TH> равносильно <TD><b>текст</b></TD>
Атрибуты ячейки:
Включают в себя атрибуты для строки и еще дополнительные:
rowspan = "число" Объединение указанного количества строк.
colspan = "число" Объединение указанного количества столбцов.
width Рекомендуемая ширина ячейки в пикселях.
height Рекомендуемая высота ячейки в пикселях.
nowrap Отключение автоматического разбиения текста для этой ячейки.
Чтобы вывести пустую ячейку, необходимо ввести в нее закодированный пробел &nbsp;

Примеры таблиц:
Текст программы:
<TABLE border="10" width="100%" bordercolordark="red" bordercolorlight="brown">
<CAPTION>пример разноцветной таблицы</CAPTION>
<TR bgcolor="white">
<TD>ячейка1,1</TD>
<TD>ячейка1,2</TD>
</TR>
<TR>
<TD bgcolor="gray">ячейка2,1</TD>
<TD>ячейка2,2</TD>
</TR>
</TABLE>
Результат выполнения:

пример разноцветной таблицы

ячейка1,1	ячейка1,2
ячейка2,1	ячейка2,2

Текст программы:
<TABLE width="100%" bgcolor="teal" border="1">
<CAPTION>пример объединения ячеек</CAPTION>

<TR bgcolor="white">
<TD colspan="2"> </TD>
<TD> </TD>
<TD rowspan="3"> </TD>
</TR>

<TR bgcolor="brown">
<TD rowspan="2"> </TD>
<TD> </TD>
</TR>

<TR>
<TD> </TD>
<TD> </TD>
</TR>

</TABLE>
Результат выполнения:

пример объединения ячеек

colspan=2 rowspan=1		colspan=1 rowspan=1	colspan=1 rowspan=3
colspan=1 rowspan=2	colspan=1 rowspan=1	colspan=1 rowspan=1
	colspan=1 rowspan=1	colspan=1 rowspan=1

Урок2, Работа с текстом | Урок4. Фреймы

Malder © 2004