Лабораторная работа 5. Создание таблиц
Таблицы на Web-страницах используются не только для представления табличного материала, но и для того, чтобы выровнять текст и рисунки. Например, с помощью таблиц (без рамки) можно расположить текст и рисунки в несколько колонок.
Таблица начинается тегом <TABLE> и заканчивается парным ему тегом </TABLE>. Параметр BORDER тега <TABLE> обозначает ширину рамки таблицы.
Содержимое таблицы описывается по строкам сверху вниз (начиная с верхней строки). Каждая строка начинается тегом <TR> и заканчивается парным ему тегом </TR>.
Ячейки в строке описываются слева направо. Каждая ячейка начинается тегом <TD> и заканчивается парным ему тегом </TD>. В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).
Важно, что в HTMLтаблицы используются не только для отображения таблиц как таковых, но и для дизайна. С помощью таблиц можно создать невидимый "каркас" страницы, помогающий расположить текст и изображения определенным образом.
Элементы для создания таблиц:
TABLE- Создает таблицу. Обязательно должен иметь начальный и конечный теги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементовTR,TD,THиCAPTION. Атрибуты:
ALIGN– определяет способ горизонтального выравнивания таблицы. Возможные значения:left,center,right. Значение по умолчанию –left.
VALIGN– должен определять способ вертикального выравнивания таблицы. Возможные значения:top,bottom,middle.
BORDER– определяет ширину внешней рамки таблицы (в пикселах). ПриBORDER="0" или при отсутствии этого атрибута рамка отображаться не будет.
CELLPADDING– определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
CELLSPACING– определяет расстояние (в пикселах) между границами соседних ячеек. Например: <TABLE CELLSPACING="5" CELLPADDING="10">
WIDTH– определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT– определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. Например, таблица: <TABLE WIDTH="50%" HEIGHT="300"> должна занимать 50 процентов ширины окна браузера и иметь высоту 300 пикселов. Однако если вся нужная информация не поместится в эту область, таблица будет расширена (чаще всего увеличивается ее высота).
BGCOLOR– определяет цвет фона ячеек таблицы. Задается либоRGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
BACKGROUND– позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указатьURLрисунка.
● CAPTION- Задает заголовок таблицы
● TR- Создает новый ряд (строку) ячеек таблицы Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементовTDиTH. Атрибуты:
ALIGN – определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.
VALIGN – определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.
BGCOLOR – определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
HEIGHT - задает высоту строки таблицы в пикселах или в процентах от общей высоты таблицы. Например, строка: <TR HEIGHT="30"> должна иметь высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область, ее высота будет увеличена.
● TDиTH- Создает ячейку с данными в текущей строке. ЭлементTDсоздает ячейку с данными в текущей строке. ЭлементTHтакже создает ячейку, но определяет ее как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки заголовка и ячеек с данными разными шрифтами. Кроме того, должна улучшиться работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы. Атрибуты:
ALIGN – определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением атрибута ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH – центрирование.
VALIGN – определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top,bottom,middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого атрибута не было задано ранее в элементеTR.
WIDTH– определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
HEIGHT – определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к высоте таблицы. Например, ячейка: <TD WIDTH="50" HEIGHT="30"> должна иметь ширину 50 и высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область или эти размеры не стыкуются с другими, эти команды не выполняются.
COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
Пример1:
<TABLE BORDER="1"> <TR> <TD COLSPAN="3">Даты проведения экзаменов</TD> </TR> <TR> <TD>21.01.2014</TD> <TD>24.01.2014</TD> <TD>28.01.2014</TD> </TR> </TABLE>
ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
Пример2:
<TABLE BORDER="1"> <TR> <TD ROWSPAN="3">Даты проведения экзаменов</TD> <TD>21.01.2014</TD> </TR> <TR> <TD>24.01.2014</TD> </TR> <TR> <TD>28.01.2014</TD> </TR> </TABLE>
NOWRAP – блокирует автоматический перенос слов в пределах текущей ячейки. Обратите внимания на примечание, касающееся использования данного атрибута (далее, внизу страницы).
BGCOLOR – определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
BACKGROUND – заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный атрибут не работает в старых версиях браузера Netscape (до 3.X включительно).
Следует отметить:
Выравнивание данных, выполняемое через параметры ALIGN иVALIGN, может выполняться для строки или для отдельной ячейки.
Пример 3:
<TR ALIGN="center" VALIGN="top"> <TD>По центру, по верхней границе</TD> <TD ALIGN="right" VALIGN="middle">По правой границе, по середине</TD> </TR>
Можно манипулировать цветом и фоном в ячейках таблицы.
Пример4:
<TABLE BORDER="1" BGCOLOR="green"> <TR HEIGHT="30" BGCOLOR="blue"> <TD><FONT COLOR="white">Привет!</FONT></TD> <TD BGCOLOR="red"></TD> </TR> <TR> <TD BACKGROUND="web.jpg">Таблица из двух строк</TD> <TD>и двух столбцов</TD> </TR> </TABLE>
Вложенные таблицы
В ячейки таблицы можно вставлять другие (вложенные) таблицы. Например, чтобы разместить две таблицы рядом, используют трюк, при котором они «вкладываются» в ячейки другой таблицы со скрытой рамкой.
Пример5:
<TABLE BORDER="0" CELLSPACING=10> <TR><TD> <TABLE BORDER="1"> <TR><TD>Вася</TD><TD>Петя</TD></TR> <TR><TD>Маша</TD><TD>Даша</TD></TR> </TABLE></TD> <TD> <TABLE BORDER="1"> <TR><TD>1</TD><TD>22</TD></TR> <TR><TD>333</TD><TD>4444</TD></TR> </TABLE></TD></TR> </TABLE>
Практическая часть
Задание 5.1.
Проделайте примеры 1-5, приведенные в тексте. В случае необходимости дополните примеры нужными тегами и другой информацией. Каждый пример разместите на отдельной странице браузера.
Задание 5.2.
Создать файл Pr_4_1.html в текстовом редакторе Блокнот, в него набрать нижеследующий пример:
<HTML>
<HEAD>
<TITLE>Пример таблицы</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=center>Пример таблицы</H2>
<P ALIGN=center>
<TABLE WIDTH=90% VALIGN=top BORDER=3>
<TR BGCOLOR=#000055 ALIGN=center >
<TD WIDTH=10%><I><B><FONT COLOR=white>
Имя / ник</FONT></B></I></TD>
<TD WIDTH=12%><I><B><FONT COLOR=white>Имидж</FONT>
<BR> <FONT SIZE=2 COLOR=white>(виртуальный образ)</FONT></B></I></TD>
<TD WIDTH=10%><I><B><FONT COLOR=white>Язык</FONT> </B></I></TD>
<TD WIDTH=30%><I><B><FONT COLOR=white>Сфера помощи</FONT> </B> </I></TD>
<TD><B><I><FONT COLOR=white>E-mail</FONT></I></B></TD>
</TR>
<TR>
<TD WIDTH=10% ALIGN=center ><A HREF="MAILTO:dscrew@chat.ru?Subject= 'VRR - For SCREW'">SCREW</A></TD>
<TD WIDTH=10% ALIGN=center >cyborg <FONT SIZE=1><BR>(human-based)</FONT></TD>
<TD WIDTH=10% ALIGN=center >Русский</TD>
<TD WIDTH=30%>Software, Windows 8, Windows XP, Интернет, HTML</TD>
<TD>dscrew@chat.ru,<BR>Subject: "VRR - For SCREW"</TD>
</TR>
<TR>
<TD WIDTH=10% ALIGN=center ><A HREF="MAILTO:avalon6@chat.ru?Subject ='VRR Project'">Серая Дымка</A></TD>
<TD WIDTH=10% ALIGN=center >cat</TD>
<TD WIDTH=10% ALIGN=center >Русский, немецкий, французский</TD>
<TD WIDTH=30%>Windows XP, ICQ, компьютерная верстка</TD>
<TD>avalon6@chat.ru,<BR>Subject: "VRR Project"</TD>
</TR>
</TABLE>
</P>
<P ALIGN=center><FONT SIZE=3><I>Пример таблицы 5х3, в заголовке темно-синий фон и белый шрифт, <BR>первый столбец содержит гиперссылки на адреса e-mail</I></FONT></P>
<HR SIZE=2>
<P ALIGN=center>
<FONT SIZE=3>© Dmitry Usencow, 2000</FONT></P>
</BODY>
</HTML>
Просмотреть результат в браузере.
Задание 5.3.
Создать файл Pr_4_2.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:
Задание 5.4.
Создать файл Pr_4_3.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:
