ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 06.04.2021

Просмотров: 445

Скачиваний: 1

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
background image

 

36

      <

Т

D>

Ячейка

 3</

Т

D><

Т

D>

Ячейка

 4</TD> 

    </TR> 
    <TR> 
      <

Т

D>

Ячейка

 5</

Т

D><

Т

D>

Ячейка

 6</

Т

D> 

      <TD>

Ячейка

 7</

Т

D><

Т

D>

Ячейка

 8</TD> 

    </TR> 
  </TABLE> 
  </BODY> 
</HTML>

 

 

Из

 

рис

. 23 

видно

что

 

таблица

 

состоит

 

из

 

четырех

 

столбцов

в

 

которых

 

данные

 

сгруппированы

 

по

 

заданному

 

признаку

Первые

 

два

 

столбца

 

имеют

 

тип

 

выравнивания

 

по

 

центру

последние

 

два

 – 

по

 

правому

 

краю

Колонтитулы

 

таблицы

 

Браузер

 Internet Explorer 

позволяет

 

использовать

 

дополнительные

 

теги

 

структурирования

 

табличных

 

данных

а

 

именно

 – 

<THEAD>

<TBODY>

 

и

 

<TFOOT>.

 

Эти

 

теги

 

предназначены

 

для

 

создания

 

колонтитулов

 

таблицы

 

различных

 

