- •Разработка электронного портала
- •Введение
- •Практическая работа №1 Тема: html. Основные положения
- •Структура документа
- •Комментарии
- •Тэги тела документа
- •Центрирование элементов документа
- •Пронумерованные списки
- •Непронумерованные списки.
- •Вложенные списки
- •Список определений
- •Гипертекстовые ссылки
- •Структура ссылок в html-документе
- •Ссылки на точки внутри документа
- •Задание
- •Практическая работа № 3 Тема: Графика внутри html-документа
- •Фоновые рисунки
- •Задание стандартных цветов
- •Горизонтальная линия
- •Добавление стилей в ваш html-документ
- •Основные атрибуты таблицы
- •Вложенные таблицы
- •Задание
- •Практическая работа № 5 Тема: Фреймы
- •Синтаксис фрэймов
- •Планирование фрэймов и взаимодействия между фрэймами
- •Зарезервированные имена фрэймов
- •Тэги формы
- •Меню выбора в формах
- •Отправление файлов при помощи форм
- •Задание
- •Практическая работа № 7. Тема: Введение в JavaScript
- •Примеры программирования на JavaScript:
- •Задание
- •Контрольные вопросы
- •Темы для индивидуальных работ
- •Литература
- •ПрИложение Названия и коды цветов для html
- •Примечания
Основные атрибуты таблицы
BORDER - данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.
ALIGN - если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).
VALIGN - данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).
NOWRAP - данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.
COLSPAN - указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию-1.
ROWSPAN - указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию-1.
COLSPEC - данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".
Пример таблицы
<TABLE BORDER=5>
<CAPTION ALIGN=bottom> Таблица №1 </CAPTION>
<TR><TD ROWSPAN=2></TD><TH COLSPAN=2>Среднее значение</TH></TR>
<TR><TH>Рост</TH><TH>Вес</TH></TR>
<TR><TD>Мужчины</TD><TD ALIGN=center>174</TD><TD ALIGN=center>78</TD></TR>
<TR><TD>Женщины</TD><TD ALIGN=center>165</TD><TD ALIGN=center>56</TD></TR>
</TABLE>
Вложенные таблицы
Отдельные ячейки таблицы могут содержать практически любые тэги языка и данные, разрешенные в разделе <body> документа. В том числе, внутри ячейки таблицы может быть целиком размещена другая таблица. Такие таблицы называются вложенными. Правила их построения не отличаются построения таблиц и не нуждаются в отдельном описании. Отметим лишь, что не все браузеры, поддерживающие таблицы, правильно отражают сложные таблицы с несколькими уровнями вложенности, поэтому их использование требует осторожности.
Пример таблицы, использующей один уровень вложенности.
<HTML>
<HEAD>
<title>Города Ленинградской области</title>
</HEAD>
<BODY>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<CAPTION><H2>Города Ленинградской области</H2>
H - население города (тыс.жит.,1992 г.)
P - расстояние от Санкт-Петербурга (км)</CAPTION>
<TR><TD VALIGN=TOP>
<TABLE BORDER CELLPADDING=3 CELLSPACING=0>
<CAPTION><STRONG> Города, подчиненные Санкт-Петербургу</STRONG></CAPTION>
<TR><TH>Город</TH><TH>H</TH><TH>P</TH></TR>
<TR><TD>3еленогорск </TD>
<TD ALIGN=RIGHT> 13.6</TD>
<TD ALIGN=RIGHT> 50</TD></TR>
<TR><TD>Колпино </TD>
<TD ALIGN=RIGHT> 144.6</TD>
<TD ALIGN=RIGHT> 26</TD></TR>
<TR><TD>Кронштадт</TD>
<TD ALIGN=RIGHT> 45.2</TD>
<TD ALIGN=RIGHT> 48</TD></TR>
<TR><TD>Ломоносов </TD>
<TD ALIGN=RIGHT> 42.0</TD>
<TD ALIGN=RIGHT> 40</TD></TR>
<TR><TD>Павловск </TD>
<TD ALIGN=RIGHT> 25.4</TD>
<TD ALIGN=RIGHT> 30</TD></TR>
<TR><TD>Петродворец </TD>
<TD ALIGN=RIGHT> 83.8</TD>
<TD ALIGN=RIGHT> 29</TD></TR>
<TR><TD>Пушкин </TD>
<TD ALIGN=RIGHT> 95.1 </TD>
<TD ALIGN=RIGHT> 24</TD></TR>
<TR><TD>Сестрорецк </TD>
<TD ALIGN=RIGHT> 34.9</TD>
<TD ALIGN=RIGHT> 35</TD></TR>
</TABLE>
<P> <CENTER>
Все города, пoдчинeнныe <BR>aдминиcтpaции
<BR>Caнкт-Пeтepбypгa, имеют <BR>
прямые гopoдcкиe <BR>тeлeфoнныe номера
</CENTER> </TD>
<TD WIDTH=50></TD>
<TD VALIGN=TOP>
<TABLE BORDER CELLPADDING=3 CELLSPACING=0>
<CAPTION>
<STRONG> Города областного подчинения </CAPTION >
<TR><TH>Город</TH><TH>H</TH><TH>P</TH></TR>
<TR><TD>Бокситогорск </TD>
<TD ALIGN=RIGHT> 21.6</TD>
<TD ALIGN=RIGHT>245</TD></TR>
<TR><TD>Волхов </TD>
<TD ALIGN=RIGHT> 50.3</TD>
<TD ALIGN=RIGHT>122</TD></TR>
<TR><TD>Всеволожск </TD>
<TD ALIGN=RIGHT> 32.9</TD>
<TD ALIGN=RIGHT>24</TD></TR>
<TR><TD>Выборг </TD>
<TD ALIGN=RIGHT> 80.9</TD>
<TD ALIGEN=RIGHT>130</TD></TR>
<TR><TD>Высоцк </TD>
<TD ALIGN=RIGHT> 1.0</TD>
<TD ALIGEN=RIGHT>159</TD></TR>
<TR><TD>Гатчина </TD>
<TD ALIGN=RIGHT> 80.9</TD>
<TD ALIGEN=RIGHT>46</TD></TR>
<TR><TD>Ивангород </TD>
<TD ALIGN=RIGHT> 11.9</TD>
<TD ALIGEN=RiGHT>147</TD></TR>
<TR><TD>Каменогорск </TD>
<TD ALIGN=RIGHT> 5.9</TD>
<TD ALIGEN=RIGHT>157</TD></TR>
<TR><TD>Кингисепп </TD>
<TD ALIGN=RIGHT> 51.5</TD>
<TD ALIGN=RIGHT>138</TD></TR>
<TR><TD>Кириши </TD>
<TD ALIGN=RIGHT> 53.8</TD>
<TD ALIGN=RIGHT>115</TD></TR>
<TR><TD>Kировск </TD>
<TD ALIGN=RIGHT> 23.8</TD>
<TD ALIGN=RIGHT>55</TD></TR>
<TR><TD>Лoдeйнoe Поле</ТD>
<TD ALIGN=RIGHT> 27.3</TD>
<TD ALIGN=RIGHT>244</TD></TR>
<TR><TD>Луга </TD> <TD ALIGN=RIGHT> 41.8</TD>
<TD ALIGN=RIGHT>139</TD></TR>
</TABLE> </TD>
<TD WIDTH=50></TD>
<TD VALIGN=TOP>
<TABLE BORDER CELLPADDING=3 CELLSPACING=0>
<CAPTION><STRONG>(продолжение таблицы)</CAPTION>
<TR><TH>Город</TH><TH>H</TH><TH>P</TH></TR>
<TR><TD>Любaнь </TD>
<TD ALIGN=RIGHT>4.7</TD>
<TD ALIGN-RIGHT> 85</TD></TR>
<TR><TD>Новая Ладога</TD>
<TD ALIGN=RIGHT>11.2</TD>
<TD ALIGN-RIGHT>141</TD></TR>
<TR><TD>Отрадное </TD>
<TD ALIGN=RIGHT>22.9</TD>
<TD ALIGN=RIGHT> 40</TD></TR>
<TR><TD>Пикaлeвo </TD>
<TD ALIGN=RIGHT>25.1</TD>
<TD ALIGN=RIGHT>246</TD></TR>
<TR><TD>Пoдпopoжьe </TD>
<TD ALIGN=RIGHT>23.1</TD>
<TD ALIGN=RIGHT>285</TD></TR>
<TR><TD>Приморск </TD>
<TD ALIGN=RIGHT> 6.7</TD>
<TD ALIGN=RIGHT>137</TD></TR>
<TR><TD>Приозерск </TD>
<TD ALIGN-RIGHT>20.5</TD>
<TD ALIGN=RIGHT>145</TD></TR>
<TR><TD>Светогорск </TD>
<TD ALIGN=RIGHT>15.8</TD>
<TD ALIGN=RIGHT>201</TD></TR>
<TR><TD>Cлaнцы </TD>
<TD ALIGN=RIGHT>42.6</TD>
<TD ALIGN=RIGHT>192</TD></TR>
<TR><TD>Сосновый Бор</TD>
<TD ALIGN-RIGHT>57.6</TD>
<TD ALIGN=RIGHT> 81</TD></TR>
<TR><TD>Тихвин </TD>
<TD ALIGN=RIGHT>72.0</TD>
<TD ALIGN=RIGHT>200</TD></TR>
<TR><TD>Тосно </TD> <TD ALIGN=RIGHT>33.8</TD>
<TD ALIGN=RIGHT> 53</TD></TR>
<TR><TD>Шлиcceльбypг</TD>
<TD ALIGN-RIGHT>12.5</TD>
<TD ALIGN-RIGHT> 64</TD></TR>
</TABLE> </TD> </TR>
</TABLE>
</BODY>
</HTML>
На первый взгляд кажется, что в примере нет вложенности таблиц. На самом деле весь документ представляет собой таблицу, не имеющую рамок и состоящую из заголовка и всего одной строки, содержащей пять ячеек. Организация такой таблицы служит единственной цели — расположению данных на странице. Внутри первой ячейки располагается другая таблица, имеющая свой заголовок и состоящая из трех столбцов, после которой идет текст, выровненный посередине. Третья и пятая ячейки также содержат отдельные таблицы. Вторая и четвертая ячейки — пустые, они не содержат никаких данных и имеют единственный параметр width, определяющий ее ширину. Их назначение — задать отступ между первой и третьей, а также третьей и пятой ячейками, в которых располагаются таблицы. Это один из возможных вариантов задания такого отступа.