Таблицы в HTML- документах

Время

Деятельность учителя

Деятельность учащихся

Доска, экран, ком-р

1-2 минута

Приветствует учащихся, отмечает посещаемость, проверяет готовность к уроку.

Слушают учителя

3-4 минута

Рассказывает учащимся цель урока и план работы:

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

Слушают учителя, задают вопросы по плану урока

Слайд № 1

5-38

Теоретическая часть:

Общие сведения о таблицах

Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы.

В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования Web-страниц.

Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга

Рассмотрим теги, описывающие таблицы и их параметры.

Тег <TABLE>

Основным тэгом, применяемым при создании таблиц, является тэг-контейнер <TABLE>. Он может использоваться с рядом параметров, каждый из которых допустимо опускать. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH , ALIGN, HEIGHT и BGCOLOR.

Как известно, таблица состоит из строк, поэтому должен существовать тэг, “говорящий” браузеру, что является строкой. Отсюда каждая строка начинается тэгом <TR> (Тable Row – строка таблицы) и завершается тэгом </TR>.

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

1. с помощью тэгов <TD> и <TD> (Тable Data – данные таблицы) – таким образом создаются ячейки с данными;

2. используя тэги <TH> и <TH> (Тable Нeader – заголовки таблицы) - применяются для создания ячеек, содержащих заголовки таблицы.

Рассмотрим назначение общеупотребительных параметров тэга <TABLE>:

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

Для добавления в таблицу рамок необходимо включить в код <TABLE> параметр BORDER, который может иметь численное значение. Например, <TABLE BORDER> или <TABLE BORDER=O>. Численное значение параметра определяет толщину рамки в пикселах, рисуемую вокруг всей таблицы, однако на толщину рамок вокруг каждой ячейки это значение не влияет. При отсутствии численного значения обычно оно принимается равным минимальному значению (1), хотя для различных браузеров стиль показа рамок может отличаться. Возможность независимого управления отображением рамки вокруг всей таблицы и рамками вокруг ячеек отсутствует

Параметр CELLSPACING задает расстояний между ячейками. Значение параметра определяет количество пикселей, задающее расстояние между смежными рамками ячеек как по горизонтали, так и по вертикали.

Параметр CELLPADDING. Величина параметра определяет размер свободного пространства (отступа) между рамкой ячейки и данными внутри ячейки. По умолчанию значение принимается равным единице. Установка параметра CELLPADDING равным нулю может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, что выглядит не очень эстетично.

Действие параметров CELLPADDING и CELLSPACING очень похоже друг на друга. Для таблицы без рамок изменение того или другого параметра приводит к одному и тому же результату. Оба параметра влияют на соответствующие отступы одновременно по горизонтали и по вертикали. Все три параметра — BORDER, CELLPADDING и CELLSPACING действуют независимо друг от друга, если какой-нибудь из них опущен, то берется его значение, принятое по умолчанию. Наиболее компактная таблица будет получена заданием следующего описания:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>

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

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

Браузеры по возможности форматируют таблицы таким образом, чтобы ширина таблицы не превосходила ширины окна просмотра. В большинстве случаев динамическое определение размеров таблицы дает в результате эстетически соразмерное изображение с эффективным использованием реальной площади окна просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются параметры WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тэга <TABLE>.

Например,

<TABLE WIDTH=150> - ширина таблицы должна быть 150 пикселей;

<TABLE HEIGHT=50%> - высота таблицы должна составлять 50% от текущей высоты окна просмотра.

Аналогичные параметры могут задаваться и для отдельных ячеек. Заметим, что задание конкретного значения параметра, например width=150, не означает, что таблица в любом случае будет иметь указанную ширину, а лишь определяет рекомендуемую ширину, которая будет выдержана по возможности.

Параметр ALIGN Данный параметр тэга <TABLE> определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения — LEFT (выравнивание влево) и RIGHT (выравнивание вправо). По умолчанию таблицы выровнены по левому краю. Присутствие параметра ALIGN в тэге <TABLE> не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы текстом с двух сторон не предусматривается ни в каких случаях. Если параметр ALIGN опушен, то место справа и/или слева от таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то можно добиться ее расположения по центру окна просмотра. Для этого, например, можно все описание таблицы поместить внутри пары тэгов <CENTER> и </CENTER>.

Задание: Самостоятельно найти параметры, позволяющие задать цвет рамки и фона таблицы.

Форматирование данных внутри таблицы

Каждую отдельную ячейку внутри таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут быть использованы для форматирования текста внутри ячейки. Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться внутри тела документа <BODY>, в том числе тэги, управляющие расположением текста <P>, <BR>, <HR>, коды заголовков — от <H1> до <H6>, тэги форматирования текста — <В>, <I>, <STRONG>, <BIG>, <EM>, <FONT SIZE>, <FONT COLOR>, тэги вставки графических изображений <IMG>, гипертекстовых ссылок <А> и т. д.

Сразу же подчеркнем, что область действия тэгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки. Например, если внутри ячейки определен цвет текста - <FONT COLOR=RED>, то даже при отсутствии завершающего кода </FONT> или расположения его через несколько ячеек или строк таблицы, текст следующей ячейки будет отражен цветом по умолчанию.

Для форматирования данных внутри ячеек таблицы предусмотрены следующие параметры.

Параметры выравнивания содержимого ячеек — ALIGN и VALIGN. Могут применяться в кодах <TR>, <TD> и <TH>. Параметр горизонтального выравнивания ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию LEFT для <TD> и CENTER для <TH>).

Параметр вертикального выравнивания VALIGN может принимать значения ТОР (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (посередине), BASELINE (по базовой линии). По умолчанию — MIDDLE. Выравнивание по базовой линии обеспечивает привязку текста отдельной строки во всех ячейках к единой линии. Задание параметров выравнивания на уровне кода <TR> определяет выравнивание для всех ячеек данной строки, при этом в каждой отдельной ячейки строки может быть определены свои параметры, переопределяющие действие параметров, заданных в <TR>.

Параметры COLSPAN и ROWSPAN. При создании таблиц часто возникает необходимость объединения ячеек по горизонтали или по вертикали. Такая возможность поддерживается в HTML и реализуется с помощью параметров COLSPAN (СОLumn SPANning – объединение колонок) и ROWSPAN (ROW SPANning – объединение строк), которые помещаются в тэги <TD>, <TH>.

По умолчанию для этих параметров устанавливается значение, равное 1. Допустимо одновременное задание значений обоих параметров для одной ячейки.

Пример использования параметров COLSPAN и ROWSPAN на слайде № 4.

Практическая часть: Слайд № 7.

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

Слайд № 2

Слайд № 3

Слайд № 4

Слайд № 5

Слайд № 6

39-40

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

1. материал лекции;

Записывают домашнее задание

Домашнее задание записано на доске.