|
|||||||||||||||||||||||||||||||||||||||||||||||||
![]()
![]() |
§5. Тэги для создания списков и таблиц.Обычный список. Для создания обычного списка существуют следующие тэги: тэг ul – создаёт сам список; li – создаёт элемент списка. Закрывающие тэги нужны обязательно. Пример:
![]() Примечание: обратите внимание, что в коде html документа элементы списка имеют некоторый отступ от левого края (в данном примере 2 пробела). В таком виде код будет более читаемым. У тэгов ul и li есть атрибут type, который устанавливает вид маркера. Всего можно установить 3 типа маркеров: кружок – значение disc; окружность – значение circle; квадрат – значение square. Если установить атрибут type у тэга ul, то маркер будет установлен у всех элементов списка. Если установить атрибут type в тэге li, то маркер будет установлен конкретно у этого элемента. Пример:
![]() Обратите внимание, у третьего элемента списка (многоточие) атрибут type не установлен, поэтому маркер стоит тот, который установлен в тэге ul. Ещё один нюанс: при создании списка тэг ul можно не использовать. В таком случае элементы списка будут существовать сами по себе и при их отображении не будет отступа от левого края. Пример: ![]() Нумерованный список. Нумерованный список создаётся так же как и обычный, только вместо тэга ul используется тэг ol. Пример:
![]() Для создания различных вариантов нумерованных списков у тэга ol существуют следующие атрибуты:
Здесь же стоит сказать, что маркер каждого элемента можно устанавливать отдельно, как это сделано в следующем примере для седьмого элемента. Пример:
![]() Примечание: здесь стоит ещё раз отметить, что необходимо проверять каждый html документ на то как он отображается в различных браузерах. Как раз седьмой элемент из предыдущего примера в Internet Explorer 8 будет иметь маркер m, а не g как это должно быть: ![]() Тэги для создания таблиц. В третьем параграфе мы уже познакомились с некоторыми тэгами для создания таблиц. Сейчас рассмотрим этот вопрос более подробно. Создаётся таблица с помощью тэга table. Сами ячейки таблицы создаются тэгом td. Строки в таблице создаются тэгом tr. Далее пример, в котором создана таблица из трёх строк по три ячейки:
![]() Примечание: в обычной жизни мы привыкли к тому, что таблица состоит из колонок и строк. Здесь же при формировании таблицы мы вначале создаём строку, затем в этой строке создаём ячейки. От количества ячеек зависит количество получившихся колонок. Как видите несколько иная логика, к которой нужно привыкнуть. Так же стоит обратить ваше внимание на оформление кода таблицы в html документе. Тэг tr находится левее тэга table, а тэги td левее тэга tr. Так же стоит напомнить, что если вы написали открывающий тэг, например td или tr, то сразу его закройте. А только после этого вписывайте в него содержимое. Атрибуты тэга table. align. Тэг align выравнивает всю таблицу. Может принимать следующие значения: left – выравнивание по левому краю; right – по правому краю; center – по центру. Пример:
![]() Обратите внимание, размеры колонок и строк в таблице вычисляются исходя из размеров самой большой ячейки, поэтому в данном примере у ячеек 11 и 12 высота одинаковая, а у ячеек 12, 22 и 32 одинаковая ширина, хотя высота установлена только у ячейки 11, а ширина – у 32. Так же стоит сказать, что размер ячейки не может быть меньше её содержимого. Поэтому если атрибуты width и height установлены меньшего размера, чем содержимое, то они будут проигнорированы браузером. align, valign. Атрибуты align и valign устанавливают способ выравнивания содержимого ячейки по горизонтали и вертикали соответственно. Атрибут аlign может принимать следующие значения:
Атрибут vаlign может принимать следующие значения:
Пример:
![]() bgcolor, background. У каждой ячейки таблицы можно установить свой собственный фон. Для этого существуют атрибуты bgcolor и background, принцип работы с ними такой же, как и у тэга table. Пример:
![]() colspan, rowspan. До сих пор во всех примерах количество ячеек в каждой строке было одинаковое. Теперь попробуем создать таблицу с разным количеством ячеек в строках:
![]() Как видно из рисунка, браузер автоматически выделил пространство под недостающую ячейку. Иногда бывает необходимо, что бы на одну ячейку первой строки было две и более ячейки во всех последующих. Для этого существует атрибут colspan, который увеличивает одну ячейку до нескольких. В качестве значения этому атрибуту необходимо присвоить число, которое соответствует количеству ячеек последующих строк. Пример: 11 |
.........................![]() Так же можно увеличить ячейку на несколько строк с помощью атрибута rowspan. Пример:
![]() nowrap. Атрибут nowrap запрещает переносить строки, если таблица не помещается в окно браузера. При этом появляется полоса горизонтальной прокрутки. Значений у атрибута нет, просто необходимо его включить в тэг. Атрибуты тэга tr. У тэга tr существуют следующие атрибуты align, valign, bgcolor. Работают они так же как и у тэга td, только оказывают влияния на все ячейки, содержащиеся в строке. Их изучите их самостоятельно. Примечание: в данном параграфе были рассмотрены не все тэги и атрибуты для создания таблиц. Некоторые из них необходимы для работы речевых браузеров, некоторые работают корректно не во всех браузерах, а некоторые используются совместно с языком CSS. В дальнейшем если будет необходимо, вы изучите их самостоятельно. Разметка страницы с помощью таблицы. Как правило, все интернет страницы разделены на некоторые области, в которых содержится различная по назначению информация. Например, сверху может находится логотип и название сайта. Остальное пространство может быть разделено на три столбика: в левом может находиться навигация по сайту; в центральном – основной текст; а в правом – реклама. Разделить страницу на области подобным образом можно как раз с помощью создания таблицы, только она должна быть без рамки. Пример:
![]() Обратите внимание, что во второй строке таблицы размер указан только для первой и последней ячейки. Размер средней ячейки рассчитывается автоматически исходя из оставшегося пространства. Примечание: для того, что бы была более понятна структура такой страницы, предлагаю воспользоваться веб-инспектором, который, при наведении мышкой на определённую строку кода, выделяет синим цветом блок в самой странице, как показано на следующем рисунке: ![]() Задание. 1. Создать примеры нумерованных списков со всеми возможными маркерами и просмотреть их в различных браузерах. 2. Создать пример использования атрибута nowrap тэга td. 3. Создать примеры использования атрибутов align, valign и bgcolor тэга tr. 3. Создать какую-либо таблицу, например это может быть таблица данных об учениках в классе (ФИО, дата рождения, адрес проживания и т.д.) или ведомость оценок. 4. Создать страницу размеченную таким же образом как в примере последнего подпункта данного параграфа. Поместить в первую ячейку название вашего текста, который вы должны были отформатировать, решая задание из предыдущего параграфа. Сам текст поместить в среднюю ячейку второй строки.
| |