<< Пред. стр.

стр. 32
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

<td>bottom</td>
<td>bottom</td>
</tr>
</tbody>


<!— Здесь размечается третий основной раздел. —>


<tbody>
<tr>
<th>bgcolor</th>
<td>#0000FF</td>
<td>#00FFFF</td>
<td>#FF00FF</td>
<td>#O0FFO0</td>
<td>#0000FF</td>
<td>#00CCFF</td>
</tr>
</tbody>


<!—Добавим закрывающий тег таблицы, чтобы завершить разметку. —>


</table>



использование большинства тегов группировки
Возможно, вы удивляетесь, что хорошего в HTML-тегах группировки: <col>, <col-
group>, <thead>, <tf oot> и <tbody>. Все таки, эти теги не добавляют никакого со-
держимого в таблицу. Теги <col> и <colgroup> просто описывают структуру столб-
цов в таблице, а теги <thead>, <tf oot> и <tbody> размечают разделы таблицы. За-
чем надо в первую очередь кодировать в таблице эти сведения?
300 Строим Web-сайты


Совет
При использовании тегов <col> и <colgroup> с тегами <thead>,
<tfoot>n <tbody> в одной и той же таблице браузер Netscape рабо-
тает неустойчиво и не всегда применяет атрибуты col и colgrou;::
Простой способ решения этой проблемы состоит в отказе от исполь-
зования col и colgroup вместе с thead, tfoot и tbody. Выберите
одну группу тегов или другую — в зависимости от того, которая из них
больше подходит для конкретной таблицы данных.


Теги группировки не только улучшают доступность таблицы, описывая подробно ее
структуру, они предоставляют ряд удобных способов форматирования. Возьмите в ка-
честве примера таблицу, показанную на рисунке 56.1. Предположим, что вы хотите
выровнять вправо содержимое каждой ячейки таблицы в первом столбце. Нет необ-
ходимости писать строку кода:

<td align="right">
в каждой ячейке таблицы. Просто укажите атрибут align один раз в теге <col>:
<col align="right">
Лучше задавать выравнивание в виде определения CSS-стиля:
<col s t y l e = " t e x t - a l i g n : right;">
Эта сокращенная запись работает также и с тегом <colgroup>:
<colgroup span="6" s t y l e = " t e x t - a l i g n : center,-"></colgroup>
Добавьте атрибут width, чтобы задать размер столбцов по горизонтали:
<col s t y l e = " t e x t - a l i g n : r i g h t ; width: 75px;">
<colgroup span="6" s t y l e = " t e x t - a l i g n : center; width: lOOpx; "x/col. -
group>
HTML-атрибуты и определения CSS-стилей можно также применить к разделам
thead, tfoot и tbody:
<htead style="font-family: Arial, Helvetica, sans s e r i f ; font-
s i z e : lOpx; f o n t - s t y l e : i t a l i c ; " >
<!— Содержимое располагается здесь —>
</thead>


Работа с атрибутами colspan и row/span
Атрибуты c o l span и rowspan представляют беду для макетных таблиц, поскольку яв-
ляются источником всевозможных проблем, связанных со странными разрывами.
Тем не менее, эти атрибуты удобно использовать для таблиц данных, поскольку имен-
но для них предназначались с о span и rowspan разработчиками HTML.
301
ГЛАВА 56. Разработка таблиц данных

С технической точки зрения атрибут col span определяет, сколько столбцов занима-
ет или охватывает конкретная ячейка таблицы, тогда как атрибут rowspan определя-
ет количество охваченных строк. Лучший способ понять, как работают атрибуты
colspan и rowspan — рассмотреть пример, показанный на рисунке 56.2.


Определение
Атрибут colspan определяет количество столбцов, охватываемых
ячейкой таблицы, тогда как атрибут rowspan определяет число охва-
тываемых строк.



File Edit View Favorites loots SJalp


Table 2. Color Transformations in Table Borders after Exposure to the Kenneth
Frequency .
Border Color
Before After
X

#000066
1
! #11111 ifniO

2 #000033 #FFFF33
phase 1
i
J #000066 .| #CC6699
4 #000099 #3333FF
5 #FFFFFF #000000
i

#FFFF33 j #000000
t
Phftie 2
!
7 #FFFKf i #000000
i #FJFF99
i #663399
i *

Before After
X




Puc. 56.2. Для разметки этой таблицы
применяются атрибуты col span и rowspan

Листинг 56.2. Исходный код страницы, вид которой в браузере
показан на рисунке 56.2
<table border="l">


<caption>Table 2. Color Transformations in Table Borders after
Exposure to the Kenneth Frequency</caption>


<colgroup span= "2" style="width: lOOpx;"></colgroup>
<colgroup span=""2" style="width: 150px; text-align:
center;"></colgroup>


<!— Здесь головной элемент состоит из двух строк таблицы. Несколь-
ко ячеек содержат неразрывные пробелы (&nbsp;). Используем их для
заполнения пустых ячеек таблицы.
302 Строим Web-сайты

Последняя ячейка в первой строке содержит атрибут colspan. Как мож-
но видеть на рисунке 56.2, ячейка "Border Color" охватывает два
столбца: столбец "Before" и столбец "After".



<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th colspan="2">Border Color</th>
</tr>
<tr>
<th>&nbsp;</th>
<th>x</th>
<th>Before</th>
<th>After</th>
</tr>
</thead>


<tfoot>
<tr>
<th>&nbsp;</th>
<th>x</th>
<th>Before</th>
<th>After</th>
</tr>
</tfoot>




<!— В этой таблице имеются две основные части, заключенные в теги
<tbody>. В первой ячейке первой строки таблицы содержится атрибут
rowspan. Посмотрев на рисунок, вы увидите, что ячейка "Phase 1" ох-
ватывает строки 1, 2, 3 и 4. ->


<tbody>
ГЛАВА 56. Разработка таблиц данных 303

<tr>
<th rowspan="4">Phase
<th>l</th>
<td>#0OOOOO</td>
<td>#000066</td>
</tr>
<tr>
<th>2</th>
<td>#000033</td>
<td>#FFFF33</td>
</tr>
<tr> .
<th>3</th>
<td>#000066</td>
<td>#CC6699</td>
</tr>
<tr>
<th>4</th>
<td>#000099</td>
<td>#3333FF</td>
</tr> .
</tbody> ,


<!— Здесь размечается вторая основная часть, заключенная в теги
<tbody>. Опять атрибут rowspan в ячейке "Phase 2" обуславливает ох-
ват этой ячейкой четырех строк. —>


<tbody>
<tr>
<th rowspan="4">Phase 2</th>
<th>5</th>
<td>#FFFFFF</td>
<td>#OOOOOO</td>
</tr>
<tr>
Строим Web-сайты
304

<th>6</th>
<td>#FFFF33</td>
<td>#OOOOOO</td>
</tr>
<tr>
<th>7</th>
<td>#FFFF66</td>
<td>#OOOOOO</td>
</tr>
<tr>
<th>8</th>
<td>#FFFF99</td>
<td>#663399</td>
</tr>
</tbody>


</table>

Как можно видеть из листинга 56.2, атрибуты colspan и rowspah находятся в теге
ячейки таблицы <th> или <td> в зависимости от того, является охватывающей ячей-
кой ячейка головной части таблицы или обычная ячейка. Значения этих атрибутов
определяют число охватываемых столбцов или строк.



Совет
Одиночная ячейка таблицы может содержать оба атрибута c o l span и
rowspan.



Вы заметите, что в коде строки, включающей ячейку, которая охватывает несколько
столбцов или строк, по-видимому, пропущена часть разметки. Например, в коде пер-
вой строки данных таблицы, показанной на рисунке 56.2, вы обнаружите три ячей-
ки таблицы:

<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
ГЛАВА 56. Разработка таблиц данных 305


<th colspan="2">Border Color</th>
</tr>
В следующей строке имеется четыре ячейки таблицы:

<tr>
<th>&nbsp;</th>
<th>x</th>
<th>Before</th>
<th>After</th>
</tr>
Отсутствующий код в первой строке — это вполне нормально. В действительности
именно так и должно быть. Ячейка таблицы с атрибутом col span считается за 2 ячей-
ки, в этом случае в обеих строках содержится по четыре ячейки таблицы.
Еще одно замечание: теги <colgroup> вверху кода таблицы имеют следующую
структуру:
<colgroup span="2"x/colgroup>
<colgroup span="2"x/colgroup>
Диапазоны тегов <colgroup> в сумме дают четыре столбца, а не три, хотя, как видно
на рисунке, самая первая строка таблицы состоит из трех ячеек. Здесь опять ячейку с
атрибутом colspan, равным 2, необходимо считать как две ячейки, а не одну. Таким
образом, все совпадает. Теги <colgroup> описывают четыре столбца, и, действитель-
но, в этом разделе таблицы содержится четыре столбца.



Выбор значений атрибутов cellpadding и cellspacing
Обычно при создании макетной таблицы в теге <table> для атрибутов c e l l -
padding и c e l l s p a c i n g задаются значения равные 0. Однако когда создается таб-
лица данных, атрибуты c e l l p a d d i n g и c e l l s p a c i n g служат полезными инстру-
ментами форматирования. Атрибут c e l l p a d d i n g определяет величину внутренне-
го пустого пространства между границами ячейки таблицы и ее содержимым, тогда
как атрибут c e l l s p a c i n g определяет величину внешнего зазора между отдельными
ячейками таблицы.
При задании в теге <table> атрибутов cellpadding и c e l l s p a c i n g их значения
применяются ко всем ячейкам в таблице:
<table border="l" cellpadding="5" cellspacing="8">
На рисунке 56.3 показана таблица, для которой установлены именно эти значения ат-
рибутов. Сравните ее с таблицей, показанной на рисунке 56.2, чтобы увидеть разницу
во внешнем виде, возникающую из-за небольших значений атрибутов eel lpadding и
cellspacing.
306 Строим Web-сайты


View Fjvorites Iools Help
?fe ?(Й


-i:
Table 2 Color Transformations in Table Borders after Exposure to tii nneth Frequency


Bci'drr Co 01


Before After
X


1 #000000 #000066

2 #000033 #FFFF33
Phase 1
3 #000066 #CC6699

л #000099 #3333FF

5 #FFFFFF #000000

#FFFF33
6 #000000
Phase 2
Г 7 #FFFF66 #000000

f" 8 #FFFF99 #663399
i1
Brfor. After
X




Рис. 56.3. В этой таблице данных отрегулированы зазоры внутри
и вне ячеек с помощью атрибутов cellpadding и cellspacing

Используйте атрибуты cellpadding и c e l l s p a c i n g , чтобы добавить немного пус-
того пространства в таблицу, плотно заполненную данными. Таблицы обычно легче
воспринимаются, когда в них есть немного дополнительного свободного простран-
ства. Однако здесь важно не перестараться. Слишком много пустого пространства
также плохо, как и его нехватка. В таких ситуациях следует руководствоваться зри-
тельным восприятием. Если таблица не достаточно удобна для чтения, попробуйте
несколько изменить значения атрибутов cellpadding и c e l l s p a c i n g в ту или дру-
гую сторону.


Определение
Значением атрибута cellpadding определяется величина внутрен-
него пустого пространства между границами ячейки таблицы и ее со-
держимым. Значением атрибута cellspacing определяется вели-
чина зазора между отдельными ячейками таблицы.


Если в таблице данных используются фоновые цвета, возможно, атрибут c e l l -
padding будет лучшим выбором для регулировки зазоров. Атрибут c e l l s p a c i n g час-
то является причиной видимых зазоров между ячейками, нарушая непрерывное поле
фонового цвета, как, например, на рисунке 56.4. Как видно из рисунка 56.5, атрибут
cellpadding не оказывает такого эффекта до тех пор, пока значение атрибута
c e l l s p a c i n g равно 0.
ГЛАВА 56. Разработка таблиц данных 307


Совет
Установите необходимое значение набивки для отдельной ячейки
таблицы с помощью CSS-атрибутов padding-top, padding-bot-
tom, padding-left и padding-right подобно следующему при-
меру:
<td style="padding-top: Зрх; padding-bottom: 4px;
padding-left: 2px; padding-right: 5px;">


Не Е* tfew Fflycrtes lools ЦеЬ
i
Table 2. Color Transformations in Table Borders after Exposure to the Kenneth
Frequency

Border Color
Before After
X




#CC6699
#000099 #3333SF

<< Пред. стр.

стр. 32
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>