3. Основы построения таблиц

Дата: 2025-05-25; Просмотры: 22

Оценка:

0.00 из 5.00 — оценок

Скачиваний: 0

Скачать

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

3.1. Создание и форматирование

простой таблицы

Любая таблица в HTML начинается с элемента-контейнера <TABLE>, содержащего все элементы, необходимые для ее создания.

<TABLE>

<!--Здесь будет размещено описание таблицы -->

</TABLE>

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

Таблица с ячейками, заполняемыми текстом, подразумевает использование ряда специфических элементов, таких как заголовок столбца <TH> и заголовок всей таблицы <CAPTION>.

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

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

Задание общих параметров таблицы. Среди многочисленных свойств таблицы можно выделить общие свойства, относящиеся ко всей таблице, и свойства содержимого таблицы. К первой группе свойств относятся: ширина таблицы, параметры рамок, выравнивание, задание цвета фона. К содержимому таблицы можно отнести гарнитуру и цвет шрифта (табл. 3.1).

<TABLE ALIGN="center" BORDER="2" BORDERCOLOR="blue"

WIDTH="50%">

<!--Здесь будет размещено описание таблицы -->

</TABLE>

В приведенном примере таблица помещается в центре страницы, толщина рамки составляет 2 пиксела, цвет рамки – голубой, ширина таблицы составляет 50 % от размера окна браузера.

Таблица 3.1

Атрибуты тега < TABLE>

Окончание табл. 3.1

Создание строк и ячеек таблицы. Теги <TR>, <TD> и <TH> составляют внутреннюю структуру таблицы и могут содержать набор определенных параметров. Прежде чем перейти к их рассмотрению, заметим, что внутри тега указания ряда таблицы <TR> не могут располагаться графические изображения, текст, списки и прочие HTML-элементы и теги. Форматирование и указание других тегов может быть только в пределах тегов <TD> и <TH>, определяющих содержимое табличных ячеек.

Тег <TR> – элемент, задающий строку таблицы. Количество строк определяется количеством встречающихся пар тегов <TR></TR>. Конечный элемент тэга можно не использовать, так как строка заканчивается там, где начинается следующая строка. Атрибуты тега <TR> представлены в табл. 3.2.

<TABLE ALIGN="center" BORDER="2" BORDERCOLOR="blue"

WIDTH="50%">

<TR

<TD>содерж</TD> <TD>содерж</TD>

</TR>

</TABLE>

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

Таблица 3.2

Атрибуты тега < TR>

Для создания ячейки служат теги <TD></TD> и <TH></TH>. Конечный тэг для них также можно не использовать, если есть последующий открывающий тег. Отличие этих тегов состоит в том, что содержимое тега <TH> выделяется жирным шрифтом в отличие от <TD> и для <TD> значением по умолчанию является выравнивание по левому краю ячейки, для <TH> – выравнивание по центру.

Для тегов <TD> и <TH> атрибуты ALIGN и VALIGN – аналогичны тегу <TR>. Они применяются в ситуации, когда горизонтальное или вертикальное выравнивание в какой-либо одной ячейке отличается от выравнивания, заданного для всей строки. Назначение остальных атрибутов для этих тегов приведены в табл. 3.3.

Таблица 3.3

Атрибуты тега < TD> и < TH>

Окончание табл. 3.3

Немного внимания нужно уделить наследованию свойств выравнивания. Атрибуты ALIGN и VALIGN применялись в тегах <TABLE>, <TR>, <TD> и <TH>. В HTML применяется способ выравнивания, который состоит в наследовании дочерними элементами свойств выравнивания родительского элемента. Так по отношению к тегу <TABLE> дочерними являются <TR>, <TD> и <TH>. В каждом из них можно задать параметры выравнивания. Однако при отображении какой-либо ячейки к ее содержимому будет применяться свойство выравнивания с наиболее высоким приоритетом согласно принятому в HTML порядку:

– наиболее высоким приоритетом обладают атрибуты, установленные внутри символьных данных ячейки (например, если в ячейке размещен элемент абзаца <P>, то к содержимому ячейки будет применено выравнивание, установленное атрибутами тега <P>);

– атрибуты тегов <TD> или <TH>;

– атрибутов элементов строки или группы строк;

– атрибуты элемента <TABLE>;

– самым низким приоритетом обладают значения атрибутов, установленные по умолчанию.

<TABLE ALIGN="center" BORDER"="2 BORDERCOLOR="blue"

WIDTH="50%">

<TR>

<TD

содерж</TD>

</TR>

</TABLE>

В приведенном примере выравнивание содержимого первой ячейки будет осуществляться по ее нижнему краю, а содержимое второй ячейки – по средней части ячейки, как указано в теге <TR>.

Для создания подписи таблицы используется парный тег <CAPTION> </CAPTION>, который должен находиться внутри тегов <TABLE> и </TABLE>, но вне описания строки и ячейки. Заголовок таблицы всегда располагается над таблицей по центру и отображается тем же шрифтом. При желании можно изменить формат названия. Для этого тег <CAPTION> дополняется атрибутами ALIGN и VALIGN. ALIGN – выравнивает название относительно границы таблицы, поэтому в качестве значения атрибута ALIGN может быть указано значение параметра top (над таблицей по центру), bottom (под таблицей по центру), left (по левой границе), right (по правой границе). VALIGN – выравнивает название таблицы при размещении его над или под таблицей. Данные атрибуты поддерживаются только браузером Internet Explorer.

Рассмотрим примеры создания простых таблиц.

Пример 1. Создайте в HTML таблицу, состоящую из двух строк и трех столбцов (рис. 3.1). Таблица должна иметь ширину 50 %, содержимое ячеек должно располагаться посередине, заголовок таблицы необходимо разместить над таблицей по центру и цвет границ таблицы сделать зеленым.

Простая таблица 1

Рис. 3.1. Таблица для примера 1

Результат решения данного примера приведен ниже на языке HTML, результат отображения в браузере представлен на рис. 3.2.

<HTML>

<HEAD> <TITLE> пример создания простой таблицы 1

</TITLE>

</HEAD>

<BODY>

<TABLE ALIGN="center" WIDTH="50%"

BORDER="1" BORDERCOLOR="green">

<CAPTION>Простая таблица 1</CAPTION>

<TR ALIGN="center"> <TD> 1 </TD> <TD> 2 </TD> <TD> 3 </TD>

</TR>

<TR ALIGN="center"> <TD> 4 </TD> <TD> 5 </TD> <TD> 6 </TD>

</TR>

</TABLE>

</BODY>

<HTML>

Рис. 3.2. Отображение простой таблицы примера 1 в браузере

Пример 2. Дана текстовая таблица «Состав семьи» с заголовками столбцов (рис. 3.3), которую необходимо создать в HTML.

Состав семьи

Рис. 3.3. Таблица для примера 2

Результат решения данного примера приведен ниже на языке HTML, результат отображения в браузере представлен на рис. 3.4.

<HTML>

<HEAD> <TITLE> пример создания таблицы пример 2</TITLE>

</HEAD>

<BODY>

<TABLE BORDER ="1">

<CAPTION ALIGN="top"> Состав семьи </CAPTION>

<TR><TH> Члены семьи </TH><TH> Год рождения </TH>

<TH> Место работы(учебы) </TH></TR>

<TR><TD> Папа </TD><TD> 1965 </TD><TD> БСМП </TD></TR>

<TR>

<TD> Мама </TD><TD> 1968 </TD><TD> маг-н «Эльдорадо»

</TD></TR>

<TR>

<TD> Лена (дочь) </TD><TD> 1992 </TD><TD> Сиб ГАУ </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рис. 3.4. Отображение таблицы примера 2 в браузере

Задание цвета. Наиболее привлекательной таблица становится, когда в ней появляется цветовое оформление. Рассмотрим возможности задания цвета для элементов таблицы: рамок, фона, строк, ячеек и т. д. Задание цвета рамок уже было рассмотрено в примере 1. Там был использован атрибут BORDERCOLOR в теге <TABLE>, который задавал цвета внешней рамки и внутренних рамок таблицы.

Например, таблица будет отображена с зелеными рамками, если записать тег следующим образом:

<TABLE BORDERCOLOR="green" BORDER="5">

При этом толщина внешней рамки будет равна 5 пикселам, а внутренних рамок – 1 пикселу.

Цвет внутренних границ, как и цвет внешней рамки, устанавливается атрибутом BORDERCOLOR, который помещается в теги <TR>, <TH> или <TD>. Например, тег <TR BORDERCOLOR="red"> задает красные границы всех ячеек строки, а желтые границы ячеек заголовков определяются тегом <TH BORDERCOLOR="yellow">.

Кроме простых рамок в HTML можно использовать и объемные. Такого эффекта можно достичь за счет разных цветов верхней и нижней линий, образующих рамку. Создание объемной рамки выполняется с использованием двух атрибутов: «определяет цвет затененной части рамки» и «задает цвет освещенной части рамки».

Так, например, если учесть, что таблица освещается со стороны верхнего левого угла, то верхняя рамка имеет освещенную (верхние и левые линии) и затененную (нижние и правые линии) части, в то время как для внутренних рамок все наоборот. Например, тег

<TABLE BORDERCOLORDARK="brown"

BORDERCOLORLIGHT="yellow" BORDER="5">

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

Если атрибуты BORDERCOLORDARK и BORDERCOLORLIGHT ввести в состав тегов <TR>, <TD> или <TH>, то можно оттенить внутренние границы ячеек.

Для изменения цвета фона в таблицах используется атрибут BGCOLOR. В зависимости от того, в какие теги (<TABLE> <TR>, <TD> или <TH>) входит BGCOLOR, то получится четыре варианта задания цвета: фона всей таблицы, фона строки, фона ячейки заголовка или фона данных. Например, тег <TABLE BGCOLOR="red"> назначает красный фон всей таблицы, а желтый фон ячейки задает тег <TD BGCOLOR="yellow">.

Пример 3. Создать таблицу в HTML (рис. 3.5), в ячейках которой будут отображены цвета радуги.

Радуга

Рис. 3.5. Таблица для примера 3

Результат решения данного примера приведен ниже на языке HTML, результат отображения в браузере представлен на рис. 3.6.

<HTML>

<HEAD>

<TITLE> пример создания таблицы, в которой

показаны цвета радуги (пример 3)

</TITLE>

</HEAD>

<BODY>

<CENTER>

<FONT COLOR="red" SIZE="5">Радуга</FONT>[i]

<TABLE " BORDER="3" CELSPACING="15"

CELLPADING="10" BORDERCOLOR="tomato">

<TR><TD BGCOLOR="#ff3030" ALIGN="center">Красный

<TR><TD BGCOLOR="#ffd000" ALIGN="center">Оранжевый

<TR><TD BGCOLOR="#f3ff5f" ALIGN="center">Желтый

<TR><TD BGCOLOR="#00ff00" ALIGN="center">Зеленый

<TR><TD BGCOLOR="#сfd3f7" ALIGN="center">Голубой

<TR><TD BGCOLOR="#5f2ff0" ALIGN="center">Синий

<TR><TD BGCOLOR="#b568f4" ALIGN="center">Фиолетовый

</TR>

</TABLE>

</BODY>

</HTML>

Рис. 3.6. Отображение таблицы примера 3

Пример 4. Создайте простую таблицу, фон которой отличается от фона web-страницы (рис. 3.7).

Рис. 3.7. Отображение в браузере таблицы примера 4

<HTML><HEAD> <TITLE> простая таблица (пример 4) </TITLE>

</HEAD>

<BODY BGCOLOR="red">

<H2 ALIGN="center">Простая таблица</H2>

