Лабораторная работа №3.
Таблицы. Основы построения таблиц.
Ссылки. Создание ссылок на документы и файлы.
Целью данной лабораторной работы является: изучение связей между несколькими гипертекстовыми документами и построение простых таблиц.
Часть 1. Таблицы. Основы построения простых таблиц.
Введение в таблицы
Являясь средством создания документов коммерческого, образовательного и личного назначения, язык разметки гипертекста должен оправдывать ожидания всех своих пользователей. На основе этого языка создавался один из наиболее популярных ресурсов Internet, и сегодня HTML использует намного больше людей, чем могли когда-то себе представить его разработчики. Например, вы можете создать корпоративный маркетинговый сайт наподобие красочного буклета или документ, представляющий собой официальный статистический отчет. В любом случае для лучшего представления информации вы можете использовать таблицы.
В издательском деле таблицы являются одним из основных методов дизайна. Они представляют данные в виде удобных для восприятия колонок и строк и значительно упрощают анализ информации. С их помощью отделяют одну часть публикации от другой, улучшая структуризацию документа. Таблицы должны стать одним из главных элементов дизайна и ваших Web-страниц.
До сих пор в WWW таблицы использовались благодаря таким программам просмотра, как Netscape Navigator и Microsoft Internet Explorer, однако они не были частью стандарта HTML. С появлением HTML версии 3.2 ситуация изменилась. Теперь таблицы стали такой же естественной частью HTML, как списки или гипертекстовые ссылки. В этой главе рассказывается, как с помощью таблиц можно улучшить представление информации и внешний вид ваших HTML-документов.
Основы построения таблиц.
Элемент TABLE представляет собой тэг-контейнер, в котором размещается содержимое таблицы. Этот контейнер напоминает рассмотренный в предыдущей главе контейнер списка.
Таблица строится по строкам: для обозначения строки используется контейнер TR, для обозначения заголовков столбцов (строк) – контейнер TH, а для данных в ячейках – контейнер TD. Заголовки выделяются полужирным шрифтом и центрируются в своих ячейках.
Пример (листинг) простой таблицы:
<HTML>
<HEAD><TITLE>Basic Table Examples</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH>Colors</TH><TH>Of</TH><TH>The Rainbow</TH>
<TR>
<TD>Red</TD><TD>Orange</TD><TD>Yellow</TD>
</TR>
<TR>
<TD>Green</TD><TD>Blue</TD><TD>Violet</TD>
</TR>
</TABLE>
<HR>
<TABLE BORDER>
<CAPTION>My Favorite Groups</CAPTION>
<TR><TH>Rock</TH><TD>Pink Floyd</TD>
<TD>Led Zepplin</TD>
<TD>The Dobbie Brothers</TD></TR>
<TR><TH>Soft</TH><TD>Simon and Garfunkel</TD>
<TD>Peter, paul, & Mary</TD>
<TD>Neil Young</TD></TR>
<TR><TH>New Age</TH><TD>Enya</TD>
<TD>Clannad</TD>
<TD>Steamroller</TD></TR>
</TABLE>
</BODY>
</HTML>
Ниже приведен список основных тэгов таблиц:
<TABLE></TABLE> |
Контейнер таблицы. |
<TR></TR> |
Контейнер строки таблицы. Допускается отсутствие закрывающего тэга. |
<TD></TD> |
Контейнер ячейки таблицы. В ячейку можно включить другую таблицу. Закрывающий тэг может быть опущен. |
<TH></TH> |
Контейнер заголовка, располагающегося обычно в первой строке, либо в первом столбце таблицы. Закрывающий тэг также необязателен. |
WIDTH |
Определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера. Может также использоваться для отдельной ячейки. |
HEIGHT |
Определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера. Может также использоваться дня отдельной ячейки. |
BORDER |
Устанавливает ширину рамки таблицы в пикселях, например, BORDER=2. |
CELLPADDING и CELLSPACING |
Добавляют свободное пространство между данными внутри ячейки и ее границами и, соответственно, между ячейками внутри всей таблицы. Если рамка отсутствует, то результат их действия одинаков. |
В дополнение к этим тэгам используются следующие атрибуты:
Атрибут BORDER тэга <TABLE> |
Для определения рамки таблицы. Ширина рамки устанавливается в пикселах, например, BORDER=1. (Значение, равное нулю, означает отсутствие рамки.) |
Атрибут ALIGN тэга <TABLE> |
Для выравнивания таблицы в окне браузера. Имеет значения LEFT, CFNTER и RIGHT (по умолчанию – LEFF). |
Заголовки столбцов и строк выводятся полужирным шрифтом и располагаются по центру своей ячейки. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки.
Наличие в ячейках данных необязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (<TD></TD>), либо заполнить ее специальным символом пустого пространства (<TD> </TD>). Как будет показано ниже в этой главе, разные браузеры по-разному трактуют эти варианты.
Нет надобности отдельно создавать пустые ячейки, если планируется, что все оставшиеся в строке ячейки не будут заполнены. Так как тэг <TR> сигнализирует о начале новой строки, пустые ячейки будут добавлены браузером автоматически.
Таблицы всегда должны быть прямоугольными. Другие формы не допускаются.
Размещение данных внутри ячеек
При помощи атрибутов ALIGN и VALIGN можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с элементами <CAPTION>, <TR>, <TH> и <TD> в самых различных комбинациях. Ниже приведены значения атрибутов для перечисленных элементов:
<CAPTION> |
Атрибут ALIGN может иметь значения TOP и BOTTOM (по умолчанию – TOP); размещает заголовок таблицы сверху или снизу. |
<TR> |
Атрибут ALIGN может принимать значения LEFT, CENTER и RIGHT (по умолчанию – LEFT для данных и CENTER для заголовков); он определяет горизонтальное выравнивание данных в ячейках и действует на всю строку, если не отменяется тем же атрибутом в отдельной ячейке. Атрибут VALIGN может иметь значения ТОР, BOTTOM, MIDDLE и BASELINE (по умолчанию – MIDDLE); он регулирует положение данных относительно верхней и нижней границ ячейки и влияет на всю строку, если не отменяется таким же атрибутом в отдельной ячейке. BASELINE применяется ко всем элементам строки и выравнивает их по базовой линии. |
<TH> |
Атрибут ALIGN может принимать значения LEFT, CENTER и RIGHT (по умолчанию – CENTER). Атрибут VALIGN может иметь значения ТОР, BOTTOM и MIDDLE (по умолчанию – MIDDLE). |
<TD> |
Атрибут ALIGN может принимать значения LEF'I, CENTER и RIGHT (по умолчанию – LEFT). Атрибуту VALIGN может иметь значения ТОР, ВОТТОМ и MIDDLE (по умолчанию – MIDDLE). |
Примеры (листинг) выравнивания элементов таблицы:
<HTML>
<HEAD><TITLE>Table Alignments</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN=BOTTOM>A Really Ugly Table</CAPTION>
<TR>
<TH></TH><TH>##########</TH><TH>##########</TH>
<TH>##########</TH>
</TR>
<TR ALIGN=RIGHT>
<TH>Row 1</TH><TD>XX<BR>XX</TD><TD ALIGN=CENTER>X
</TD><TD>XXX</TD>
</TR>
<TR VALIGN=BASELINE>
<TH ALIGN=LEFT>Second Row</TH><TD>XXX<BR>XXX</TD><TD>XXX</TD>
<TD>XXX<BR>XXXXX<BR>XXX</TD>
</TR>
<TR ALIGN=LEFT>
<TH>This Is<BR>The Bottom Row of <BR>The Table</TH>
<TD VALIGN=BOTTOM>XXXXX</TD>
<TD VALIGN=TOP>XXX<BR>XXXXX</TD>
<TD VALIGN=MIDDLE>XXXXX</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Таблицы с рамками и без рамок
Как было отмечено выше, за наличие и вид рамки таблицы отвечает атрибут BORDER тэга <TABLE>. При отсутствии атрибута BORDER рамка не прорисовывается. Однако, как показывает жизненный опыт, данные в таблице воспринимаются легче, если каждая ячейка имеет рамку.
В HTML таблицы применяются не только для представления табулированных данных. Они дают возможность гибкого группирования и форматирования информации.
Объединение ячеек
Смежные ячейки таблицы могут объединяться с целью размещения большего количества данных. Например, в таблице из пяти строк и пяти столбцов все ячейки первой строки можно объединить и поместить в этой строке красивый заголовок таблицы. Возможно также объединение нескольких строк или создание пустой прямоугольной области. Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут ROWSPAN тэга <TH> или <TD>, например:
<TD ROWSPAN=2>
Для объединения двух смежных ячеек в одной строке нужно использовать атрибут COLSPAN тех же тэгов, например:
<TD COLSPAN=2>
Применение таблиц на практике
По определению таблицы используются для представления табличных данных. Таблицы могут быть также полезны при работе с формами HTML, так как предоставляют возможность создавать очень хорошо организованные формы для ввода информации. Таблицы можно применять и для других целей, упоминавшихся ранее. Благодаря разнообразным возможностям группировать текстовую и графическую информацию, таблицы помогут вашим HTML-документам обрести более впечатляющий облик.
Задание!!!
Перед тем, как приступить к выполнению данной работы, вам необходимо к ней немножко подготовиться. Для начала, необходимо открыть файл с вашим HTML-шаблоном в редакторе «Блокнот». Затем, поменяв заголовок вашего шаблона на название текущей Лаб. Работы, сохранить его как новый файл в директории HTML-SITE с именем файла «table.htm». Все. Можно приступать к выполнению задания.
Лабораторная работа №3 (Часть 1) «Таблицы. Основы построения таблиц»:
Используя полученные навыки в создании таблиц, сделать с помощью языка разметки HTML похожую копию таблицы из файла «table.jpg», сохранив при этом все пропорции ячеек и расположение в них текста. Текст набранный в таблице можно взять (или переписать из файла «table.txt» или «table.doc»)
Изменить некоторые атрибуты таблицы так, чтобы не использовались значения «по умолчанию».