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

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

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

Добавлен: 06.04.2021

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

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

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

 

26

 

VALIGN="bottom"

 – 

выравнивание

 

по

 

нижней

 

границе

 

ячейки

 

VALIGN="baseline"

 – 

выравнивание

 

по

 

базовой

 

линии

  (

привязка

 

текста

 

одной

 

строки

 

к

 

единому

 

уровню

). 

Пример

 

разных

 

типов

 

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

 

ячеек

 

таблицы

 

приведен

 

соответ

-

ственно

 

в

 

листинге

 2.3 

и

 

на

 

рис

. 16. 

 

 

 

Рис

. 16.

 

Разные

 

типы

 

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

 

ячеек

 

таблицы

 

 

Листинг

 2.3. 

Разные

 

типы

 

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

 

ячеек

 

таблицы

 

<HTML> 
  <HEAD> 
  <

Т

I

Т

L

Е

>

Разные

 

типы

 

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

  

                               

ячеек

 

таблицы

</TITLE> 

  </HEAD> 
  <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00" 
        ALINK="#00FF00" VLINK="blue" LEFTMARGIN="40" 
        RIGHTMARGIN="40" MARGINWIDTH="40"> 
  <TABLE ALIGN="center" BORDER="2"  
         CELLSPACING="0" CELLPADDING="5" 
         WIDTH="100%" HEIGHT="200"> 
    <TR ALIGN="center"> 
      <TD VALIGN="bottom">

Ячейка

 1</TD> 

      <

Т

D>

Ячейка

 2</TD> 

      <TD VALIGN="top">

Ячейка

 3</TD> 

    </TR> 
    <TR> 


background image

 

27

      <TD ALIGN="right">

Ячейка

 4</TD> 

      <TD ALIGN="center">

Ячейка

 5</TD> 

      <

Т

D>

Ячейка

 6</TD> 

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

 

Параметры

 

ALIGN

 

и

 

VALIGN

 

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

 

в

 

тегах

 

<TR>

  (

для

 

всего

 

ряда

 

таблицы

), 

<TD>

 

и

 

<TH>

Параметры

 

BGCOLOR

 

и

 

BACKGROUND

 

Параметры

 

BGCOLOR

 

и

 

BACKGROUND

 

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

 

для

 

работы

 

с

 

фо

-

ном

 

ячеек

 

или

 

целых

 

рядов

 

таблицы

BGCOLOR

 

позволяет

 

задать

 

опреде

-

ленный

 

цвет

 

ячеек

, a 

BACKGROUND

 – 

указать

 

путь

 

к

 

графическому

 

изобра

-

жению

которое

 

будет

 

служить

 

фоном

 (

рис

. 17). 

Действие

 

данных

 

параметров

 

в

 

отношении

 

тега

 

ряда

 

<TR>

 

и

 

тегов

 

ячейки

 

<TD>

 

и

 

<TH>

 

аналогично

 

типу

 

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

 

ALIGN

 

и

 

VALIGN

Параметр

 

BGCOLOR

 

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

 

для

 

тегов

 

<TR>

<TD>

 

и

 

<TH>

Пара

-

метр

 

BACKGROUND

 

только

 

к

 

тегам

 

ячеек

 

<TD>

 

и

 

<

ТН

>

 

 

 

Рис

. 17.

 

Использование

 

цвета

 

и

 

графического

 

изображения

  

для

 

заднего

 

фона

 

ячеек

 

 

 
 
 


background image

 

28

Параметры

 

WIDTH

 

и

 

HEIGHT

 

Это

 

параметры

 

ширины

 

и

 

высоты

 

либо

 

отдельных

 

ячеек

либо

 

целых

 

рядов

 

таблицы

Правила

 

указания

 

аналогичны

 

этим

 

же

 

параметрам

 

тега

 

<TABLE>

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

 

для

 

<TR>

<TD>

 

и

 

<TH>

Параметр

 

NOWRAP

 

Параметр

 

NOWRAP

 

запрещает

 

принудительный

 

перенос

 

строки

 

в

 

