ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 06.04.2021
Просмотров: 435
Скачиваний: 1
31
<TR ALIGN="center">
<
Т
D>
Заполненная
ячейка
</
Т
D> <TD></TD>
<
Т
D>
Заполненная
ячейка
</
Т
D>
</TR>
</TABLE>
</BODY>
</HTML>
Рис
. 19.
Пример
отображения
пустых
ячеек
таблицы
браузером
Internet Explorer
Рис
. 20.
Пример
отображения
пустых
ячеек
таблицы
браузером
Mozilla Firefox
32
Рис
. 21.
Пример
отображения
пустых
ячеек
таблицы
браузером
Opera
Чтобы
избежать
различий
в
отображении
таблиц
,
внутри
тегов
ячеек
<TD>
и
<TH>
следует
размещать
не
видимые
на
экране
данные
,
позво
-
ляющие
браузерам
не
отображать
такие
ячейки
как
пустые
.
Подобные
дан
-
ные
могут
быть
следующих
типов
:
●
теги
структурного
форматирования
.
В
данном
случае
под
этим
понятием
подразумевается
тег
принудительного
переноса
строки
<BR>
и
конструкция
запрета
такого
переноса
.
При
использовании
этих
элементов
следует
помнить
,
что
размер
пустой
(
в
визуальном
плане
)
ячей
-
ки
будет
зависеть
от
свойств
шрифта
,
заданных
для
HTML-
документа
в
целом
или
же
предопределенных
для
конкретного
блока
(
<SPAN>
,
<DIV>
)
или
ячейки
;
●
цветные
текстовые
блоки
.
Разместив
в
ячейке
,
которая
должна
ви
-
зуально
казаться
пустой
,
текст
небольшого
объема
цветом
,
аналогичным
значению
параметра
BGCOLOR
тега
<TD>
или
<TH>
,
при
просмотре
такого
документа
в
браузере
мы
получим
«
пустую
»
табличную
ячейку
;
●
прозрачные
графические
распорки
.
Это
способ
отображения
пус
-
тых
ячеек
,
практически
не
зависящий
от
модели
браузера
и
свойств
шриф
-
та
.
Заключается
в
размещении
прозрачного
графического
изображения
нужных
размеров
(
распорки
,
спейсера
)
в
пределах
табличной
ячейки
.
Про
-
зрачная
распорка
(
в
формате
GIF)
невидима
на
странице
и
очень
гибка
в
масштабировании
.
К
примеру
,
невидимый
спейсер
исходного
размера
10 × 10
пикселов
при
необходимости
можно
искусственно
увеличить
или
умень
-
шить
путем
переназначения
его
параметров
WIDTH
и
HEIGHT.
Пример
использования
различных
типов
отображения
пустых
ячеек
таблицы
при
-
веден
соответственно
на
рис
. 22
и
в
листинге
2.6.
33
Рис
. 22.
Использование
различных
типов
отображения
пустых
ячеек
таблицы
Листинг
2.6.
Использование
различных
типов
отображения
пустых
ячеек
таблицы
<HTML>
<HEAD>
<TITLE>
Использование
различных
типов
отображения
пустых
ячеек
таблицы
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black"
LINK="#00FF00" ALINK="#00FF00" VLINK="blue">
<TABLE ALIGN="center" BORDER="1" CELLSPACING="0"
CELLPADDING="5" WIDTH="90%" HEIGHT="200">
<TR ALIGN="center">
<TD BGCOLOR="#CECECE"> </TD>
<
Т
D>
Заполненная
ячейка
</
Т
D>
</TR>
<TR ALIGN="center">
<TD BGCOLOR="#CECECE">
<FONT COLOR="#CECECE">
Текст
</FONT></TD>
<
Т
D>
Заполненная
ячейка
</
Т
D>
</TR>
<TR ALIGN="center">
<TD BGCOLOR="#CECECE">
34
<IMG SRC="spacer.gif" WIDTH="10" HEIGHT="10"
ALT="">
</TD>
<
Т
D>
Заполненная
ячейка
</
Т
D>
</TR>
</TABLE>
</BODY>
</HTML>
Группировка
данных
При
построении
таблиц
мы
можем
легко
задать
единый
тип
выравни
-
вания
для
отдельной
ячейки
и
даже
целого
табличного
ряда
.
Однако
гораз
-
до
чаще
может
возникнуть
необходимость
в
едином
выравнивании
инфор
-
мационных
данных
конкретного
столбца
.
Столбец
в
таблице
–
это
после
-
довательность
ячеек
,
располагающихся
в
разных
рядах
.
Стандартными
средствами
HTML
нам
пришлось
бы
задавать
один
и
тот
же
тип
выравнивания
для
отдельно
взятой
ячейки
,
формирующей
нужный
столбец
:
<TABLE>
<TR>
<TD ALIGN ="right">
Ячейка
1
с
выравниванием
вправо
</
Т
D>
<TD ALIGN ="center">
Ячейка
1
с
выравниванием
по
центру
</
Т
D>
</TR>
<TR>
<TD ALIGN ="right">
Ячейка
2
с
выравниванием
вправо
</
Т
D>
<TD ALIGN="center">
Ячейка
2
с
выравниванием
по
центру
</
Т
D>
</TR>
</TABLE>
При
работе
с
браузером
Internet Explorer
труд
разработчика
электрон
-
ного
документа
может
быть
значительно
облегчен
за
счет
таких
тегов
,
как
<COL>
и
<COLGROUP>.
Теги
<COL>
и
<COLGROUP>
предназначены
для
определения
свойств
отображения
табличных
данных
,
сгруппированных
по
конкретному
при
-
знаку
.
Они
оба
могут
иметь
параметр
SPAN
,
задающий
количество
сосед
-
35
них
столбцов
,
и
параметр
ALIGN
,
устанавливающий
единый
тип
выравни
-
вания
для
выбранного
столбца
(
возможные
значения
:
по
левому
краю
,
по
правому
краю
,
по
центру
;
формат
записи
аналогичен
тегам
<TD>
и
<TH>
).
Помимо
этого
тег
<COLGROUP>
может
содержать
дополнительный
па
-
раметр
вертикального
выравнивания
данных
–
VALIGN
(
возможные
значе
-
ния
:
по
верхнему
краю
,
по
нижнему
краю
,
по
середине
;
формат
записи
аналогичен
тегам
<TD>
и
<TH>
).
Разница
между
тегами
<COL>
и
<COLGROUP>
заключается
в
условном
объединении
(
группировке
)
взаимосвязанных
данных
отдельно
взятого
столбца
таблицы
.
Пример
группировки
данных
таблицы
приведен
соответ
-
ственно
на
рис
. 23
и
в
листинге
2.7.
Рис
. 23.
Группировка
данных
таблицы
Листинг
2.7.
Группировка
данных
таблицы
<HTML>
<HEAD>
<TITLE>
Группировка
данных
таблицы
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00"
ALINK="#00FF00"VLINK="blue">
<TABLE ALIGN="center" BORDER="2" CELLSPACING="0"
CELLPADDING="5" WIDTH="100%" HEIGHT="200">
<COLGROUP ALIGN="center" SPAN="2">
<COLGROUP ALIGN="right" SPAN="2">
<TR>
<
Т
D>
Ячейка
1</
Т
D><
Т
D>
Ячейка
2</
Т
D>