Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Название таблицы и её описаниеСодержание книги
Поиск на нашем сайте
Тег <caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после <table> <table> Вот пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> К тегу <caption> может быть применён атрибут align - выравнивание названия таблицы по горизонтали с возможными значениями left, right и center, а также атрибут valign который говорит от том где должно располагаться название сверху - top или снизу - bottom таблицы. Однако хочу отметить, что данные атрибуты в разных браузерах ведут себя по разному, так например, запись: <caption align="left">Текст</caption> - для браузеров IE и Opera разместит название сверху таблицы по её левому краю, а для браузера Firefox это будет значить, что название следует размещать слева от самой таблицы. Так же название таблицы или её краткое описание можно указывать с помощью атрибута summary тега <table> Вот так: <table summary="описание таблицы"> Такое описание никак не отображается и не выводится на экран обычными браузерами, однако может быть использовано поисковыми системами, а так же речевыми браузерами. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Группировка строк. Знакомимся с тегами: <thead>, <tbody> и <tfoot>. Данные теги являют собой емкость для строк таблицы (тег <tr>) позволяя тем самым группировать и логически ими управлять. Так: · Тег <thead> - (От Англ. table head - "голова" таблицы) Предназначен для группировки одной или нескольких верхних строк в таблице, делая тем самым "шапку" таблицы. · Тег <tbody> - (От Англ. table body - "тело" таблицы), Как правило этим тегом группируют центральные строки в таблице с основным содержанием. · Тег <tfoot> - (От Англ. table footer - нижний колонтитул таблицы) Определяет "подвал" таблицы, состоящий из одной или нескольких нижних строк. Следует отметить несколько правил использования данных тегов: Данные теги могут быть расположены только внутри таблицы - контейнера <table>. Теги <thead> и <tfoot> допускается использовать только один раз для одной таблицы, на тег <tbody> данное правило не распространяется. Структура таблицы при использовании всех трёх данных тегов должна выглядеть вот так: <table> То есть сверху всегда должен быть контейнер <thead> потом <tbody> и <tfoot>, данные теги не могут пересекаться и быть вложенными друг в друга. А вот тег <tfoot> можно поменять местами с <tbody>, и что примечательно строки взятые в данный тег всё равно браузерами будут отображаться внизу таблицы. К данным тегам допускается применять атрибуты выравнивания текста в ячейках align и valign, указывать цвет фона строк взятых в группу с помощью bgcolor, делать всплывающую подсказку с помощью title, однако на практике работать во всех браузерах будет только align и title. Просто ради информации.. есть ещё атрибуты: · char - Выравнивание относительно заданного символа. · charoff - Смещение относительно указанного символа. Но эти товарищи вообще не прижились ни в одном из известных браузеров! Толку с них как с козла молока. Так зачем спросите Вы вообще нужны теги группирования строк если с помощью них практически ничего не сделать? Отвечу чуть ниже, а пока смотрим пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Теперь отвечу, зачем вообще нужны <thead>, <tbody> и <tfoot>.. Основное предназначение данных тегов это логическая группировка строк в группы, а это в свою очередь облегчает работу с таблицей, например через стили или скрипты, теперь не нужно определять тот же стиль для каждой строчки, а достаточно указать его для всей группы.. Я сказал стиль? Ах да я же забыл, что Вы еще незнакомы с CSS.. Выходя за рамки темы данной главы, хочу отметить, что практически к любому тегу применим замечательный атрибут style, с помощью которого можно сделать практически все, что касается дизайна того или иного элемента.. А еще есть не менее замечательный тег <style> который внедряет в страницу стили CSS.. но это всё материал из другого учебника: (http://www.webremeslo.ru/css/glava0.html), поэтому здесь мы говорить об этом не будем. Просто покажу пока что малопонятный для Вас пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Курсивом в данном примере выделено стилевое описание тегов написанное с помощью средств CSS. Группировка столбцов. Группировать можно не только строки, но и столбцы таблицы с помощью тегов <col> и/или <colgroup> данные теги позволяют определить основные параметры столбцов таблицы с помощью следующих атрибутов: · width - Ширина столбца в процентах или пикселях. · align - Выравнивает текст в ячейке: o left - по левому краю. o right - по правому краю. o center - по центру. o justify - по левому и правому краю. · valign - Выравнивает текст в ячейке по вертикали: o top - по верхнему краю. o middle - по центру. o bottom - по нижнему краю. o baseline - по базовой линии. · bgcolor - Цвет фона ячейки. · span - Количество столбцов, к которым следует применять параметры. Давайте сгруппируем колонки нашей пробной таблицы про энергетическую ценность продуктов питания, она у нас состоит из пяти столбцов, значит, после тега <table> следует написать, что-то типа: <col width="140" bgcolor="#deb887"> Для каждой колонки свой тег <col> с указанными параметрами, где первый тег это описание левой колонки таблицы. второй тег - группирует вторую колонку и далее по порядку.. Обратите внимание, что в нашей таблице вторая, третья и четвертая колонки имеют одинаковые параметры width="100" bgcolor="#faebd7" так вот чтобы не прописывать каждую одинаковую колонку отдельно можно воспользоваться атрибутом span, который указывает какое количество последующих колонок имеет идентичные параметры. В нашем случае запись приобретёт следующий вид: <col width="140" bgcolor="#deb887"> Таким образом мы указали, что три колонки, начиная со второй, имеют одинаковую ширину и цвет фона. Представьте, если бы таких колонок было штук пятьдесят? как бы мы облегчили код. Ну а вот собственно рабочий пример наших стараний: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Тег <colgroup> практически идентичен тегу <col> и имеет точно такие же атрибуты, так наш выше изложенный пример мог бы иметь такой вид: <colgroup width="140" bgcolor="#deb887"> Никакой заметной разницы мы бы не увидели. Однако, некоторые отличия всё же есть.. Во-первых, <colgroup> может служить емкостью тля тегов <col>, конструкция такая: <colgroup> Во-вторых, если бы мы к тегу <table> применили атрибут rules со значением groups (об этом атрибуте речь пойдёт ниже) эффект будет достигнут только при использовании <colgroup>. Больше никакой разницы между этими тегами нет. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <td>30</td><td>50</td> <td>30</td><td>50</td> <td>30</td><td>50</td> <td>30</td><td>50</td> Обратите внимание, что в этом примере колонки таблицы поделены на три группы с помощью <colgroup>, в этих группах мы указали цвет фона и способ выравнивания, а ширину колонок мы задаём с помощью тегов <col>, которые находятся внутри контейнеров <colgroup>. Как и в случае с группировкой строк, колонки группируются с основной целью дальнейшего воздействия на них через стили или скрипты. Границы таблицы. Ранее в главе 4 " Таблицы" мы с Вами познакомились с атрибутами border - ширина границы и bordercolor - цвет границы, но это не весь набор инструментов применимых к границам таблицы.. Есть ещё два атрибута: frame и rules о них мы и поговорим ниже. Начнём с атрибута frame - рамка, данный атрибут применяется к тегу <table> и указывает на то, как следует отображать внешние границы таблицы, т.е. то есть вокруг самой таблицы, а не между её отдельными ячейками Атрибут frame может принимать следующие значения: · void - не отображать границы вокруг таблицы. · border - отображать границы вокруг таблицы (по умолчанию). · hsides - отображать только горизонтальные границы сверху и снизу. · vsides - отображать только вертикальные границы слева и справа. · above - отображать только верхнюю границу таблицы. · below - отображать только нижнюю границу таблицы. · lhs - отображать только левую границу. · rhs - отображать только правую границу. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> А вот атрибут rules в отличие от frame наоборот указывает на то, как следует рисовать границы между ячейками таблицы. Атрибут rules может принимать следующие значения: · all - отображать все границы между ячейками. · none - не отображать границы между ячейками. · rows - отображать границы только между строками. · cols - отображать границы только между стобцами. · groups - отображать границы только между группами строк и группами столбцов образованными с помощью тегов: <thead>, <tbody>, <tfoot> и <colgroup>. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Атрибут rules напрочь игнорирует браузер Opera, но как я уже не раз намекал такие проблемы можно решить с помощью средств CSS. Полезные советы: · Тег <col> помимо своей прямой задачи, решает еще одну полезную штуку.. · По наблюдениям, на тег <th> обращают внимание поисковые системы, и слова в заголовке таблицы имеют больший "вес", в глазах поисковиков, нежели чем текст в обычных ячейках, что в свою очередь может повлиять на результаты выдачи по тому или иному поисковому запросу. · Всё что написано в этой главе, по большей своей части, ориентированно на логику таблиц, что облегчает жизнь всем!: Так что не стоит пренебрегать тегами: <thead>, <tbody>, <tfoot>, <th>, <col>, <caption>, <colgroup> - они весьма полезны!
Глава 13 Фоновая музыка.
|
||||
Последнее изменение этой страницы: 2016-12-17; просмотров: 158; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.145.155.149 (0.012 с.) |