<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

5 #FFFFFF #000000
6 #000000
#FFFF33
7 #000000
#FFFF66
8 #FFFF99 #663399
Before After
X




Puc. 56.4. Осторожно подходите к изменению значения атрибута cellspacing,
когда в ячейках таблицы используется цветной фон. При задании значения атрибута
cellspacing часто происходит разрыв сплошного цветного фона в таблице


v:
gte bit щв« Favorfces Tpcb tielp


Table 2 Color Tranjformations in Table Borders after Exposure to the Kenneth Frequency

Border Color

Before After
X


1 #00006«

2 #000033 «FFFF33
Ami
3 #000066 #CC6699

4 #000099 #3333FF
5 #FFFFFF #000000

6 #FFFF33 #000000 i
Phaie2
7 #FFFF6« #000000

8 #FFFF99 #663399

Before After
X




Puc. 56.5. Чтобы сохранить цветной фон таблицы сплошным, пользуйтесь атрибутом
cellpadding, а значение атрибута cellspacing установите равным О
Строим Web-сайты
308


изменение границы
Вряд ли кто-нибудь использует границы в макетных таблицах, однако все пользуются
границами в таблицах данных. Табличный атрибут border управляет толщиной гра-
ницы, а атрибут bordercolor определяет ее цвет:
<table border="5" bordercolor="#000000">
На рисунке 56.6 показана таблица с приведенными выше свойствами. Внешняя грани-
ца таблицы отображается с толщиной 5 пикселов. Внутренние границы, или так назы-
ваемые линейки, сохраняют свое нормальное значение толщины, но заимствуют
цвет границы таблицы.


Определение
Линейки (rules) — это внутренние границы таблицы. Они сохраняют
свою нормальную толщину независимо от значения атрибута
border, но окрашиваются в цвет внешней границы таблицы.



Способ рисования браузером линеек в таблице можно изменить посредством задания
атрибута rules, как в следующем примере:
<table border="5" bordercolor="#000000" rules="cols">
При установке атрибута r u l e s равным c o l s браузером прорисовываются линейки
только вокруг столбцов, как, например, на рисунке 56.7. В таблице 56.2 приведены
возможные значения атрибута r u l e s .



Table 2. Color Transformations in Table Borders after Exposure to the Kenneth
Frequency

Border Color
Befoi


#000033 #FFFF33


#3333FF


#000000
#FFFF33
Phase 2
#000000
#FFFF99
Befoi




Puc. 56.6. Для этой таблицы задана черная (#000000)
граница размером в 5 пикселов
ГЛАВА 56. Разработка таблиц данных 309



Совет
Границы таблицы отображаются в Netscape с объемным эффектом
теней. В браузере Internet Explorer границы таблицы отображаются
сплошными.




Table 2. Color Transformations in Table Borders after Exposure to the Kenneth
Frequency

Border Color
Before After
X

1 #000000 #000066
2 #000033 #EFFF33
Phase 1
3 #000066 #CC6699
4 #000099 #3333FF
5 #FFFFFF #000000
6 #FFFF33 #000000
Phase 2
7 #FFFF66 #000000
S #FFFF99 #663399
Before - After
X




Puc. 56.7. Задайте атрибут rules в теге <table>,
чтобы определить, как будут воспроизводиться линейки браузером.
Здесь значение атрибута rules равно cols

Табл. 56.2. Значения атрибута r u l e s

Линейки рисуются вокруг
Значение

Всех ячеек таблицы
all

cols Только столбцов

rows Только строк

groups Только групп: col, colgroup, thead, t f oot и tbody

none Ничего; линейки отсутствуют

С помощью каскадных таблиц стилей можно изменить стиль границы:
<table border="5" bordercolor="#000000" rules="groups" style="bor-
der-style: dotted;">
На рисунке 56.8 показано, как выглядит в браузере стиль точечной (dotted) границы.
Другие стили границы см. в таблице 56.3.
310 Строим Web-сайты


Ё*е Edft yew Favorites Iods jjefp


Table 2 Color Transformations да Table Borders after Exposure to the Kenneth
Frequency

Border Color
Before After
#000000 #000066
#000033 #FFFF33
#000066 #CC6699
#000095 #3333EF
#FFFFFF #000000
#FFFF33 #000000
Phase:
#FFFF66 #000000
#FFFF99 #663399
Before After




Рис. 56.8. Для изменения стиля границы
используйте каскадные таблицы стилей

Табл. 56.3. Стандартные стили границ,
задаваемые с помощью каскадных таблиц стилей

Стиль Вид

solid Непрерывная, сплошная грани ца

dashed Штриховые линии

dotted Точечные линии

double Пара сплошных границ

none Отсутствие границ

В каскадных таблицах стилей определяется множество других стилей границ, но не
все браузеры поддерживают их.
Для границ разных сторон таблицы можно задать разные значения, как на рисун-
ке 56.9:
•stable border="5" bordercolor="#000000" rules="groups" s t y l e = " b o r -
d e r - t o p - s t y l e : dashed; border-bottom-style: d o t t e d ; b o r d e r - l e f t -
s t y l e : double; b o r d e r - r i g h t - s t y l e : none;">
В действительности с помощью каскадных таблиц стилей можно установить толщина
и цвет границы независимо для всех четырех сторон. В таблице 56.4 приводится спи-
сок стандартных CSS-атрибутов границы, которые можно взять на вооружение.
311
ГЛАВА 56. Разработка таблиц данных




Tible 2 Color Transformation; n Table Borders after Expo re to the Kenneth
Frequency

Bordr г Color
After
Brfor.
X

1 #000000 #000066
2 #000033 #FFFF33
Phaiel
3 #000066 #CC6699
#3333FF
4 #000099
5 #FFFFFF #000000
t #FFFF33 #000000
Phase 2
7 «FFFF66 #000000
8 #FFFE99 #663399
Before After




Puc. 56.9. С помощью каскадных таблиц стилей для верхней, правой,
нижней и левой границ можно задать разные стили

Табл. 56.4. Стандартные CSS-атрибуты границы
Атрибут Управляемый элемент Пример
border-color Цвет всех четырех сто- border-color: #FF0000;
рон границы
border-style Стиль всех четырех сто- border-style: dotted;
рон границы
border-width Вес или толщина всех че- border-width: Юрх;
тырех сторон границы
border-bottom-color Цвет нижней границы border-bottom-color: #00FF00;
border-bottom-style Стиль нижней границы border-bottom-style: none
border-bottom-width Вес или толщина ниж- border-bottom-width: 8px;
ней границы
border-left-color border-left-color: # 0 O F
OO F ;
Цвет левой границы
border-left-style: solid;
border-left-style Стиль левой границы
border-left-width border-left-width: 5px;
Вес или толщина левой
границы
border-right-color border-right-color: #FFFF00;
Цвет правой границы
border-right-style border-right-style: dashed;
Стиль правой границы
border-right-width border-right-width: 4px;
Вес или толщина пра-
вой границы
border-top-color: #FFFFFF;
border-top-color Цвет верхней границы
Стиль верхней границы border-top-style: double;
border-top-style
border-top-width border-top-width; 6px;
Вес или толщина верх-
ней границы
312 Строим Web-сайты

Каскадными таблицами стилей определяются также другие атрибуты, но не все брау-
зеры поддерживают их.



Повышение доступности
Чтобы сделать таблицы данных доступными для более широкого круга людей (вклю-
чая инвалидов), необходимо расставить множество правильных тегов. Для добавле-
ния некоторых заключительных штрихов в разметку таблицы потребуется еще нема-
ло дополнительных тегов.


Часто задаваемые вопросы
Пригодны ли эти советы по повышению доступности таблиц для
современных браузеров?
На самом деле нет. Сохраните эти советы в категории «Совмести-
мость снизу вверх». Самые последние версии основных браузеров не
используют эту дополнительную разметку, и текущие инструменты
доступности также не используют ее. Применяйте эти методы, чтобы
сделать таблицы пригодными для следующего поколения технологии
Web-просмотра.


Если текст в заголовках таблицы излишне многословен:
< t h > I n t e n s i t y of the Kenneth Frequency</th>
<th>Fluctuation in Beta Transmission</th>
<th>Margin of Error</th>
можно добавить свои собственные сокращения в атрибут abbr в теге <th>. Устрой-
ства чтения с экрана заменяют этими сокращениями полную фразу, что сокращает мо-
нотонное речевое воспроизведение таблицы данных.
<th a b b r = " I n t e n s i t y " > I n t e n s i t y of the Kenneth Freguency</th>
<th a b b r = " F l u c t u a t i o n " > F l u c t u a t i o n in Beta Transmission</th>
<th abbr="Error">Margin of Error</th>
Можно также точно указать, какие ячейки таблицы под какими ячейками заголовка
располагаются. Чтобы сделать это, задайте для каждого тега <th> в группе заголовка
таблицы уникальные идентификаторы (ID). Затем для каждой ячейки таблицы укажи-
те эти идентификаторы в атрибуте headers, подобно следующему примеру:
<table b o r d e r = " l " rules="groups">


<caption>Table 3: I n t e n s i t y of the Kenneth Frequency and
F l u c t u a t i o n in Beta Transmission</caption>


<col width="300" a l i g n = " c e n t e r " >
<col width="300" a l i g n = " c e n t e r " >
ГЛАВА 56. Разработка таблиц данных 313


<col width="160" align="center">


<thead>
<tr>
<th id="intensity" abbr="Intensity">Intensity of the
Kenneth Frequency</th>
<th id="fluctuation" abbr="Fluctuation"fluctuation in Beta
Transmission</th>
<th id="error" abbr="Error">Margin of Error</th>
</tr>
</thead>


<!— В этой таблице отсутствует раздел нижнего заголовка, что впол-
не нормально. Нет необходимости указывать все возможные группы в
каждой таблице. Достаточно включить те из них, которые вам необхо-
димы . — >


<tbody>
<tr>
<td headers="intensity">l</td>
<td headers="fluctuation">90</td>
<td headers="error">6%</td>
</tr>
<tr>
<td headers="intensity">2</td>
<td headers="fluctuation">128</td>
<td headers="error">35%</td>
</tr>
<tr>
<td headers="intensity">3</td>
<td headers="fluctuation">2726</td>
<td headers="error">32%</td>
</tr>
<tr>
<td headers="intensity">4</td>
<td headers="fluctuation">263443</td>
<td headers="error">32%</td>
Строим Web-сайты
314


. </tr>
<tr>
<td headers="intensity">5</td>
<td headers="fluctuation">2</td>
<td headers="error">98%</td>
</tr>
</tbody>

</table>



Совет
Идентификаторы (ID) всех тегов на странице должны быть уникальны-
ми. Не используйте тот же самый идентификатор для другого тега за-
головка или любого другого HTML-элемента на странице.


Таблица, код которой приведен выше, показана на рисунке 56.10.

Fto Edit Jflew Favoiites Iools


Table 3: Intensity of the Kenneth Frequency and Fluctuations m Beta Transmission -

Intensity of the Kenneth Frequency Fluctuations in Beta Transmission Margin of E n or
90 6%

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>