Списки в html
Упорядоченные (нумерованные) списки.
Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.
Чтобы указать браузеру, что список будет нумерованным, используются теги <OL></OL>. Весь список располагается между этими тегами и каждый его пункт задается тегами <LI></LI>.
По умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:
type="A" – нумерация заглавными латинскими буквами (A, B, C)
type="a" – нумерация прописными латинскими буквами (a, b, c)
type="I" – нумерация большими римскими цифрами (I, II, III)
type="i" – нумерация маленькими римскими цифрами (i, ii, iii)
Если нам нужно начать нумерацию не с единицы, то следует использовать параметр:
start – в качестве значения, которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).
У тега <LI> можно задать параметр:
value – который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов.
Пример: <html> <head> <title></title> </head> <body> <ol type="I" start="2"> <li> второй</li> <li> третий</li> <li value="7"> седьмой</li> </ol> </body> </html> Результат:
|
Маркированные списки
В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <UL></UL>. Весь список располагается между этими тегами и каждый его пункт задается тегами <LI></LI>.
По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type:
type="disc" – закрашенный кружочек •
type="circle" – пустой кружочек ○
type="square" – закрашенный квадратик ■
Пример: <html> <head> <title></title> </head> <body> <ul type="disc"> <li> первый</li> <li> второй</li> <li> третий</li> </ul> </body> </html> Результат:
|
Списки определений
Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <DL></DL>. Каждый термин заключается в теги <DT></DT>, а их определения – в теги <DD></DD>.
<DT></DT> – новый термин
<DD></DD> – новое определение для термина
Пример: <html> <head> <title></title> </head> <body> <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> <dt>Термин 2</dt> <dd>Определение термина 2</dd> </dl> </body> </html>
Результат:
|
Вложенные (комбинированные) списки:
Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными. Для этого используется комбинация уже известных нам тегов списков.
Пример: <html> <head> <title></title> </head> <body> <ul> <li>Животные <ol> <li>кошки</li> <li>собаки</li> </ol> </li> <li>Растения <ol> <li>деревья</li> <li>цветы</li> </ol> </li> </ul> </body> </html> Результат:
|
Таблицы в HTML
Таблица – один из основных инструментов для создания web-страниц. Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Для создания таблиц используется тег <TABLE></TABLE>
Теги которые используются для построения таблиц:
<caption></caption> – определяет название для таблицы
<tr></tr> – новая строка в таблице
<td></td> – новый столбец в таблице
<th></th> – названия столбцов, расположенных в первой строке
У тега <TABLE> существует ряд параметров:
width – задает ширину таблицы (в пикселях или % от ширины экрана)
bgcolor – задает цвет фона ячеек таблицы
background – заливает фон таблицы рисунком
border – задает рамку указанной ширины (в пикселях) вокруг всей таблицы
align – задает выравнивание таблицы: справа (right), слева (left), по центру (center)
cellspacing – задает расстояние между ячейками таблицы (в пикселях),
cellpadding – задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселях)
frame – задает вид рамки вокруг таблицы и может принимать следующие значения:
void – рамки нет
above – только верхняя рамка
below – только нижняя рамка
hsides – только верхняя и нижняя рамки
vsides – только левая и правая рамки
lhs – только левая рамка
rhs – только правая рамка
box – все четыре части рамки
rules – задает вид внутренних границ таблицы и может принимать следующие значения:
none – между ячейками нет границ
groups – границы только между группами строк и группами столбцов
rows – границы только между строками
cols – границы только между стобцами
all – отображать все границы
Для тегов <tr> и <td> можно использовать параметры:
align – выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center)
valign – выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle)
bgcolor – задает цвет строки
width – задает ширину столбца (в пикселях или в процентном соотношении, где за 100% принимается ширина таблицы)
height – задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты
В случае <tr> – параметры будут распространяться только на строку.
В случае <td> – параметры будут распространяться только на ячейку.
Пример: <html> <head> <title></title> </head> <body> <table width="300" bgcolor="green" border="1" align="center" cellspacing="5" cellpadding="10" rules="rows" frame="void">
<caption>Название таблицы</caption> <tr> <th>1</th><th>2</th><th>3</th> </tr> <tr> <td>11</td><td>12</td><td>13</td> </tr>
<tr> <td>21</td><td>22</td><td>23</td> </tr> <tr> <td>31</td><td>32</td><td>33</td> </tr> </table> <br> <table align="center"> <tr align="center" valign="middle" bgcolor="yellow"> <td bgcolor="red">красного цвета </td> <td bgcolor="green"> зеленого цвета </td> <td> желтого цвета </td> </tr> </table>
</body> </html>
Результат:
|
Создание сложных таблиц:
В таблицах можно объединить смежные ячейки в строках и в столбцах, в более крупные блоки.
Для объединения 2–х смежных ячеек в строке используются теги:
<th rowspan="3">
<td rowspan="3">
Для объединения 2–х смежных ячеек в столбце используются теги:
<th colspan="3">
<td colspan="3">
Значением этого параметра является число, указывающее сколько столбцов/строк будет объединено.
Пример: <html> <head> <title></title> </head> <body> <table width="200" border="1" align="left" cellspacing="0" cellpadding="10"> <tr> <td colspan="3"> Заголовок </td> </tr>
<tr> <td>1</td> <td>2</td> <td rowspan="2">5</td>
</tr>
<tr> <td>4</td> <td>3</td> </table> </tr>
</body> </html> Результат:
|