<CENTER><TABLE BGCOLOR="greenyellow" BORDER="5">

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

<TR><TD>ОДИН</TD><TD>ДВА</TD></TR>

<TR><TD>ТРИ</TD><TD>ЧЕТЫРЕ</TD></TR>

</TABLE></CENTER></CENTER>

</BODY>

</HTML>

3.2. Создание сложных таблиц

Все рассмотренные нами примеры таблиц имели в каждой строке одинаковое количество ячеек. Но иногда приходится создавать таблицы,
в которых смежные ячейки должны быть объединены. Достигается это использованием в начальных тегах <TD> и <TH> атрибутов COLSPAN
и ROWSPAN, варьируя этими параметрами, можно добиться желаемого результата. ROWSPAN – предназначен для объединения ячеек смежных строк, значение атрибута задает количество объединяемых ячеек. Например, начальный тег ячейки <TD ROWSPAN="3"> устанавливает объединение трех строк, COLSPAN назначает объединение ячеек смежных столбцов. Количество объединяемых ячеек устанавливается значением этого атрибута. Например, для формирования одной ячейки из трех смежных столбцов надо записать тег <TD COLSPAN="3">.

Если вы хотите объединить ячейки, расположенные в смежных строках и столбцах, то дополните тег <TD> или <TH> сразу двумя атрибутами COLSPAN и ROWSPAN. Например, образование одной ячейки, расположенной на пересечении двух строк и трех столбцов, назначается контейнером <TD COLSPAN="3" ROWSPAN="2">.

Пример 5. Создайте таблицу с двумя строками (рис. 3.8): в первой строке – две ячейки, во второй – одна. Содержимое ячеек выровнено относительно нижней и правой границы, толщина границы равна 5.

Рис. 3.8. Таблица для примера 5

Создание таблицы из примера с использованием HTML приведено ниже, отображение в браузере см. на рис. 3.9.

<HTML>

<HEAD> <TITLE> пример создания сложной таблицы пример 5

</TITLE>

</HEAD>

<BODY>

<FONT SIZE="6"><TABLE WIDTH="200"

BORDER="5" BORDERCOLOR="red">

<TR ALIGN="right"><TD> A </TD><TD> B </TD></TR>

<TR ALIGN="right"><TD COLSPAN="2"> C </TD> </TR>

</TABLE> </FONT>

</BODY>

</HTML>

Рис. 3.9. Отображение в браузере таблицы примера 5

Пример 6. Представьте в HTML таблицу спряжения глагола to be (рис. 3.10).

Рис. 3.10. Таблица спряжения глагола to be

Создание таблицы из примера с использованием HTML приведено ниже, отображение в браузере см. на рис. 3.11.

Рис. 3.11. Отображение в браузере таблицы примера 6

<HTML>

<HEAD> <TITLE> пример создания сложной таблицы пример 6

</TITLE>

</HEAD>

<BODY>

<TABLE BORDER ="1" ALIGN="center" CELLPADDING="3"

WIDTH="252">

<CAPTION>

Спряжение глагола <EM> to be : </EM>

</CAPTION>

<TR><TH & nbsp:</TH>

<TH WIDHT="198"> Значение <EM> to be: </EM></TH></TR>

<TR><TH WIDHT="34"> I </TH>

<TD ALIGN="center" WIDHT="198" > am </TD></TR>

<TR> <TH WIDHT="34"> You </TH>

<TD ALIGN ="center" WIDHT="198" ROWSPAN="3"> are </TD></TR>

<TR><TH WIDTH ="34"> We </TH></TR>

<TR><TH They </TH></TR>

<TR><TH WIDHT="34"> He </TH>

<TD ALIGN ="center" WIDHT="198" ROWSPAN="3"> is </TD></TR>

<TR><TH She </TH></TR>

<TR>< TH WIDHT="34"> IT </TH></TR>

</TABLE>

</BODY>

</HTML>

3.3. Вложенные таблицы

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

Пример 7. Создайте в HTML таблицу, представленную на рис. 3.12.

Рис. 3.12. Таблица для примера 7

Таблица из примера 7 на языке HTML приведена ниже, отображение ее в браузере представлено на рис. 3.13.

Рис. 3.13. Отображение в браузере таблицы примера 7

<HTML>

<HEAD> <TITLE> пример создания вложенной таблицы пример 7

</TITLE>

</HEAD>

<BODY>

<CENTER><TABLE BORDER="2"> <TR>

<TD COLSPAN="2"><H3>Марки

автомобилей</H3></TD>

</TR>

<TR><TH>Легковые</TH><TH>Грузовые</TH></TR>

<TR><TD><TABLE><TR><TH>TOYOTA</TH><TH>BMW</TH>

<TH>FORD</TH><TH>ВАЗ</TH></TR></TABLE></TH>

<TD><TABLE>><TR><TH>ISUSU</TH><TH>IVECO</TH>

<TH>ГАЗ</TH><TH>КАМАЗ</TH></TR></TABLE></TD></TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

3.4. Разметка web-страницы при помощи таблицы

Разметку web-страницы удобно производить с использованием таблицы. Возможны различные варианты разметки web-страницы. Рассмотрим некоторые из них.

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

Рис. 3.14. Пример разметки web-страницы

(первый вариант)

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

Представим таблицу, приведенную на рис. 3.14, на языке HTML, отображение таблицы в браузере представлено на рис. 3.15.

<HTML><HEAD>

<TITLE>разметка страницы первый вариант</TITLE>

</HEAD>

<BODY BGCOLOR="silver" TEXT="white">

<TABLE BORDER="1" HEIGHT="100%">

<TR HEIGHT="10%">< TD

<IMG SRC="image006.jpg" HEIGHT="30" WIDTH="30"></TD>

<TD ALIGN="center "BGCOLOR="teal">Название страницы

</TD></TR>

<TR> <TD> <TABLE> <TR ALIGN="center"> <TD> Главная страница </TD> </TR>

<TR ALIGN="center"> <TD>Стр 1 </TD> </TR>

<TRALIGN="center" > <TD>Стр2 </TD> </TR> </TABLE>

<TD ALIGN="center"> Содержание страницы </TD> </TR>

</TABLE></BODY></HTML>

Рис. 3.15. Отображение разметки страницы таблицей

(первый вариант)

Второй вариант. Разметка страницы производится с использованием таблицы шириной 760 пикселов, выровненной по центру экрана. При этом посетитель будет видеть таблицу шириной в 760 пикселов независимо от разрешения экрана.

В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца (рис. 3.16). Верхняя строка будет заголовком страницы, вторая строка – меню, а третья строка – содержание страницы (отображение в браузере см. на рис. 3.17).

Рис. 3.16. Пример разметки web-страницы (второй вариант)

Рис. 3.17. Отображение разметки страницы таблицей (второй вариант)

Представим таблицу, приведенную на рис. 3.16, на языке HTML:

<HTML>

<HEAD>

<TITLE>разметка страницы второй вариант</TITLE>

</HEAD>

<BODY BGCOLOR="blue" TEXT="white">

<TABLE BORDER="1" HEIGHT="600"

BGCOLOR="silver">

<TR HEIGHT="100"><TABLE BORDER="1" HEIGHT="100"><TR>

<TD

<IMG SRC="image006.jpg" HEIGHT="30" WIDTH="30"></TD>

<TD ALIGN="center" BGCOLOR="teal" WIDTH="700">

Название страницы</TD></TR></TABLE>

<TR> <TD> <TABLE BORDER="1"> <TR ALIGN="center"

HEIGHT="30">

<TD Главная страница </TD>

<TD >Стр 1 </TD><TD </TD>

</TR> </TABLE></TD></TR>

<TR><TD ALIGN="center" HEIGHT="470"> Содержание страницы

</TD> </TR>

</BODY></HTML

* * *

Из теоретической части главы мы узнали об основах построения таблиц в HTML. Мы начали с элемента <TABLE>, к которому добавили понятия элементов строк <TR>, ячеек <TD>, заголовка внутри таблицы <TH>. Были представлены атрибуты как отдельных элементов, так и таблиц в целом, позволяющие задавать расположение, цвет фона и границ таблицы, растягивать ячейки на несколько строк и столбцов. Мы узнали, что таблица является мощным инструментом разработки дизайна полноценных web-страниц.

Практическое задание

СОЗДАНИЕ ТАБЛИЦ

1. Создание простой таблицы. Для создания простой таблицы используются теги <TABLE> (внешний элемент таблицы), <TR> (строка таблицы), <TD> (ячейка таблицы).

Создайте на отдельной web-странице (файл с именем page4.htm) таблицу (рис. 3.18), используя в качестве примера таблицу из теории.

Рис. 3.18. Таблица для первого задания

Задайте в теге <TABLE> атрибуты BORDER="1" ALIGN="center". Сохраните набранную таблицу в файле и просмотрите ее в браузере. Вы видите, что таблица у вас небольшая и находится в центре страницы. Задайте ширину таблицы тегом <просмотрите в браузере, как изменилась таблица, затем задайте расстояние текста от границы ячейки CELLPADDING="20" и расстояние между ячейками CELLSPACING="10" и опять просмотрите изменения в таблице. Задайте цвет фона таблицы светло-зеленый (BGCOLOR="lime"), цвет рамки красный (BORDERCOLOR="red") и опять просмотрите внесенные изменения. А теперь осталось только разместить текст в центре ячейке для каждой строки таблицы. Для этого используйте атрибут ALIGN="center" в теге <TR> (строка) просмотрите изменения.

2. Создание сложной таблицы. Для создания таблицы, ячейка которой занимает несколько строк или столбцов, используют атрибуты COLSPAN (объединение столбцов) и ROWSPAN (объединение строк) тега ячейки <TD>.

Создайте на новой web-странице таблицу (рис. 3.19). Задайте разные цвета ячейкам. Сохраните данную таблицу в файле с именем page5.htm. Просмотрите ее в браузере, затем внесите изменения. Задайте таблице внешнюю объемную рамку, для этого используйте атрибуты BORDERCOLORLIGHT и BORDERCOLORDARK.

Рис. 3.19. Таблица для второго задания

Снова сохраните изменения в файле и опять просмотрите в браузере. Цвета для объемной рамки подберите сами.

3. Создание таблицы с заголовочной надписью и названием столбцов. Для создания таблицы, которая имеет название (заголовок) и название столбцов, используют теги <CAPTION> и <TH>.

Создайте таблицу (рис. 3.20) на отдельной web-странице (файл page6.htm).

Средняя температура в октябре 2011 года

Рис. 3.20. Таблица для третьего задания

Создайте таблицу, как описано в пункте по созданию простой таблицы, после тега <TABLE> поставьте тег <CAPTION> с использованием атрибута ALIGN="top" («заголовок над таблицей») и в первой строке таблицы используйте тег <TH> для задания названия каждой ячейке. Сделайте объемными внутренние рамки ячеек. Цвета подберите сами.

4. Разметка web-страницы при помощи таблицы. Создайте web-страницу, размеченную согласно таблице на рис. 3.21.

Рис. 3.21. Таблица для четвертого задания

Для этого за основу возьмите таблицу из примера разметки web-страницы (первый вариант) (рис. 3.14). Добавьте вложенные таблицы и сохраните ее в отдельном файле page7.htm.

Контрольные вопросы и задания

1. Какой тег используется для создания таблиц на web-страницах?

2. Из каких структурных элементов строится таблица?

3. Какой тег используется для задания заголовка над таблицей?

4. Как задать заголовок столбца таблицы?

5. Какая модель используется в HTML для описания таблицы?

6. Перечислите свойства таблицы, созданной в HTML.

7. С помощью каких атрибутов задаются размеры таблицы?