Лабораторная работа № 5. Таблицы в интернет-документах

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

1. Создать файл, в котором фоном является рисунок, указанный преподавателем.

2. Создать файл, в который внедрены рисунки с использованием выравнивания различными способами.

Краткие теоретические сведения

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

Каждая строка начинается тегом < TR> (Table Row) и завершает­ся тегом < /TR>. Отдельная ячейка в строке обрамляется парой тегов < TD> и < /TD> (Table Data) или < TH> и < /TH> (Table Header). Тег < TH> используется обычно для ячеек-заголовков таблицы, а < TD> - для ячеек-данных. Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также в расположении данных внутри ячейки. Содержимое ячеек типа < TH> отображается полужирным (Bold) шрифтом и располагается по центру (ALIGN=CENTER, VALIGN=MIDDLE). Ячейки, определенные тегом < TD>, по умол­чанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном направлении.

Теги < TD> и < TH> не могут появляться вне описания строки таблицы < TR>. Завершающие теги < /TR>, < /TD> и < /TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки или конец таблицы. Завершающий тег таблицы < /TABLE> не может быть опущен. Ко­личество строк в таблице определяется числом открывающих тегов < TR>, а количество столбцов - максимальным количеством < TD> или < TH> среди всех строк. Часть ячеек может не содержать ника­ких данных, такие ячейки описываются парой следующих подряд тегов: < TD>, < /TD>. Если одна или несколько ячеек, располагаю­щихся в конце какой-либо строки, не содержат данных, то их опи­сание может быть опущено, а браузер автоматически добавит тре­буемое количество пустых ячеек. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное ко­личество столбцов одного и того же размера, не разрешается.

Таблица может иметь заголовок, который заключается в пару те­гов < CAPTION> и < /CAPTION>. Описание заголовка таблицы должно располагаться внутри тегов < TABLE> и < /TABLE> в любом месте, однако вне области описания любого из тегов < TD>, < TH> или < TR>. Согласно спецификации языка HTML расположение описания заголовка регламентировано более строго: оно должно располагаться сразу же после тега < TABLE> и до первого < TR>. По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и центрируется в горизонтальном направлении.

Приведем пример простейшей таблицы, состоящей из двух строк и двух столбцов:

 

< HTML>

< HEAD>

< TITLE> Пример простейшей таблицы< /TITLE> < /HEAD>

< BODY>

< Table border>

< TR>

< TD> Ячейка 1 строки 1< /TD>

< TD> Ячейка 2 строки 1< /TD>

< /TR>

< TR>

< TD> Ячейка 1 строки 2< /TD>

< TD> Ячейка 2 строки 2< /TD>

< /TR>

< /TABLE>

< /BODY>

< /HTML>

Заголовок таблицы < CAPTION>

Тег заголовка таблицы < CAPTION> имеет единственный допу­стимый параметр ALIGN, принимающий значения ТОР (заголовок над таблицей) или BOTTOM (заголовок под таблицей). Параметр ALIGN может быть опущен, что соответствует значению ALIGN=TOP. В горизонтальном направлении заголовок таблицы все­гда располагается по ее центру. Таблица может не иметь заголовка.

Приведем пример записи заголовка таблицы:

< CAPTION ALIGN=BOTTOM> Заголовок, располагаемый внизу таблицы < /CAPTION >

Параметры тега < TABLE>

Основным тегом, применяемым при создании таблиц, является тег < TABLE>. Он может использоваться с рядом параметров, каж­дый из которых допустимо опускать. Набор допустимых парамет­ров зависит от браузера. Согласно спецификации HTML в теге < TABLE> могут использоваться следующие параметры:

BORDER

CELLSPACING

CELLPADDING

WIDTH

HEIGHT

ALIGN

BGCOLOR.

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

Для добавления в таблицу рамок необходимо включить в код < TABLE> параметр BORDER, который может иметь численное зна­чение. Например, < TABLE BORDER> или < TABLE BORDER=10>.

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

Параметр CELLSPACING. Форма записи параметра: CELL­SPACING = num, где num - численное значение параметра в пиксе­лах, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию зна­чение принимается равным двум. При задании CELLSPACING=0 рамки смежных ячеек сольются и создадут впечатление единой сет­ки таблицы.

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

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

Все три параметра - BORDER, CELLPADDING и CELLSPACING - действуют независимо друг от друга, если какой-нибудь из них опу­щен, то берется его значение, принятое по умолчанию.

Параметры WIDTH и HEIGHT. При отображении таблиц их ширина и высота автоматически вычисляется браузером и зависит от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, со­держимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используют параметры WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тега < TABLE>. Форма записи: WIDTH = 120 или WIDTH = 40 %. Численное значение ширины всей таблицы задается в пикселах или в процентах от всего размера окна. Заметим, что до­пустимо задавать значения, большие 100 %, хотя трудно предста­вить себе случай, где это необходимо.

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

Параметр ALIGN. Данный параметр тега < TABLE> определяет горизонтальное расположение таблицы в области просмотра. Допу­стимые значения: LEFT (выравнивание влево) и RIGHT (выравни­вание вправо). По умолчанию таблицы выровнены по левому краю. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания CENTER. В некоторых источниках по языку HTML значение CENTER (по центру) приводится в качестве допустимого в данном случае. Это соответствует спецификации HTML, но на практике и Netscape Navigator, и Microsoft Internet Ex­plorer реализуют только два значения. Дело в том, что присутствие параметра ALIGN в теге < TABLE> не только определяет месторас­положение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию карти­нок. Обтекание таблицы текстом с двух сторон не предусматривает­ся ни в каких случаях. Для более точного управления обтеканием следует использовать тег < BR> с параметром CLEAR так же, как это выполняется для < IMG>. Если параметр ALIGN опушен, то ме­сто справа и/или слева от таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то мож­но добиться ее расположения по центру окна просмотра. Для этого, например, можно все описание таблицы поместить внутри пары те­гов < CENTER> и < /CENTER>.

