Списки встречаются в документах очень часто. Они бывают двух видов: нумерованнве и маркированные. Для создания списков в языке Web-страниц определены тэги <li>, <ul>, <ol>, <menu> и <dir>. Для создания маркированного списка (каждый пункт выделяется каким-либо символом) используйте тэг <ul>...</ul>. Кажжый пункт списка отмечается тэгом <li>...</li>
Для создания нумерованных списков (пункты выделяется упорядоченным набором символов, обычно, цифрами) используйте тэг <ol>... </ol>. Каждый пункт списка отмечается тэгом <li>...</li>
В Блокноте
В браузере
<p>Внутренние планеты солнечной системы:
<ol>
<li>Меркурий
<li>Венера
<li>Земля
<li>Марс
</ol>
Внутренние планеты солнечной системы:
Меркурий
Венера
Земля
Марс
Вы можете изменить систему нумерации, используя параметры тэга <ol>:
Параметр
Описание(Значение)
start=
Начальный номер для списка
type=
Тип нумерации:
A - заглавными буквами
a - строчными буквами
I - заглавными римскими цифрами
i - строчными римскими цифрами
1 - арабскими цифрами
Если необходимо разместить в Web-документе список определения каких-либо терминов, используйте тэги <dl>, <dt>, <dd>:
Тэг
Описание
<dl>..</dl>
Начало и конец списка определений
<dt>
Строка, содержащая термин
<dd>
Определение термина
В Блокноте
В браузере
<dl>
<dt><b>HTTP</b>
<dd>Протокол передачи гипертекста HyperText Tpansfer Protocol, используется для работы с серверами WWW
<dt><b>HTLM</b>
<dd>Язык разметки гипертекста HyperText Mark-up Language, обеспечивает возможность разметки гипертекста для его размещения на сервере WWW
</dl>
HTTP
Протокол передачи гипертекста HyperText Tpansfer Protocol, используется для работы с серверами WWW
HTLM
Язык разметки гипертекста HyperText Mark-up Language, обеспечивает возможность разметки гипертекста для его размещения на сервере WWW
Таблицы являются основным инструмента языка HTML по размещению информации в документах. Они могут использоваться как в обычном смысле - для оформления таблично заданной информации, так и для фиксации отображаемых элементов в нужных частях экрана. В первом случае, таблицу отображают с границами, во втором случае - без них. Для задания таблицы используют тэги <table>, <tr> и <td>:
Тэг <table> позволяет управлять внешним видом таблицы в целом. Используйте следующие параметры тэга:
Параметр
Описание (Значения)
align=
Определяет выравнивание таблицы относительно окна просмотра по горизонтали:
"left"-по левому краю
"center"-по центру
"right"-по правому краю
"justify"-по ширине
valign=
Определяет выравнивание таблицы относительно окна просмотра по вертикали:
"top"-по верхней границе
"middle"-по середине окна
"bottom"-по нижней границе
"baseline"-по линии текста
background=
Имя графического файла с фоновым изображением таблицы (формат GIF или JPG)
bgcolor=
Цвет фона для таблицы
border=
Толщина рамки таблицы *</SUP< td>
bordercolor=
Цвет рамки *
cellpadding=
Расстояние между краями ячейки таблицы и ее содержимым
cellspacing=
Расстояние между рамкой таблицы и ее ячейками
clear=
Форматирование текста документа после таблицы:
"no"-текст сразу после таблицы
"left"-с выравниванием по левому краю
"right"-с выравниванием по правому краю
frame=
Внешний вид рамки вокруг таблицы:
"border"-рамка со всех сторон
"void"- внешняя рамка не отображается
"above"-отображается верхняя рамка
"below"-отображается нижняя рамка
"hsides"-отображаются верхняя и нижняя рамки
"lhs"-отображается левая рамка
"rhs"-отображается правая рамка
"vsides"-отображаются правая и левая рамки
"box"-отображается только внешняя рамка
rules=
Внешний вид разделительных линий ячеек таблицы:
"none"-разделительных линий нет
"rows"-отображаются горизонтальные линии
"cols"-отображаются вертикальные линии
"all"-отображаются все линии между строками и столбцами
<p>Таблица 5:
<table border="1" background="textura1.jpg" align="left" clear="right">
<!--
... строки из предыдущего примера ...
-->
</table>
<p>Пояснение к таблице
Таблица 5:
Ячейка 1-1
Ячейка 1-2
Ячейка 1-3
Ячейка 2-1
Ячейка 2-2
Ячейка 2-3
Ячейка 3-1
Ячейка 3-2
Ячейка 3-3
Пояснение к таблице.
Тэг <tr> предназначен для создания строк таблицы. Изменяя его параметры, можно определить внешний вид строки:
Параметр
Описание (Значения)
align=
Определяет выравнивание текста в ячейках строки по горизонтали:
"left"-по левому краю
"center"-по центру
"right"-по правому краю
"justify"-по ширине
valign=
Определяет выравнивание текста в ячейках строки по вертикали:
"top"-по верхней границе
"middle"-по середине окна
"bottom"-по нижней границе
"baseline"-по линии текста
background=
Имя графического файла с фоновым изображением строки (формат GIF или JPG)
Определяет выравнивание текста в ячейке по горизонтали:
"left"-по левому краю
"center"-по центру
"right"-по правому краю
"justify"-по ширине
valign=
Определяет выравнивание текста в ячейке по вертикали:
"top"-по верхней границе
"middle"-по середине окна
"bottom"-по нижней границе
"baseline"-по линии текста
background=
Имя графического файла с фоновым изображением ячейки (формат GIF или JPG)
bgcolor=
Цвет фона для ячейки
bordercolor=
Цвет рамки ячейки*
height=
Высота ячейки в пикселах или в % от высоты таблицы
width=
Ширина ячейки в пикселах или в % от ширины таблицы
Обычно первая строка или первый столбец таблицы содержат заголовки. Вы можете оформить такие заголовки с помощью тэга <th>. Он имеет тот же набор параметров, что и тэг <td>:
С помощью тэга <caption> можно снабдить таблицу подписью. У этого тэга есть параметр align, имеющий два значения: "top" - подпись сверху таблицы и "bottom" - подпись снизу таблицы:
В Блокноте
В браузере
<table width="100%" border="1">
<caption align="top">Табл.1 Список параметров</caption>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<!-- Остальные строки - аналогично -->
</table>
Табл.1 Список параметров
1-1
1-2
1-3
2-1
2-2
2-3
3-1
3-2
3-3
Создание сложных таблиц
В Web-документы можно вставлять не только простые прямоугольные таблицы, с равным числом ячеек в каждой строке, но и достаточно сложные. Например, можно объединять (группировать) соседние ячейки в спроках или столбцах. Так можно получить сложные заголовки. Чтобы произвести объединение ячеек, необходимо использовать следующие параметры тэга <td> (или <th>):
Параметр
Описание (Значения)
colspan=
Количество объединенных ячеек в столбце (снизу и сверху от данной)
rowspan=
Количество объединенных ячеек в строке (слева и справа от данной)
В Блокноте
В браузере
<table border="1" width="100%">
<caption>Таблица с общим заголовком для 2 столбцов</caption>
<tr>
<th>Столбец 1</th>
<th colspan="2">Столбец 2 и 3</th>
</tr>
<tr>
<td>1-1</td>
<td>1-21</td>
<td>1-22</td>
</tr>
<!-- Остальные строки - аналогично -->
</table>
Таблица с общим заголовком для 2 столбцов
Столбец 1
Столбец 2 и 3
1-1
1-21
1-22
2-1
2-21
2-22
3-1
3-21
3-22
<table border="1" width="100%">
<caption>Таблица с общим заголовком для 2 строк</caption>
<tr>
<th rowspan="2">Строки 1 и 2</th>
<td>11-1</td>
<td>11-2</td>
<td>11-3</td>
</tr>
<tr>
<td>12-1</td>
<td>12-2</td>
<td>12-3</td>
</tr>
<tr>
<th>Строка 3</th>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
Таблица с общим заголовком для 2 строк
Строки 1 и 2
11-1
11-2
11-3
12-1
12-2
12-3
Строка 3
22-1
22-2
22-3
<table border="1" width="100%">
<caption>Таблица с двойными заголовками</caption>
<tr>
<th rowspan="2" colspan="2"> </th>
<th colspan="6"> </th>
</tr>
<tr>
<th colspan="2"> </th>
<!-- пред. строку еще 2 раза -->
</tr>
<tr>
<th rowspan="4"> </th>
<th rowspan="2"> </th>
<td> </td>
<!-- пред. строку еще 5 раз -->
</tr>
<tr>
<td> </td>
<!-- пред. строку еще 5 раз -->
</tr>
<!-- пред. 8 строк еще раз -->
</table>