уровней

  (

соответственно

 

для

 

верхнего

основного

  (

содержа

-

тельного

и

 

нижнего

 

уровней

 

таблицы

). 

Теги

 

верхнего

 

и

 

нижнего

 

колонтитулов

 

<THEAD>

 

и

 

<TFOOT>

 

могут

 

быть

 

использованы

 

в

 

структуре

 

таблицы

 

лишь

 

единожды

причем

 

для

 

них

 

необязательно

 

наличие

 

закрывающих

 

тегов

Тег

 

основного

 

колонтитула

 

<TBODY>

 

может

 

встречаться

 

неоднократно

 

в

 

пределах

 

одной

 

таблицы

однако

 

требует

 

своего

 

закрывающего

 

тега

Верхний

 

и

 

нижний

 

колонтитулы

 

функционально

 

очерчивают

 

логиче

-

ские

 

заголовки

 

соответствующего

 

уровня

 

и

 

применимы

в

 

основном

в

 

больших

 

таблицах

не

 

помещающихся

 

в

 

пределах

 

одной

 

страницы

 

элек

-

тронного

 

документа

Основные

 

колонтитулы

 

выполняют

 

функцию

аналогичную

 

тегам

 

группировки

 

<COL>

 

и

 

<COLGROUP>, 

расставляя

 

логические

 

метки

 

по

 

ходу

 

изложения

 

основной

 

содержательной

 

части

 

таблицы

Прорисовка

 

структуры

 

таблицы

 

Еще

 

одной

 

замечательной

 

возможностью

 

нестандартного

 

представления

 

таблиц

является

 

прорисовка

 

внутренней

 

структуры

 

таблицы

а

 

именно

 – 

рамок

 

и

 

линеек

Другими

 

словами

возможно

 

оформить

 

таблицу

 

таким

 

об

-

разом

что

 

от

 

рамки

 

останутся

 

только

 

верхняя

 

и

 

нижняя

 

границы

а

 

между

 

ячейками

 

останется

 

только

 

вертикальная

 

линейка

За

 

изменение

 

свойств

 

рамки

 

отвечает

 

параметр

 

FRAME

а

 

с

 

помощью

 

параметра

 

RULES

 

варьируется

 

внешний

 

вид

 

линеек

 

таблицы

  (

оба

 

пара

-

метра

 

применимы

 

внутри

 

тега

 

<TABLE>

). 

Пример

 

нестандартных

 

воз

-

можностей

 

прорисовки

 

структуры

 

таблицы

 

приведен

 

соответственно

 

в

 

листинге

 2.8 

и

 

на

 

рис

. 24. 

 


background image

 

37

 

 

Рис

. 24.

 

Нестандартные

 

возможности

 

прорисовки

 

структуры

 

таблицы

 

 

Листинг

 4.8. 

Нестандартные

 

возможности

 

прорисовки

 

структуры

 

таблицы

 

 

<HTML> 
  <HEAD> 
  <TITLE>

Нестандартные

 

возможности

 

прорисовки

  

         

структуры

 

таблицы

</TITLE> 

  </HEAD> 
  <BODY BGCOLOR="#FFFFFF" TEXT="black"  
        LINK="#00FF00" ALINK="#00FF00" VLINK="blue"> 
  <TABLE ALIGN="center" BORDER="1" CELLSPACING="0" 
   CELLPADDING="4" WIDTH="100%"  
   FRAME="hsides" RULES="rows"> 
    <

САР

TION><B>

Таблица

 1</B></CAPTION> 

    <TR> 
      <

Т

D>

Ячейка

 1</

Т

D><

Т

D>

Ячейка

 2</

Т

D> 

      <

Т

D>

Ячейка

 3</

Т

D><

Т

D>

Ячейка

 4</TD> 

    </TR> 
    <TR> 
      <

Т

D>

Ячейка

 5</

Т

D><

Т

D>

Ячейка

 6</

Т

D> 

      <TD>

Ячейка

 7</

Т

D><TD>

Ячейка

 8</TD> 

    </TR> 


background image

 

38

  </TABLE> 
  <TABLE ALIGN="center" BORDER="1" CELLSPACING="0" 
   CELLPADDING="4" WIDTH="100%" 
   FRAME="box" RULES="groups"> 
    <

САРТ

ION><

В

>

Таблица

 2</B></CAPTION> 

    <TR> 
      <

Т

D>

Ячейка

 1</

Т

D><

Т

D>

Ячейка

 2</

Т

D> 

      <

Т

D>

Ячейка

 3</

Т

D><

Т

D>

Ячейка

 4</TD> 

    </TR> 
    <TR> 
      <

Т

D>

Ячейка

 5</

Т

D><

Т

D>

Ячейка

 6</

Т

D> 

      <TD>

Ячейка

 7</

Т

D><TD>

Ячейка

 8</TD> 

    </TR> 
  </TABLE> 
  <TABLE ALIGN="center" BORDER="1" CELLSPACING="0" 
   CELLPADDING="4" WIDTH="100%" 
   FRAME="above" RULES="all"> 
    <

САРТ

ION><

В

>

Таблица

 3</B></CAPTION> 

    <TR> 
      <

Т

D>

Ячейка

 1</

Т

D><

Т

D>

Ячейка

 2</

Т

D> 

      <

Т

D>

Ячейка

 3</

Т

D><

Т

D>

Ячейка

 4</TD> 

    </TR> 
    <TR> 
      <

Т

D>

Ячейка

 5</

Т

D><

Т

D>

Ячейка

 6</

Т

D> 

      <TD>

Ячейка

 7</

Т

D><TD>

Ячейка

 8</TD> 

    </TR> 
  </TABLE> 
  </BODY>

 

</HTML> 

Возможные

 

значения

 

параметров

 

RULES

 

и

 

FRAME

 

приведены

 

соответ

-

ственно

 

в

 

табл

. 2.3 

и

 2.4. 

 

Т а б л и ц а

  2 . 3    

Возможные

 

значения

 

параметра

 

RULES 

Значение

 

Функция

 

ALL 

Отображение

 

линейки

 

целиком

 

GROUPS 

Часть

 

линейки

разделяющая

 

сгруппированные

 

данные

COLS 

Часть

 

линейки

разделяющая

 

столбцы

 

ROWS 

Часть

 

линейки

разделяющая

 

строки

 

NONE 

Отсутствие

 

линейки

 

 

 
 


background image

 

39

Т а б л и ц а

  2 . 4  

Возможные

 

значения

 

параметра

 

FRAME

 

Значение

 

Функция

 

BOX 

Рамка

 

с

 

четырех

 

сторон

 

BORDER 

Рамка

 

с

 

четырех

 

сторон

 

ABOVE 

Рамка

 

только

 

сверху

 

BELOW 

Рамка

 

только

 

снизу

 

HSIDES 

Верхняя

 

и

 

нижняя

 

части

 

рамки

 

VSIDES 

Левая

 

и

 

правая

 

части

 

рамки

 

LHS 

Только

 

левая

 

часть

 

рамки

 

RHS 

Только

 

правая

 

часть

 

рамки

 

VOID 

Нет

 

рамок

 

2.6. 

Вложенные

 

таблицы

 

Одной

 

из

 

замечательных

 

особенностей

 HTML-

таблиц

 

по

 

праву

 

счита

-

ется

 

поддержка

 

многоуровневой

 

вложенности

Другими

 

словами

одна

 

таб

-

лица

 

может

 

включать

 

другую

та

в

 

свою

 

очередь

еще

 

одну

 

и

 

т

д

Преимущества

 

вложенных

 

таблиц

 

Особенность

 

вложенных

 

таблиц

в

 

отличие

 

от

 

других

 

способов

 

пред

-

ставления

 

данных

 

в

 

электронном

 

документе

позволяет

 

более

 

точно

 

раз

-

мещать

 

отдельные

 

элементы

 

страницы

 

относительно

 

друг

 

друга

 

и

 

относи

-

тельно

 

границ

 

самого

 

документа

отображаемого

 

браузером

Например

два

 

разнородных

 

блока

 

текста

 

и

 

нумерованный

 

список

раз

-

мещенные

 

внутри

 

тега

 

<BODY>

невозможно

 

разместить

 

на

 

одном

 

уровне

а

 

тем

 

более

 

на

 

одном

 

уровне

 

со

 

смещением

 

в

 

какую

-

либо

 

сторону

Исполь

-

зование

 

таблиц

 

с

 

легкостью

 

решает

 

эту

 

проблему

позволяя

 

располагать

 

различные

 

элементы

 

и

 

их

 

комбинации

 

в

 

разных

 

местах

 

документа

 

посред

-

ством

 

видимых

 

и

 

невидимых

 

ячеек

 

рядов

 

таблицы

Вот

 

почему

 

в

 

последнее

 

время

 

преобладающее

 

большинство

 HTML-

документов

 

создается

 

на

 

основе

 

таблиц

где

 

в

 

качестве

 

несущей

 

основы

 

берется

 

таблица

 

с

 

невидимыми

 

краями

содержащая

 

вложенные

 

таблицы

 

с

 

разным

 

оформлением

отличающимися

 

значениями

 

параметров

Подводя

 

итог

 

сказанному

можно

 

выделить

 

следующие

 

преимущества

 

вложенных

 

таблиц

 

гибкая

 

масштабируемость

 

структуры

 

электронного

 

документа

 

в

 

целом

 

широкие

 

возможности

 

позиционирования

 

отдельных

 

элементов

 

страницы

 

многоуровневое

 

представление

 

разнородных

 

информационных

 

данных

 

расширенные

 

оформительские

 

возможности

 

поддержка

 

популярными

 

браузерами

 


background image

 

40

Пример

 

вложенных

 

таблиц

 

Правила

 

построения

 

вложенных

 

таблиц

 

ничем

 

не

 

отличаются

 

от

 

созда

-

ния

 

таблиц

 

одного

 

уровня

 – 

используются

 

те

 

же

 

теги

 

и

 

параметры

задают

-

ся

 

те

 

же

 

свойства

 

и

 

значения

Единственное

о

 

чем

 

нельзя

 

забывать

 

в

 

ходе

 

создания

 

сложных

 

вложен

-

ных

 

таблиц

это

 

каждая

 

таблица

 

последующего

 

уровня

 

размещается

 

внутри

 

тегакон

-

тейнера

 <TD> 

или

 <TH> 

таблицы

 

предыдущего

 

уровня

 

вложенная

 

таблица

 

не

 

может

 

быть

 

создана

 

за

 

пределами

 

вышена

-

званных

 

тегов

 

ячейки

 

таблицы

 

таблица

 

одного

 

уровня

 

может

 

содержать

 

любое

 

количество

 

вложен

-

ных

 

таблиц

 

другого

 

уровня

идущих

 

друг

 

за

 

другом

 

в

 

пределах

 

тега

 

ячейки

 

таблицы

 

верхнего

 

уровня

 

количество

 

тегов

 

таблиц

 

всех

 

уровней

 

должно

 

соответствовать

 

коли

-

честву

 

закрывающих

 

тегов

 

этих

 

же

 

таблиц

Один

 

из

 

вариантов

 

использования

 

многоуровневых

 

вложенных

 

таблиц

 

приведен

 

соответственно

 

в

 

листинге

 2.9 

и

 

на

 

рис

. 25. 

Листинг

 2.9. 

Пример

 

использования

 

многоуровневых

 

вложенных

 

таблиц

 

<HTML> 

 <HEAD> 
 <TITLE>

Пример

 

использования

 

многоуровневых

  

        

вложенных

 

таблиц

</TITLE> 

 </HEAD> 

 <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00" 
        ALINK="#00FF00" VLINK="blue"> 
 <H2 ALIGN="center">

ПО

CTPOEH

И

ВЛОЖЕННЫХ

 

ТАБЛИЦ

</

Н

2> 

 <!– 

Основная

 

несущая

 

таблица

Начало

 –> 

 <TABLE ALIGN="center" BORDER="0" CELLSPACING="0" 
        CELLPADDING="2" WIDTH="100%"> 
  <TR> 
   <TD VALIGN="top" WIDTH="50%"> 
    <! – 

Левая

 

таблица

 

с

 

текстом

Начало

 – > 

    <TABLE ALIGN="center" BORDER="1" CELLSPACING="3"  
     CELLPADDING="5" WIDTH="100%"> 
     <TR> 
      <TH BGCOLOR="gray"> <FONT COLOR="white"> 

       

Вложенные

 

таблицы

 </FONT></

ТН

     </TR> 
     <TR> 
      <TD VALIGN="top"> <P ALIGN="justify"> 

       

Одной

 

из

 

замечательных

 

особенностей

 HTML- 

       

таблиц

 

по

 

праву

 

считается

 

поддержка