Влад Мержевич

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры

,

,

И др.

Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (, например). Запрещено добавлять внутрь встроенных элементов блочные (пример 1).

Пример 1. Использование блочных элементов

Блочные элементы

Lorem ipsum dolor sit amet...

Ut wisi enim ad minim veniam

В данном примере абзац (тег

) вставляется внутрь контейнера

, а ссылка (тег ) — в заголовок

. Кстати, ошибкой будет поступить наоборот — добавить

в контейнер (

Ut wisi

), поскольку тег
не относится к блочным элементам.

Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними. К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.

Ширина блочных элементов

По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег

в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег
внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.

Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width ), отступов (margin ), полей (padding ) и границ (border ). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.

Пример 2. Ширина слоя

Ширина

Lorem ipsum dolor sit amet...

В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.

Рис 1. Ширина блочного элемента

В том случае когда в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width .

Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto , это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.

Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.

Пример 3. Ширина слоя в процентах

Ширина

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

Результат примера показан на рис. 2.

Рис. 2. Отображение ширины слоев в браузере

Ширина первого слоя в данном примере (layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег

). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3 ) вообще не применяется свойство width , поэтому оно определяется по умолчанию — auto . В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.

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

Высота

С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin , padding и border . Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.

Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).

Пример 4. Высота слоя

Высота

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.

Результат данного примера продемонстрирован на рис. 3.

Рис. 3. Высота блока в разных браузерах

Видно, что браузер оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.

Цвет фона

Цвет фона элемента проще всего устанавливать через универсальное свойство background . Фоном при этом заливается область, которая определяется значениями width , height и padding (рис. 4).

Рис. 4. Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы

Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.

а. Internet Explorer 7

б. Firefox, Internet Explorer 8+

Рис. 5. Отображение рамки в браузерах

В примере 5 показано, как создать код для получения подобной границы.

Пример 5. Пунктирная рамка

Рамка

Lorem ipsum dolor sit amet...

Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.

Резюме

Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.

Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width , но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height , поскольку по умолчанию браузер применяет аргумент auto , который заставляет настраивать размеры элемента автоматически.

В этой лекции рассказывается об элементах разметки тела HTML-документа, подробно разбирается их типизация, назначение и применение.

Теги тела документа

Теги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из:

  • иерархических контейнеров и заставок;
  • заголовков (от Н1 до Н6);
  • блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
  • горизонтальных отчеркиваний и адресов;
  • текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
  • математических описаний, графики и гипертекстовых ссылок.

Тело документа – контейнер ВОDY

Описание тегов тела документа следует начать с тега ВОDY. В отличие от тега НEАD, тег ВОDY имеет атрибуты.

Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:

<ВОDY ВАСКGROUND="image.gif">

Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. В данном случае это адрес локального файла. Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.

В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Также имеется возможность задавать цвета по названию. Далее в таблице приведены названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.

Название Код Название Код
aqua #00FFFF navy #000080
black #000000 olive #808000
blue #0000FF purple #800080
fuchsia #FF00FF red #FF0000
gray #808080 silver #C0C0C0
green #008000 teal #008080
lime #00FF00 white #FFFFFF
maroon #800000 yellow #FFFF00

Так, значения атрибутов в таблице 3.1 определяют цвет текста как синий, фона - белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тега ВОDY указать

<ВОDY ВGCOLOR=#FFFFFF ТЕХТ=#0000FF VLINK=#FF0000 LINK=#00FF00>,

то цвет фона будет белым, текст будет синим, ссылки - зелеными, а пройденные ссылки станут красными. Однако пользоваться этими атрибутами следует крайне осторожно, так как у пользователя может оказаться другой интерфейс, который эти параметры не интерпретирует.

Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег <ВОDY LEFTMARGIN =»40″> создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.

Теги управления разметкой

Заголовки

Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ> еще меньше и так далее до <Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 - крайне редко.

Ниже на рисунке показан результат использования следующих заголовков:

Заголовок 1

Заголовок 2

Тег

Тег

Применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках.

Атрибут АLIGN

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

АLIGN=justify выравнивание по левому и правому краям. Реализовано не во всех программах интерпретации.

АLIGN=left выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы - на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=left можно опустить.

АLIGN=right выравнивание по правому краю. Текст, выравненный по правому краю и не выравненный по левому - концы строк находятся на одном уровне, а начало на разных, - часто используется с целью создать оригинальный дизайн. Для этого задается атрибут АLIGN=right в обычных тегах, например в теге <Р>.

АLIGN=center центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тегом <АLIGN=сеntеr>. Однако этот тег применим не ко всем объектам HTML-страницы, поэтому разработчики Netscape добавили тег <СЕNТЕR>, который центрирует любые объекты и поддерживается браузерами Netscape Navigator 3.0, Microsoft Explorer 3.0 и другими. К тегу <СЕNТЕR> нужно относиться с осторожностью. Какой-нибудь браузер может его вообще проигнорировать, и на странице окажется текст, выравненный по левому краю.

Обтекание графики текстом. С помощью атрибута ALIGN можно заставить текст «обтекать» графический объект. Для этого следует поместить тег туда, где должен быть графический объект, и добавить атрибут ALIGN=left, ALIGN=right или АLIGN=center. Кроме того, с помощью атрибутов НSPAСЕ и VSPАСЕ (они описаны ниже) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Чтобы текст не «обтекал» графику, а прерывался, необходимо применить тег
c атрибутом СLEAR.

Использование тега <ВR>

Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме концы строк текста игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этого и нужен тег ВR. Атрибут СLЕАR в теге <ВR> используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:


Текст будет продолжен, начиная с ближайшего пустого левого поля.
Текст будет продолжен, начиная с ближайшего пустого правого поля.
Текст будет продолжен, как только и левое, и правое поля окажутся пустыми.

Элемент разметки

Тег (Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в теги , не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там тег <ВR>.

Теги управления отображением символов

Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.

Теги, управляющие формой отображения

Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации - все это делает страницы более интересными. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью тега FONT. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя.

Теги <ВIG> и - изменение размеров шрифта

Текст, расположенный между тегами <ВIG> или , будет, соответственно, больше или меньше стандартного.

Верхние и нижние индексы

С помощью тегов и можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать теги и с атрибутом FONT SIZE=-1, уменьшающим размер шрифта.

Атрибут SIZЕ

Атрибут SIZЕ тега позволяет задавать размер текста в данной области. Если вы не пользуетесь тегом для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3. Некоторые браузеры тег не поддерживают, поэтому желательно употреблять его только внутри текстовой области. В других случаях лучше использовать теги <Н1>, <Н2>, <НЗ> и т.д. Главное преимущество тега состоит в том, что после окончания действия он не разбивает строку, как теги <Нn>. Поэтому тег бывает очень полезен для изменения размера шрифта в середине строки.

Атрибут СОLОR

Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.

Теги, управляющие формой отображения, приведены в таблице.

Тег Значение
Курсив (Italic)
Усиление (Вold)
Телетайп
Подчеркивание
Перечеркнутый текст
Увеличенный размер шрифта
Уменьшенный размер шрифта
Подстрочные символы
Надстрочные символы
<ЕМ>… Типографское усиление
<СIТЕ>… Цитирование
Усиление
<СODE>… Отображает примеры кода (например, "коды программ")
Последовательность литералов
<КВD>… Пример ввода символов с клавиатуры
Переменная
Определение
Текст, заключенный в двойные кавычки

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

Создание списков в HTML

Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists

    ), нумерованный список (упорядоченный) (Ordered Lists
      ) и список определений. Теги для ненумерованных и нумерованных списков - это основа HTML. HTML 3.2 добавляет несколько атрибутов к тегам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты и в сами теги элементов списка (List Item
    1. ), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.

      Неупорядоченные списки - тег

        Ненумерованный список. Ненумерованный список предназначен для создания текста типа:

        • первый элемент списка;
        • второй элемент списка;
        • третий элемент списка.

        Записывается данный список в виде последовательности:

        • первый элемент списка
        • второй элемент списка
        • третий элемент списка

        Теги - это теги начала и конца ненумерованного списка, тег

      • (List Item) задает тег элемента списка. Помимо этих тегов, существует тег, позволяющий именовать списки - (List Header).

        Атрибуты маркеров в ненумерованном списке

        Чтобы не применять одни и те же маркеры на разных уровнях вложенности, можно использовать атрибут ТYРЕ. Вы можете задать любой тип маркера в произвольном месте списка. Можно даже смешивать разные типы маркеров в одном списке. Ниже перечислены теги с атрибутами стандартных маркеров:

          Тег создает сплошные маркеры такого типа, как в списках первого уровня по умолчанию.
            Тег создает маркеры в виде окружностей.
              Тег создает сплошные квадратные маркеры.

              Упорядоченные списки - тег

                Нумерованные списки. Тег

                  вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:

                  <ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3., 4. и т.д. <ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С., D. и т.д.

                    Тег создает список с нумерацией в формате а., b., с., d. и т.д. <ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III., IV. и т.д.

                    Список определений - тег

                    Теги списка (Definition List:

                    ,
                    ,
                    ) используют для создания списка терминов и их определений. Схема использования тега следующая.

                    Термин
                    Определение

                    Определяемый термин записывается на одной строке, а его определение - на следующей, с небольшим отступом вправо. Тег

                    позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если на странице несколько тегов
                    , то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег
                    . Помните, что тег lt;DL> сдвигает только левую границу абзаца.

                    Горизонтальные линейки - тег <НR>

                    Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на части. С помощью одного лишь тега <НR> можно придать странице оригинальный вид. Попробуйте поэкспериментировать с тегом <НR>, и вы получите линии, совсем не похожие на те, которыми обычно пользуетесь.

                    Преформатированный вывод - тег <РRЕ>

                    Применение этого тега позволяет отобразить текст «как есть» (без форматирования), теми же символами и с тем же разбиением на строки.

                    Применение тега

                    Текст, помещенный между тегами и , мерцает. Данный тег поддерживается только браузером Netscape Navigator. Пользоваться им следует с большой осторожностью.

                    Любая веб-страница состоит из расположенных на ней элементов, и практически всегда за их размещение отвечает блочная верстка div. Конечно, существует еще и табличная верстка с использованием тегов

                    , , .

                    Пример таблицы:

                    Пример таблицы

                    Этот пример отобразится в броузере так:

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

                    Дело в том, что div верстка сайта позволяет задавать множество css-свойств, недоступных для таблиц. Кроме того, самый главный недостаток табличной системы состоит в том, что таблица не будет показана на экране до тех пор, пока она не будет полностью загружена браузером. Если весь сайт сделан в таблице, то он появится на дисплее лишь после того, как будет полностью загружен весь html-код страницы.

                    Тег DIV и свойство float

                    Основа блочной системы — это тег

                    , который является контейнером для контента. Внутри него также могут содержаться другие контейнеры
                    .

                    Использовать тег DIV — не сложнее, чем . Как правило, стандартная структура сайта формируется следующим образом: существует основной контейнер

                    (часто ему присваивается класс с названием wrapper, container, main и т.д.). Внутри этого контейнера располагаются блоки меню, контентной части, сайдбара.

                    По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».

                    Рассмотрим это свойство на примере с двумя блоками.

                    Блок для контента
                    Блок для сайдбара

                    Этот код даст следующий результат:

                    Свойство clear

                    Важно учитывать, что свойство float распространяется не только на сам блок, в котором оно прописано, но и на последующий элемент, который будет идти за этим блоком. То есть если мы к вышеописанным двум блокам добавим еще один блок, не указывая ему никаких свойств, то он расположится не с новой строки, а начнется справа от второго блока.

                    Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.

                    Дополним вышеуказанный пример новым элементом:

                    Блок для контента
                    Блок для сайдбара
                    Новый блок, расположенный снизу

                    Результат:

                    Отступы в блочной верстке

                    Помимо расположения блоков, немаловажным является задание отступов как между блоками, так и внутри них. Для этого, соответственно, используются свойства margin и padding.

                    Отступы задаются отдельно для верхней, правой, нижней и левой частей элемента. Их можно задать одной строкой путем перечисления четырех значений:

                    Margin: 20px 10px 0 40px

                    Блок с такими параметрами будет располагаться на 20 пикселей ниже вышестоящего элемента, на десять пикселей от правостоящего элемента, будет иметь нулевой отступ снизу и будет иметь отступ размером в 40 пикселей слева.

                    Если все те же самые показатели указать в свойстве padding, то это будут внутренние отступы для контента по отношению к границам блока, в которых он расположен.

                    Можно также задавать отдельные свойства для отдельных граней с помощью margin-top, margin-bottom, margin-left, margin-right (и аналогично для padding). В таком случае, если какая-то из граней не будет указана, то отступ с ее стороны будет равен нулю или будет определен общими свойствами css, заданными для блоков на странице.

                    Иногда бывает необходимо произвести выравнивание большого блока документа, содержащего не только текст, но и рисунки, таблицы и т.п. Для этих целей используется элемент-контейнер DIV . Спецификация элемента DIV:

                    ALIGN="выравнивание">

                    Атрибут ALIGN определяет тип выравнивания содержимого и может иметь те же значения, что и элемент P.

                    Отступы

                    Иногда требуется отобразить блок текста с отступом. Для этого блок текста помещают в элемент-контейнер BLOCKQUOTE . Тогда содержимое этого элемента будет отображаться с небольшими отступами слева и справа, а также отделяться от остального текста пустыми строками.

                    Таблицы

                    Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Они используются не только традиционно как метод представления данных, но и как средство форматирования Web-страниц. Документ HTML может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга.

                    Каждая таблица начинается тегом <TABLE > и заканчивается тегом TABLE >. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в которых задаются данные для отдельных ячеек.

                    Каждая строка начинается тегом <TR > и заканчивается тегом TR >. Отдельная ячейка в строке обрамляется парой тегов <TD > и TD > или <TH > и TH >. Тег

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

                    Теги

                    и не могут появляться вне описания строки таблицы
                    Ячейка 1Ячейка 2Ячейка 3Ячейка 4

                    Спецификация тега

                    :

                    ALIGN="выравнивание"

                    BORDER="толщина рамки"

                    CELLPADDING="расстояние"

                    CELLSPACING="расстояние"

                    HEIGHT="высота"

                    WIDTH="ширина"

                    Атрибут ALIGN определяет выравнивание таблицы в окне просмотра броузера. Он может иметь одно из двух значений: LEFT (по левому краю) и RIGHT (по правому краю). По умолчанию – LEFT.

                    Атрибут BORDER управляет толщиной рамки. Значением этого атрибута является число. Это число определяет толщину рамки таблицы в пикселях. По умолчанию толщина рамки – 1.

                    Атрибут CELLPADDING определяет расстояние в пикселях между рамкой и содержимым ячейки. По умолчанию – 1.

                    Атрибут CELLSPACING определяет расстояние в пикселях между ячейками таблицы. По умолчанию – 2.

                    Атрибут HEIGHT определяет высоту таблицы в пикселях.

                    Атрибут VALIGN определяет вертикальное выравнивание содержимого таблицы. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE.

                    Атрибут WIDTH определяет ширину таблицы в пикселях или процентах от ширины окна броузера.

                    Спецификация тега

                    ALIGN="выравнивание"

                    BGCOLOR="цвет фона"

                    VALIGN="вертикальное выравнивание"

                    Атрибут ALIGN определяет выравнивание содержимого всех ячеек строки. Он может иметь одно из трех значений: LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру). По умолчанию – CENTER.

                    Атрибут BGCOLOR определяет цвет фона для всех ячеек строки. Его значение можно указывать в символьной нотации или в формате RGB.

                    Атрибут VALIGN определяет вертикальное выравнивание содержимого всех ячеек строки. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE.

                    Спецификация тега

                    ALIGN="выравнивание"

                    BGCOLOR="цвет фона"

                    COLSPAN="количество ячеек"

                    HEIGHT="высота ячейки"

                    ROWSPAN=" количество ячеек "

                    VALIGN="вертикальное выравнивание"

                    WIDTH="ширина ячейки"

                    Атрибут ALIGN определяет выравнивание содержимого ячейки. Он может иметь одно из трех значений: LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру). По умолчанию – CENTER.

                    Атрибут BGCOLOR определяет цвет фона для ячейки. Его значение можно указывать в символьной нотации или в формате RGB.

                    Атрибут COLSPAN позволяет объединить несколько соседних ячеек по горизонтали. Значение этого атрибута – количество объединяемых ячеек.

                    Атрибут HEIGHT определяет высоту ячейки в пикселях.

                    Атрибут ROWSPAN позволяет объединить несколько соседних ячеек по вертикали. Значение этого атрибута – количество объединяемых ячеек.

                    Атрибут VALIGN определяет вертикальное выравнивание содержимого ячейки. Он может иметь следующие значения: TOP (по верхнему краю), MIDDLE (посередине) и BOTTOM (по нижнему краю). По умолчанию – MIDDLE.

                    Атрибут WIDTH определяет ширину ячейки в пикселях.

                      Вопросы для закрепления.

                      1. Чем отличаются абзацы от заголовков?

                        Какие бывают списки?

                        Какие теги используются для изменения шрифта?Что такое «информация»?

                    4. Домашние задание:

                    1. Создайте таблицу, которая в первой строке содержит одну ячейку, во второй – две, в третьей – три ячейки.

                    2. На практике понаблюдайте эффект использования различных значений атрибута ALIGN тега .