Что такое HTML?







Урок3. Списки и таблицы


Списки:

В 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:
    1. первый элемент списка
    2. второй элемент списка
    3. третий элемент списка

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

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

    1. элемент списка номер 10.
    2. элемент списка номер 20.
    3. элемент списка номер 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" - текст размещается на первой строке после таблицы. Эта строка выравнивается по правой границе.
    frame - Внешний вид рамки, расположенной вокруг таблицы.
    • "border" - рамка со всех сторон таблицы (по умолчанию);
    • "void" - рамка не отображается;
    • "above" - отображается верхняя рамка;
    • "below" - отображается нижняя рамка;
    • "hsides" - отображается верхняя и нижняя рамка;
    • "lhs" - отображается левая рамка;
    • "rhs" - отображается правая рамка;
    • "vsides" - отображается левая и правая рамка;
    • "box" - рамка отображается только с внешней стороны таблицы.
    nowrap - Не выполняется перенос строк, если они не помещаются по горизонтали в окне браузера.
    rules - Внешний вид линий, разделяющих ячейки таблицы.
    • "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" - выравнивание по указанному символу (по умолчанию символ десятичной точки для текущего языка;
    valign = "top", "middle", "bottom", "baseline" Вертикальное выравнивание данных в ячейках строки.
    где:
    • "top" - выравнивание по верхнему краю;
    • "middle" - выравнивание по центру;
    • "bottom" - выравнивание по нижнему краю;
    • "baseline" - выравнивание по базовой линии, общей для всех ячеек;
    bgcolor - Цвет фона строки.
    bordercolor - Цвет рамки строки (только для IE).
    background - Изображение, выводимое в качестве фона строки.

  • Ячейка таблицы:

    • Ячейка создается с помощью тэгов <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









     |  Анимация, картинки  |  Астрология, гороскопы  |  Аудиокниги  |  Вебкамеры России  |  Вебкамера на МКС  |  Выживание  |  Гороскопы  |  Заговоры  |  Иллюзии  |  Игры  |  Очищение  |  Календарь  |  Конвертер валют Мира  |  Лунный календарь  |  Мировая пресса  |  Мировая статистика  |  Население Земли  |  Народная медицина  |  Нетрадиционная медицина  |  Новости в России и Мире  |  Онлайн полеты самолётов  |  Омоложение  |  Очищение  |  Погода в России и Мире.  |  Поздравления  |  Прогнозы по дате рождения.  |  Сейсмический монитор  |  Сонник.  |  Страны Мира.  |  Телевидение  |  100 лучших фильмов  |  Улыбнись  |  Фильмотека  |  Ретро музыка  |  Ретро фильмы  |  Радио онлайн  |  Мини TV  |  Лунный день  |  Вечный календарь  |