ячейке

 

или

 

табличном

 

ряде

Не

 

рекомендуется

 

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

 

данный

 

параметр

 

во

 

всех

 

ячейках

т

к

это

 

может

 

сильно

 

понизить

 

уровень

 

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

 

таблицы

 (

при

 

условии

что

 

значение

 

ширины

 

и

/

или

 

высоты

 

таблицы

 

указа

-

но

 

в

 

процентах

). 

Параметр

 

NOWRAP

 

применим

 

в

 

<TR>

<TD>

 

и

 

<TH>

Параметры

 

COLSPAN

 

и

 

ROWSPAN

 

Иногда

 

при

 

построении

 

таблиц

 

возникает

 

необходимость

 

в

 

объедине

-

нии

 

нескольких

 

соседних

 

ячеек

 

в

 

одну

Для

 

этого

 

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

 

параметры

 

COLSPAN

 

и

 

ROWSPAN

COLSPAN

 

показывает

на

 

сколько

 

ячеек

 

по

 

горизонтали

 

следует

 

расши

-

рить

 <TD> 

или

 <TH>, 

в

 

котором

 

указан

 

данный

 

параметр

. ROWSPAN 

де

-

лает

 

то

 

же

 

самое

но

 

увеличивает

 

область

 <TD> 

или

 <TH> 

по

 

вертикали

 

(

рис

. 18, 

листинг

 4.4). 

Листинг

 2.4. 

Пример

 

объединения

 

ячеек

 

с

 

помощью

 

COLSPAN

 

и

 

ROWSPAN

 

<HTML> 
  <HEAD> 
  <TITLE>

Пример

 

объединения

 

ячеек

  

         

с

 

помощью

 COLSPAN 

и

 ROWSPAN</TITLE> 

  </HEAD> 
  <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00" 
        ALINK="#00FF00" VLINK="blue" LEFTMARGIN="40" 
        RIGHTMARGIN="40" MARGINWIDTH="40"> 
  <TABLE ALIGN="center" BORDER="2" CELLSPACING="0" 
          CELLPADDING="5" WIDTH="100%" HEIGHT="200"> 
    <TR ALIGN="center" BGCOLOR="#CECECE"> 
      <TH COLSPAN="2">

Ячейка

 1</TH> 

    </TR> 
    <TR> 
      <TD ALIGN="center" ROWSPAN="3"> 

Ячейка

 2</TD> 

      <TD ALIGN="center"> 

Ячейка

 3</TD> 

    </TR> 
    <TR> 
      <TD ALIGN="center">

Ячейка

 4</TD> 

    </TR> 
    <TR> 
      <TD ALIGN="center">

Ячейка

 5</TD> 

    </TR> 


background image

 

29

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

 

 

 

Рис

. 18.

 

Пример

 

объединения

 

ячеек

 

с

 

помощью

 

COLSPAN

 

и

 

ROWSPAN

 

 

При

 

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

 

параметров

 

COLSPAN

 

и

 

ROWSPAN

 

особое

 

внимание

 

следует

 

уделять

 

корректному

 

объединению

 

соседних

 

ячеек

 

таблицы

а

 

также

 

своевременному

 

указанию

 

закрывающих

 

тегов

 

ячеек

 

и

 

рядов

Воз

-

никновение

 

ошибки

 

может

 

привести

 

к

 

нарушению

 

структуры

 

таблицы

«

заползанию

» 

одних

 

ячеек

 

на

 

другие

перекрытию

 

текста

 

и

 

даже

 

невоз

-

можности

 

отобразить

 

таблицу

 

в

 

браузере

Параметры

 

COLSPAN

 

и

 

ROWSPAN

 

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

 

только

 

в

 

тегах

 

ячейки

 

<TD>

 

и

 

<TH>

Перечень

 

параметров

 

тегов

 

<TR>

<TD>

 

и

 

<TH>

 

приведен

 

в

 

табл

. 2.2. 

 

Т а б л и ц а

  2 . 2  

Параметры

 

тегов

 

<TR>

<TD>

 

и

 

<TH>

 

 

Параметр

 

Функция

 

Применение

 

ALIGN 

Выравнивание

 

содержимого

 

ячейки

 

или

 

ряда

 

по

 

горизонтали

 

<TR>, <TD>, 
<TH> 

VALIGN 

Выравнивание

 

содержимого

 

ячейки

 

или

 

ряда

 

по

 

вертикали

 

<TR>, <TD>, 
<TH> 

WIDTH 

Определение

 

ширины

 

ячейки

 

или

 

ряда

 

<TR>, <TD>, 
<TH> 


background image

 

30

HEIGHT 

Определение

 

высоты

 

ячейки

 

или

 

ря

-

да

 

<TR>, <TD>, 
<TH> 

BGCOLOR 

Указание

 

цвета

 

для

 

фона

 

ячейки

 

или

 

Ряда

 

<TR>, <TD>, 
<TH> 

BACKGROUND 

Указание

 

рисунка

 

для

 

фона

 

ячейки

 

<TD>, <TH> 

NOWRAP 

Запрет

 

принудительного

 

переноса

 

строки

 

в

 

ячейке

 

или

 

ряду

 

<TR>, <TD>, 
<TH> 
 

COLSPAN 

Объединение

 

соседних

 

ячеек

 

по

 

го

-

ризонтали

 

<TD>, <TH> 

ROWSPAN 

Объединение

 

соседних

 

ячеек

 

по

 

вер

-

тикали

 

<TD>, <TH> 

2.5. 

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

 

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

 

таблиц

 

Этот

 

подраздел

 

главы

 

посвящен

 

некоторым

 

специфическим

 

особенно

-

стям

 

построения

 

таблиц

а

 

также

 

различным

 

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

 

способам

 

ра

-

боты

 

с

 

таблицами

Отметим

что

 

описываемые

 

специфические

 

особенности

 

построения

 

таблиц

 

могут

 

не

 

поддерживаться

 

некоторыми

 

браузерами

Пустые

 

ячейки

В

 

процессе

 

построения

 

таблиц

 

может

 

возникнуть

 

необходимость

 

остав

-

ления

 

одной

 

или

 

более

 

ячеек

 

незаполненными

Однако

 

банальное

 

отсут

-

ствие

 

каких

-

либо

 

символов

 

внутри

 

тегов

 

<TD>

 

и

 

<TH>

 

в

 

зависимости

 

от

 

браузера

 

может

 

привести

 

к

 

самым

 

разнообразным

 

вариантам

 

визуального

 

отображения

 

таблицы

 

на

 

экране

Пример

 

отображения

 

пустых

 

ячеек

 

таб

-

лицы

 

различными

 

браузерами

 

приведен

 

в

 

листинге

 2.5. Internet Explorer 

и

 

Mozilla Firefox 

не

 

прорисовывают

 

внутреннюю

 

структуру

 

пустых

 

ячеек

, a 

Opera 

к

 

тому

 

же

 

оттеняет

 

правую

 

границу

 

ячеек

 

с

 

информацией

разме

-

щенных

 

слева

 

от

 

пустых

 

табличных

 

ячеек

 (

рис

. 19–21) 

Листинг

 2.5. 

Пример

 

отображения

 

пустых

 

ячеек

 

таблицы

 

различными

 

браузерами

 

<HTML> 
  <HEAD> <TITLE>

Пример

 

отображения

 

пустых

 

ячеек

  

  

таблицы

 

различными

 

браузерами

</TITLE> </HEAD> 

  

<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00" 

   ALINK="#00FF00" VLINK="blue" LEFTMARGIN="40" 
   RIGHTMARGIN="40" MARGINWIDTH="40">

 

  <TABLE ALIGN="center" BORDER="1" CELLSPACING="0" 
   CELLPADDING="5" WIDTH="100%" HEIGHT="200"> 
    <TR ALIGN="center"> 
      <

Т

D>

Заполненная

 

ячейка

</

Т

D> <TD></TD> 

      <

Т

D>

Заполненная

 

ячейка

</

Т

D> 

    </TR>