table.bars_n_stripes {
width:300px;
border-collapse:collapse;
}
table.bars_n_stripes td {
background-color:#FFFFCC;
}
table.bars_n_stripes th {
background-color:#CCFFCC;
}
table.bars_n_stripes th[scope="col"] {
background-color:#99CCCC;
}
table data area
labels column
headings row
colors top row of cells??”IDWIMIE
(previous rule applies to IE6)
DESIGNING INTERFACE COMPONENTS 183
table.bars_n_stripes td, table.bars_n_stripes th {
padding:3px 3px;
border-bottom:1px solid #069;
}
After the previous example, this one is quite easy to understand,
with one notable comment. You??™ll notice the use of a pseudo-class
attribute selector??”the rule only applies if the element has the attribute
scope="col". This enables me to target rules at the top row
of cells and get that deep green-blue color on just the top row. Of
course, poor old IE6 doesn??™t understand pseudo-classes so the result
in IE6 is that the top row is the same green as the Languages and
Focus cells, but it??™s still an acceptable result. This is what??™s known as
???graceful degradation,??? or ???progressive enhancement??? to the perennially
positive amongst us; either way, what it means is that some
people, depending on their viewing setup, get a better experience
than others, but as I like to say, as long as everyone gets an acceptable
experience, that??™s OK.
Pages:
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221