 |
Учебник по программированию.Создание сайтов. Первые шаги. |
| Предыдущий параграф | Назад в содержание | Следующий параграф |
§5. Тэги для создания списков и таблиц.
Обычный список.
Для создания обычного списка существуют следующие тэги: тэг ul – создаёт сам список; li – создаёт элемент списка. Закрывающие тэги нужны обязательно. Пример:
Примечание: обратите внимание, что в коде html документа элементы списка имеют некоторый отступ от левого края (в данном примере 2 пробела). В таком виде код будет более читаемым.
У тэгов ul и li есть атрибут type, который устанавливает вид маркера. Всего можно установить 3 типа маркеров: кружок – значение disc; окружность – значение circle; квадрат – значение square.
Если установить атрибут type у тэга ul, то маркер будет установлен у всех элементов списка. Если установить атрибут type в тэге li, то маркер будет установлен конкретно у этого элемента.
Пример:
Обратите внимание, у третьего элемента списка (многоточие) атрибут type не установлен, поэтому маркер стоит тот, который установлен в тэге ul.
Ещё один нюанс: при создании списка тэг ul можно не использовать. В таком случае элементы списка будут существовать сами по себе и при их отображении не будет отступа от левого края. Пример:
Нумерованный список.
Нумерованный список создаётся так же как и обычный, только вместо тэга ul используется тэг ol. Пример:
Для создания различных вариантов нумерованных списков у тэга ol существуют следующие атрибуты:
- type (A; a; I; i; 1) – настройка маркера счёта элементов. Либо большими или маленькими буквами, либо большими или маленькими римскими цифрами, либо арабскими цифрами;
- reversed – устанавливает обратный порядок нумерации (от большего к меньшему). Значений у атрибута нет, если он не указан, то нумерация будет от меньшего к большему;
- start – устанавливает число, с которого начинается нумерация. В качестве значения данному атрибуту необходимо присвоить число, независимо от того, какой маркер установлен для счёта.
Здесь же стоит сказать, что маркер каждого элемента можно устанавливать отдельно, как это сделано в следующем примере для седьмого элемента.
Пример:
Примечание: здесь стоит ещё раз отметить, что необходимо проверять каждый html документ на то как он отображается в различных браузерах. Как раз седьмой элемент из предыдущего примера в Internet Explorer 8 будет иметь маркер m, а не g как это должно быть:
Тэги для создания таблиц.
В третьем параграфе мы уже познакомились с некоторыми тэгами для создания таблиц. Сейчас рассмотрим этот вопрос более подробно.
Создаётся таблица с помощью тэга table. Сами ячейки таблицы создаются тэгом td. Строки в таблице создаются тэгом tr.
Далее пример, в котором создана таблица из трёх строк по три ячейки:
Примечание: в обычной жизни мы привыкли к тому, что таблица состоит из колонок и строк. Здесь же при формировании таблицы мы вначале создаём строку, затем в этой строке создаём ячейки. От количества ячеек зависит количество получившихся колонок. Как видите несколько иная логика, к которой нужно привыкнуть.
Так же стоит обратить ваше внимание на оформление кода таблицы в html документе. Тэг tr находится левее тэга table, а тэги td левее тэга tr. Так же стоит напомнить, что если вы написали открывающий тэг, например td или tr, то сразу его закройте. А только после этого вписывайте в него содержимое.
Атрибуты тэга table.
align.
Тэг align выравнивает всю таблицу. Может принимать следующие значения: left – выравнивание по левому краю; right – по правому краю; center – по центру.
Пример:
Примечание: html код этого примера такой же, как и у предыдущего, добавлен только атрибут align в тэге table. Поэтому весь код не приведён, и заменён многоточием. В дальнейшем если вы увидите многоточие в каком либо примере, это будет означать, что на этом месте должен находиться код, который был приведён в предыдущем примере.
border, bordercolor.
Атрибут border устанавливает толщину рамки таблицы. Значением может быть любое целое число. Если он не установлен, то по умолчанию браузер примет значение равное нулю. Соответственно рамка отображена не будет.
Атрибут bordercolor устанавливает цвет рамки.
Пример:
bgcolor, background.
Атрибут bgcolor устанавливает цвет фона таблицы.
Атрибут background устанавливает фоновый рисунок таблицы. В качестве параметра необходимо указать имя файла, включая полный путь к нему. Если путь указан не будет, то браузер будет искать в файл в том же месте, где находится сама страница. Так же можно указать относительный путь, об относительных адресах речь будет идти в следующем параграфе. В качестве рисунка могут использоваться файлы следующих форматов: jpg, png, bmp и gif.
Пример:
Примечание: если фоновый рисунок окажется меньше таблицы, то он будет размножен несколько раз, пока не заполнится фон всей таблицы. Если рисунок окажется больше, то будет видна только его часть.
Здесь так же стоит остановиться на одном нюансе: в именах файлах старайтесь писать буквы такими, какие они есть на самом деле – большими или маленькими. В операционной системе Windows нет разницы, как вы напишите «bg_Img.bmp» или «BG_Img.BMP». Однако есть операционные системы, в которых регистр букв имеет значения и файлы с именами «bg_Img.bmp» и «BG_Img.BMP» будут считаться разными. А так как вашу страницу может просмотреть человек, на компьютере которого стоит подобная операционная система, то рисунок может не отобразиться.
width, height.
Атрибут width устанавливает ширину таблицы. С этим атрибутом мы уже встречались в третьем параграфе, поэтому здесь пример приводить не буду.
Атрибут height устанавливает высоту таблицы. Данный атрибут работает не во всех браузерах. В них высота определяется автоматически по содержимому.
cellpadding, cellspacing.
Атрибут cellpadding устанавливает расстояние содержимого ячейки от рамки таблицы.
Атрибут cellspacing устанавливает расстояние между ячейками.
Пример:
Атрибуты тэга td.
width, height.
Атрибуты width и height устанавливают ширину и высоту ячейки таблицы соответственно.
Обратите внимание, размеры колонок и строк в таблице вычисляются исходя из размеров самой большой ячейки, поэтому в данном примере у ячеек 11 и 12 высота одинаковая, а у ячеек 12, 22 и 32 одинаковая ширина, хотя высота установлена только у ячейки 11, а ширина – у 32.
Так же стоит сказать, что размер ячейки не может быть меньше её содержимого. Поэтому если атрибуты width и height установлены меньшего размера, чем содержимое, то они будут проигнорированы браузером.
align, valign.
Атрибуты align и valign устанавливают способ выравнивания содержимого ячейки по горизонтали и вертикали соответственно.
Атрибут аlign может принимать следующие значения:
- left – по левому краю;
- center – по центру;
- right – по правому краю;
- justify – по ширине.
Атрибут vаlign может принимать следующие значения:
- top – по верхнему краю;
- middle – по середине;
- bottom – по нижнему краю.
Пример:
bgcolor, background.
У каждой ячейки таблицы можно установить свой собственный фон. Для этого существуют атрибуты bgcolor и background, принцип работы с ними такой же, как и у тэга table. Пример:
colspan, rowspan.
До сих пор во всех примерах количество ячеек в каждой строке было одинаковое. Теперь попробуем создать таблицу с разным количеством ячеек в строках:
Как видно из рисунка, браузер автоматически выделил пространство под недостающую ячейку.
Иногда бывает необходимо, что бы на одну ячейку первой строки было две и более ячейки во всех последующих. Для этого существует атрибут colspan, который увеличивает одну ячейку до нескольких. В качестве значения этому атрибуту необходимо присвоить число, которое соответствует количеству ячеек последующих строк. Пример:
Так же можно увеличить ячейку на несколько строк с помощью атрибута rowspan. Пример:
nowrap.
Атрибут nowrap запрещает переносить строки, если таблица не помещается в окно браузера. При этом появляется полоса горизонтальной прокрутки. Значений у атрибута нет, просто необходимо его включить в тэг.
Атрибуты тэга tr.
У тэга tr существуют следующие атрибуты align, valign, bgcolor. Работают они так же как и у тэга td, только оказывают влияния на все ячейки, содержащиеся в строке. Их изучите их самостоятельно.
Примечание: в данном параграфе были рассмотрены не все тэги и атрибуты для создания таблиц. Некоторые из них необходимы для работы речевых браузеров, некоторые работают корректно не во всех браузерах, а некоторые используются совместно с языком CSS. В дальнейшем если будет необходимо, вы изучите их самостоятельно.
Разметка страницы с помощью таблицы.
Как правило, все интернет страницы разделены на некоторые области, в которых содержится различная по назначению информация. Например, сверху может находится логотип и название сайта. Остальное пространство может быть разделено на три столбика: в левом может находиться навигация по сайту; в центральном – основной текст; а в правом – реклама. Разделить страницу на области подобным образом можно как раз с помощью создания таблицы, только она должна быть без рамки. Пример:
Обратите внимание, что во второй строке таблицы размер указан только для первой и последней ячейки. Размер средней ячейки рассчитывается автоматически исходя из оставшегося пространства.
Примечание: для того, что бы была более понятна структура такой страницы, предлагаю воспользоваться веб-инспектором, который, при наведении мышкой на определённую строку кода, выделяет синим цветом блок в самой странице, как показано на следующем рисунке:
Задание.
1. Создать примеры нумерованных списков со всеми возможными маркерами и просмотреть их в различных браузерах.
2. Создать пример использования атрибута nowrap тэга td.
3. Создать примеры использования атрибутов align, valign и bgcolor тэга tr.
3. Создать какую-либо таблицу, например это может быть таблица данных об учениках в классе (ФИО, дата рождения, адрес проживания и т.д.) или ведомость оценок.
4. Создать страницу размеченную таким же образом как в примере последнего подпункта данного параграфа. Поместить в первую ячейку название вашего текста, который вы должны были отформатировать, решая задание из предыдущего параграфа. Сам текст поместить в среднюю ячейку второй строки.
| Предыдущий параграф | Назад в содержание | Следующий параграф |