Главная | Обратная связь | Поможем написать вашу работу!

Лабораторная работа 5. Создание таблиц

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

Таблица начинается тегом <TABLE> и заканчивается парным ему тегом </TABLE>. Параметр BORDER тега <TABLE> обозначает ширину рамки таблицы.

Содержимое таблицы описывается по строкам сверху вниз (начиная с верхней строки). Каждая строка начинается тегом <TR> и заканчивается парным ему тегом </TR>.

Ячейки в строке описываются слева направо. Каждая ячейка начинается тегом <TD> и заканчивается парным ему тегом </TD>. В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).

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

Элементы для создания таблиц:

· TABLE - Создает таблицу. Обязательно должен иметь начальный и конечный теги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION. Атрибуты:

o ALIGN – определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию – left.

o VALIGN – должен определять способ вертикального выравнивания таблицы. Возможные значения: top, bottom, middle.

o BORDER – определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого атрибута рамка отображаться не будет.

o CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

o CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек. Например: <TABLE CELLSPACING="5" CELLPADDING="10">

o WIDTH – определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.

o HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. Например, таблица: <TABLE WIDTH="50%" HEIGHT="300"> должна занимать 50 процентов ширины окна браузера и иметь высоту 300 пикселов. Однако если вся нужная информация не поместится в эту область, таблица будет расширена (чаще всего увеличивается ее высота).

o BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

o BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

● CAPTION - Задает заголовок таблицы

● TR - Создает новый ряд (строку) ячеек таблицы Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH. Атрибуты:

o ALIGN – определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.

o VALIGN – определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.

o BGCOLOR – определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

o HEIGHT - задает высоту строки таблицы в пикселах или в процентах от общей высоты таблицы. Например, строка: <TR HEIGHT="30"> должна иметь высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область, ее высота будет увеличена.

● TD и TH - Создает ячейку с данными в текущей строке. Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки заголовка и ячеек с данными разными шрифтами. Кроме того, должна улучшиться работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы.Атрибуты:

o ALIGN – определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением атрибута ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH – центрирование.

o VALIGN – определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого атрибута не было задано ранее в элементе TR.

o WIDTH – определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.

o HEIGHT – определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к высоте таблицы. Например, ячейка: <TD WIDTH="50" HEIGHT="30"> должна иметь ширину 50 и высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область или эти размеры не стыкуются с другими, эти команды не выполняются.

o 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>

o 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>

o NOWRAP – блокирует автоматический перенос слов в пределах текущей ячейки. Обратите внимания на примечание, касающееся использования данного атрибута (далее, внизу страницы).

o BGCOLOR – определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

o BACKGROUND – заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный атрибут не работает в старых версиях браузера Netscape (до 3.X включительно).

Следует отметить:

1) Выравнивание данных, выполняемое через параметры ALIGN и VALIGN, может выполняться для строки или для отдельной ячейки.

Пример 3:

<TR ALIGN="center" VALIGN="top">
<TD>По центру, по верхней границе</TD>
<TD ALIGN="right" VALIGN="middle">По правой границе,
по середине</TD>
</TR>

2) Можно манипулировать цветом и фоном в ячейках таблицы.

Пример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:

Практическая часть

Задание 5.1.

Проделайте примеры 1-5, приведенные в тексте. В случае необходимости дополните примеры нужными тегами и другой информацией. Каждый пример разместите на отдельной странице браузера.

Задание 5.2.

• Создать файл Pr_4_1.html в текстовом редакторе Блокнот, в него набрать нижеследующий пример:

<HTML>

<HEAD>

<TITLE>Пример таблицы</TITLE>

</HEAD>

<BODY>

<H2 ALIGN=center>Пример таблицы</H2>

Имя / ник</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=30%><I><B><FONT COLOR=white>Сфера помощи</FONT> </B> </I></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 >Русский, немецкий, французский</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>

</BODY>

</HTML>

• Просмотреть результат в браузере.

Задание 5.3.

Создать файл Pr_4_2.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:

Задание 5.4.

Создать файл Pr_4_3.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:

⇐ Предыдущая 3 4 5 6 7 8 91011 12 Следующая ⇒

Воспользуйтесь поиском по сайту: