Конспект урока «Основы Web-дизайна. Создание таблиц»

1. Вводная часть, целевые ориентиры занятия
Одним из наиболее мощных и широко применяемых в НТМL средств являются таблицы. В НТМL таблицы используются не только традиционно, как метод представления данных, но и как средство формирования Web-страниц.
С развитием сфер применения НТМL-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием заранее отформатированного текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов.
Использование таблиц не ограничивается только данными, состоящими из рядов и колонок. Одним из применений является организация расположения разнообразных данных на странице, которые могут состоять из простого текста, изображений, других таблиц и т. д. Правилам создания таблиц и примерам их использования посвящена данная тема.
2.Объяснение нового материала
Рассмотрим сначала минимальный набор тэгов и их параметров, необходимый для создания несложных таблиц, а затем перейдем к их детальному описанию.
Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Как известно, таблица состоит из строк, поэтому должен существовать тэг, «говорящий» браузеру, что является строкой. Отсюда каждая строка начинается тэгом <TR> (Тable Row – строка таблицы) и завершается тэгом </TR>.
Отдельная ячейка в строке может быть описана следующим образом:

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

Замечание
Различие в использовании этих тэгов заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <TH> отображается полужирным шрифтом и располагается по центру (параметры и их значения: ALIGN=CENTER, align=»absmiddle»). Ячейки, определенные тэгом <TD>, по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (align=»absmiddle») в вертикальном направлении.
Тэги <TD> и <TH> не могут появляться вне описания строки таблицы<TR>.
Завершающие тэги </TR>, <TD> и </TH> могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы также может быть опущен. Однако мы настоятельно рекомендуем их использовать с тем, чтобы сделать текст HTML-документа более понятным!
Количество строк в таблице определяется числом открывающих тэгов <TR>.
Количество столбцов — максимальным количеством <TD> или <TH> среди всех строк.
Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается!
Данные в некоторых ячейках могут отсутствовать. Тогда такие ячейки (их еще называют пустыми) описываются парой следующих подряд тэгов: <TD>, </TD>. А если нужно расположить несколько пустых ячеек в конце какой-нибудь строки? Неужели придется несколько раз писать такую конструкцию: <TD> </TD>? В этом случае ничего записывать не нужно, а браузер автоматически добавит требуемое количество пустых ячеек.
Большинство таблиц имеют заголовки, поэтому должен существовать тэг для их создания. Заголовок таблицы заключается в пару тэгов <CAPTION> и </CAPTION>, которые располагаются сразу же за тэгом <TABLE> и до первого <TR>.
По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и центрируется в горизонтальном направлении.
Перечисленные тэги могут иметь параметры, число и значения которых различны. Однако в простейшем случае тэги используются без параметров, которые принимают значения по умолчанию.
Этих сведений вполне достаточно для построения элементарных таблиц.

Пример:

По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце
<HTML> <HEAD>
<ТIТLЕ>Таблица</ТIТLЕ> </HEAD>
 <BODY>
<TABLE border=»2»> <!— Начало таблицы —>
 <TR>
<TD colspan=2 align=»center» >
 <В>Заголовок Таблицы.</В> </TD> </TR>
<TR>
<TD align="center">
Первая ячейка первой строки. </TD>
<TD align»"center">
Вторая ячейка первой строки. </TD> </TR>
<TR>
<TD align="center" >
Первая ячейка второй строки. </TD>
<TD align="center">
Вторая ячейка второй строки. </TD>
</TR>
</TABLE> <•—  конец таблицы —>
</BODY>
</HTML>

таблица
Как известно, для задания заголовка таблицы используется тэг <CAPTION>. Он имеет единственный допустимый параметр ALIGN, принимающий следующие значения:

    ТОР (значение по умолчанию) — заголовок располагается над таблицей; BOTTOM — заголовок находится под таблицей.

Замечания

    Если таблица не имеет заголовка, то тэг <CAPTION> не используется! По горизонтали заголовок таблицы всегда располагается по центру таблицы

А если требуется выровнять заголовок таблицы, например, по левому или правому краю таблицы? В этом случае используют следующие значения для этого же самого параметра:

    LEFT – выравнивание заголовка по левому краю таблицы; CENTER – выравнивание заголовка по центру таблицы; RIGHT – выравнивание заголовка по правому краю таблицы. А если требуется задать выравнивание для заголовка, который находится внизу таблицы? Неужели использовать в этом случае два параметра ALIGN??? Конечно, нет. Как раз для такого случая браузер Мicrosoft Internet Explorer распознает параметр VALIGN, используемый для определения местоположения заголовка таблицы. Он принимает значения TOP (заголовок располагается над таблицей) или BOTTOM (заголовок располагается под таблицей). Таким образом, параметр VALIGN используется тогда, когда нужно задать выравнивание заголовка, расположенного внизу таблицы. Во всех остальных случаях можно обойтись параметром ALIGN. Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, тэг <CAPTION> имеет следующий вид:

<CAPTION ALIGN=LEFT VALIGN=BOTTOM> Заголовок,
Расположенный внизу  таблицы  с выравниванием влево </САРТION>
Ширина таблицы задается атрибутом width=»…» для тега <ТАВLЕ>, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана.
Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="…" (горизонтальное положение) и valign=»…» (вертикальное положение) для тегов <TR> или <TD>.
Атрибут Valign=»…» может принимать следующие значения:
Top — прижать вверх,
Bottom — прижать вниз
Middle — разместить по центру,
а атрибут align="…" принимает следующие значения:
Left — прижать влево,
Right — прижать вправо
Center — разместить по центру.
Атрибут Border=»…» тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Для отдельной ячейки рамка не задается.
Атрибуты
Cellpadding="…" — определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым,
Cellspacing="…" определяют, соответственно, расстояние в пикселях между ячейками.
Следует иметь в виду, что атрибуты Colspan=»…» и Rowspan="…" тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.
Рассмотрим пример таблицы, занимающей по ширине весь экран броузера:

Сложнаятаблица

<TABLE border="l"  width="100%">
<TR>
<TD width="66%" colspan="2">
<P  aligns"center">Две  ячейки, объединенные  по  горизонтали
</TD> </TR> <TR>
<TD width= "33%" rowspan= " 2 " valign="middle">
Две ячейки, объединенные по вертикали </TD>
<TD width="33%">no левому краю </TD>
</TR>
<TR>
<TD width="33%">
<P  align="right">по  правому  краю </TD> </TR>
</TABLE>
Таблицы очень часто используются для позиционирования различных элементов на Web-странице. С помощью таблиц можно создавать обтекание рисунков, упорядочивать элементы форм (об этом речь пойдет на следующих занятиях), а также позиционировать другие элементы HTML-документа.

3. Задания:

задание

Литература

Периодические издания: журналы «Компьютерра», «PC magasin», Н. В. Комолова. HTML и XHTML. Языки разметки web-страниц. / Н. В. Комолова. Самоучитель. 1 издание. СПб,  Издательство: «Питер», 2009, 272 с. Фримен Эрик, Фримен Элизабет. HTML и XHTML. Языки разметки web-страниц. / Фримен Эрик, Фримен Элизабет. Бестселлеры O’Reilly. 1 издание. СПб Издательство: "Питер", 2010, 656 с. А. А. Чиртик. HTML и XHTML. Языки разметки web-страниц. / А. А. Чиртик. Популярный самоучитель. 1 издание. СПб Издательство: «Питер», 2008, 256 с. Электронные учебники, материалы из сети Интернет.

Дополнительно:

Демонстрационный материал к уроку состоит из 12 слайдов.

Слайд 1 слайд 1