Вложенные списки

Вложенный список – это список внутри списка. Вложение списков в списки позволит вам создать несколько уровней организации информации. Вкладываемый список может принадлежать к другому типу списков, в отличие от основного.

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

Создайте вложенный список. Сохраните его под именем вложенный.html.

<LH><B> Дополнительный график моего путешествия по Европе </B></LH>

Таблицы в HTML состоят из названия, заголовков, строк и ячеек. Для определения каждой части таблицы используется специальный тег.

К основным тегам, которые используются для описания таблиц, относятся <TABLE>, <CAPTION>, <TR>, <TH>, <TD>.

Тег <TABLE> служит для указания начала и конца таблицы (</TABLE>). С помощью атрибутов этого тега задаются характеристики всей таблицы, например, цвет фона, размер обрамления, интервалы между ячейками.

Необязательный тег <CAPTION> помещается в теги <TABLE> и задает заголовок таблицы, который по умолчанию отображается браузером в верхней ее части.

Теги <TR> обозначают каждую строку таблицы и содержат теги для каждой ячейки строки.

Теги <TH> и <TD> служат для описания собственно ячеек таблицы:

Теги <TH> и <TD> заключают в себе информацию, которая отображается в каждой ячейке таблицы.

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

Хорошая таблица делает Web-страницу информативной, аккуратной и организованной.

Основные теги и атрибуты для создания HTML-таблиц.

ТЕГ

АТРИБУТЫ

<TABLE>… </TABLE> - начальный и конечный теги для указания таблицы.

Align= позиция Задает способ выравнивания таблицы относительно текстового потока, в котором она находится: по левому краю (left), по правому краю (right). Background= url Указывает фоновое изображение для таблицы. Bgcolor= цвет Задается цвет фона всей таблицы. Border= n Создается обрамление, образованное линиями толщиной n пикселей. Bordercolor= цвет Задается цвет обрамления всей таблицы. Bordercolordark= цвет Задается темный цвет для создания эффекта тени рамки. Bordercolorlight= цвет Задается светлый цвет для создания эффекта тени рамки. Cellpadding= n Задается расстояние между границами ячейки и ее содержимым в n пиксел. Cellspacing= n Задается интервал между ячейками таблицы в n пиксел. Frame= тип Указывается способ отображения рамки таблицы: void – подавление отображения всей рамки; box и border – отображение всей рамки; hsides – отображение горизонтальных составляющих рамки; vsides – отображение вертикальных составляющих рамки; lhs – отображение левой боковой стороны рамки; rhs – отображение правой боковой стороны рамки. above – верхняя сторона рамки. below – нижняя сторона рамки. hspases= n Задается размещение слева и справа от таблицы областей свободного пространства заданной ширины (в пикселях). rules= тип Выключение (none) или включение режима отображения разграничительных линий между ячейками таблицы: по столбцам (cols), строкам (rows), группам (groups) или всем элементам (all). vspace= n Задается размещение над таблицей и под ней областей свободного пространства заданной высоты в пикселях. width= n Установка ширины таблицы в пикселях или в процентах от ширины окна.

Каждая строка таблицы создается тегом <TR>. Внутри этого тега определяются одна и более ячеек, содержащих заголовки (каждый из которых задается тегом (<TH>) или данные (которые задаются тегом <TD>).

Количество ячеек в каждой строке таблицы равно количеству ячеек в самой длинной строке. При создании строк, для которых задано меньше ячеек, браузер автоматически формирует пустые ячейки.

ТЕГ	АТРИБУТЫ
<TR>…</TR> - начальный и конечный теги строки ячеек в таблице.	align= тип Задается способ выравнивания содержимого ячеек в данной строке: по левому краю (left), по центру (center), по правому краю (right). backgroundme= url Указывает фоновое изображение ячейки. bgcolor= цвет Задается цвет фона данной строки. border= n Создается обрамление, образованное линиями толщиной n пикселей. bordercolor= цвет Задается цвет обрамления строки. bordercolordark= цвет Задается темный цвет для создания эффекта тени обрамления строки. bordercolorlight= цвет Задается светлый цвет для создания эффекта тени обрамления строки. valign= тип Задается размещение содержимого ячеек в данной строке по вертикали: вверху (top), по центру (center), внизу (bottom) или по базовой линии (baseline) ячейки.
<TH>…</TH> - начальный и конечный теги ячейки заголовка таблицы.	Align= тип Задается способ выравнивания содержимого ячейки: по левому краю (left), по умолчанию по центру (center) или по правому краю (right). Background= url Задается фоновое изображение ячейки. Bgcolor= цвет Задается цвет фона ячейки. Bordercolor= цвет Задается цвет обрамления ячейки. Bordercolordark= цвет Задается темный цвет для создания эффекта тени обрамления ячейки. Bordercolorlight= цвет Задается светлый цвет для создания эффекта тени обрамления ячейки. Colspan= n Данная ячейка охватывает n соседних столбцов. Nowrap При указании этого атрибута в данной ячейке отключается режим автоматического распределения текста по всей ячейке. Будет отображаться лишь та часть текста, которая умещается в ячейке по длине. Rowspan= n Данная ячейка охватывает n соседних строк. Valign= тип Задается размещение содержимого данной ячейки по вертикали: вверху (top), по центру (center), внизу (bottom) или по базовой линии (baseline) ячейки. Width= n Задается ширина данной ячейки в пикселях или в процентах от ширины таблицы.
<TD>…</TD> - начальный и конечный теги ячейки данных таблицы.	Атрибуты такие же, как и у тега <TH>.
CAPTION – задает заголовок таблицы.	Allign= тип. Выравнивание заголовка по горизонтали (left, center или right) либо размещение заголовка по вертикали (top или bottom). По умолчанию – размещение сверху (top) и по центру. С помощью данного атрибута задать размещение и по вертикали, и по горизонтали нельзя. Valign= тип Установка способа размещения заголовка по вертикали (top или bottom). По умолчанию размещение сверху.

Создайте простую таблицу. Сохраните файл под именем таблица1.html в своей личной папке.

<CAPTION> <B> Студенты, сдавшие экзамен на “4” и “5”. </B></CAPTION>

Добавьте в таблицу несколько записей. Расположите оценки с правой стороны ячейки, саму таблицу по центру страницы. Объедините в таблице несколько строк и столбцов. Установите ширину таблицы 70% от ширины экрана. Сохраните файл под именем таблица2.html в своей личной папке.

<CAPTION> <B> Студенты, сдавшие экзамен на «4» и «5». </B></CAPTION>

Вложенной называется таблица, внутри ячейки которой содержится одна или более других таблиц.

Создайте вложенную таблицу. Листинг этого примера приведен ниже.