Приведем пример таблицы с обтекающим текстом.

< HTML>

< HEAD>

< TITLE> Таблица с обтекающим ее текстом< /TITLE> < /HEAD>

< BODY>

< TABLE ALIGN=LEFT WIDTH=70%>

< CAPTION> < H3> Наиболее употребительные мужские имена< BR> взрослого населения < /Н3>

< /CAPTION>

< UL>

< TR> < TD VALIGN=TOP>

< LI> Абрам < LI> Александр < LI> Алексей < LI> Альберт < LI> Анатолий < LI> Андрей < LI> Аркадий < LI> Борис < LI> Вадим < LI> Валентин < LI> Валерий < LI> Василий < LI> Виктор < LI> Виталий < LI> Владимир < LI> Владислав < LI> Вячеслав < LI> Геннадий < LI> Георгий < LI> Герман < LI> Григорий < LI> Дмитрий < /TD>

< TD VALIGN=TOP>

< LI> Евгений < LI> Ефим < LI> Иван < LI> Игорь < LI> Илья< LI> Иосиф < LI> Константин

< LI> Лев < LI> Леонид < LI> Михаил < LI> Николай

< LI> Олег < LI> Павел < LI> Петр

< LI> Роман < LI> Семен < LI> Сергей < LI> Станислав

< LI> Эдуард < LI> Юрий < LI> Яков

< /TD>

< /UL>

< /TR>

< /TABLE>

< BR> < BR> < BR> < BR> < BR> < BR>

Приведенные данные получены на основе анализа репрезентативной выборки, содержащей сведения о 5000 мужчин в возрасте старше 18 лет. < BR> Ука­занные 43 наиболее часто встречаемых имени охва­тывают 92% выборки. < BR> Частота встречаемости каждого из остальных имен не превосходит 0.3%

< /BODY>

< /HTML>

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

Каждую отдельную ячейку внутри таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут быть использованы для форматирования текста внутри ячейки. Внутри ячейки допустимо использование практически всех элементов 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>.

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

< HTML>

< HEAD>

< TITLE> Выравнивание элементов ТАБЛИЦЫ< /TITLE> < /HEAD>

< BODY>

< TABLE BORDER WIDTH=100%>

< TR>

< TD ALIGN=RIGHT> Ячейка 1 < TD>

< TD ALIGN=CENTER> Ячейка 2< /TD>

< ТО> Ячейка 3< /TD>

< TD ALIGN=RIGHT> Ячейка 4< /TD>

< TD ALIGN=CENTER> Ячейка 5< /TD>

< ТО> Ячейка 6< /TD>

< /TR>

< /TABLE>

< /BODY>

< /HTML>

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6

 

Для сложных таблиц характерна потребность в объединении не­скольких смежных ячеек по горизонтали или по вертикали в одну. Данная возможность реализуется с помощью параметров COLSPAN (COLunm SPANning) и ROWSPAN (ROW SPANning), задаваемых в кодах < TD> или < TH>. Форма записи: COLSPAN=num, где num - числовое значение, определяющее, на сколько столбцов следует расширить текущую ячейку по горизонтали. Применение параметра ROWSPAN аналогично, только здесь указывается количество строк, которые должна захватить текущая ячейка по вертикали. По умол­чанию для этих параметров устанавливается значение, равное единице. Допустимо одновременное задание значений обоих параметров для одной ячейки. Правильная установка значений этих параметров мо­жет оказаться не очень простой задачей, тем более, что большинство HTML-редакторов позволяют визуально конструировать с после­дующей генерацией HTML-кодов лишь простейшие таблицы.

Далее показан пример отображения таблицы, полученный по следующему HTML-коду:

< HTML>

< HEAD>

< TITLE> Использование параметров COLSPAN и ROWSPAN< /TITLE>

< /HEAD>

< BODY>

< TABLE BORDER>

< TR>

< TD ROWSPAN=2> Ячейка, захватывающая 2 строки < /TD>

< TD COLSPAN=2> Ячейка, захватывающая 2 столбца < /TD>

< /TR>

< TR>

< ТD> Ячейка 3< /TD>

< ТD> Ячейка 4< /TD>

< /TR>

< TR>

< TD> Ячейка 5< /TD>

< TD> Ячейка 6< /TD>

< ТБ> Ячейка 7< /ТБ>

< /ТR>

< /ТАBLЕ>

< /BODY>

< /HTML>

Ячейка, захватывающая 2 строки	Ячейка, захватывающая 2 столбца
Ячейка 3	Ячейка 4
Ячейка 5	Ячейка 6	Ячейка 7

 

Ход работы

1. Создать HTML-файл на основе примеров, приведенных в тео­ретической части и разобраться, как они работают.

2. Создать HTML-файл, в котором создать таблицы следующего вида:

Таблица 1

Код	Фамилия	Имя	Отчество	Год рождения	Факультет	Группа
	Иванникова	Анна	Ивановна		ЕК
	Баранова	Ирина	Алексеевна		БФ

 

Таблица 2

№ п/п

Марка стали

А0

В1

В2

В3

t0

А п

ри температуре t

Мало­углеро­дистая

0, 24

 

 

⇐ Предыдущая1234Следующая ⇒

Поделиться: