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

Список задает некоторое перечисление. Каждый элемент перечисления располагается с новой строки и или нумеруется, или отмечается каким - нибудь символом (маркером). В первом случае список называется нумерованным, во втором - маркированным.

Чтобы задать маркированный список в HTML используется парный тег <UL> </UL>. Позиции списка отмечаются непарным тегом <LI>. Допускается использование заголовка списка, который заключается в парный тег <LH> </LH>. Например, Вы хотите список своих увлечений оформить в виде маркированного списка. Это можно сделать например так:

<UL> <LH> Мои увлечения </LH>

<LI> Общение с друзьями

<LI> Музыка

<LI> Книги

</UL>

Чтобы задать нумерованный список в HTML используется парный тег <OL> </OL>. Позиции списка отмечаются также непарным тегом <LI>.

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

Например, тег <OL TYPE=a> определяет нумерацию в виде букв английского алфавита.

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

Теги <CAPTION> и </CAPTION> задают заголовок таблицы;

Теги <TH> и </TH> отображают тексты заголовков строк или столбцов;

Теги <TR> и </TR> определяют каждую строку таблицы;

Теги <TD> и </TD> определяют текст каждой ячейки таблицы;

Добавим на Вашу страницу таблицу, содержащую типовой распорядок Вашего выходного дня.

Мероприятие Начало Конец
  Подъем 9-00 10-00
  Утренняя гимнастика и водные процедуры 10-00 10-30
  Завтрак 10-30 11-00
  ... ... ...
       

<TABLE width="75%" border="1" align=center>

<Caption ><h1><center> Мой распорядок дня </h1></center></caption>

<tr>

<th width="11%" align="center">№ </th>

<th width="55%" align="center">Мероприятие </th>

<th width="17%" align="center">Начало</th>

<th width="17%" align="center">Конец</th>

</tr>

<tr>

<td width="11%" align="center">1</td>

<td width="55%">Подъем</td>

<td width="17%" align="center">9-00</td>

<td width="17%" align="center">10-00</td>

</tr>

<tr>

<td width="11%" align="center">2</td>

<td width="55%">Утренняя гимнастика и водные процедуры</td>

<td width="17%" align="center">10-00</td>

<td width="17%" align="center">10-30</td>

</tr>

</TABLE>

Продолжите таблицу самостоятельно.

Дополнительные теги используемые для оформления таблиц:

Тег <BORDER> указывает на необходимость границ и задает их толщину;

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



Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: