9.
some space between the text and
the edge of each cell
a thin line under each row of the
table
This table has a 300-pixel ?¬? xed
width. If you remove that setting,
the table will widen as you add
more text.
STYLIN??™ WITH CSS - CHAPTER 6 184
FIGURE 6.8 The open edges of the
outer cells of this ???tic-tac-toe???-style
table are achieved with attribute
selectors and pseudo-classes.
Achieving this effect required extensive use of pseudo-classes, which
IE6 doesn??™t understand, but the design degrades quite gracefully in
that browser.
FIGURE 6.9 IE6 doesn??™t understand
pseudo-classes, so it cannot render
all the details of this design as
speci?¬? ed in the pseudo-class rules.
However, the presentation is still
quite pleasing.
Let??™s start at the beginning to see how it was created.
table {
border-collapse:collapse;
}
table.tic_tac_toe td {
border-right: 1px solid #99CCCC;
border-bottom: 1px solid #99CCCC;
}
creates the grid of table cells
DESIGNING INTERFACE COMPONENTS 185
table.tic_tac_toe th {
border-right:3px solid #99CCCC;
border-bottom: 1px solid #99CCCC;
padding-right:.3em;
}
I started by styling the borders of the td and th cells. The table cells
share borders once I collapse them. Because I didn??™t want the top
and left borders on the outer edges, I simply styled the bottom and
right border of every cell, which resulted in Figure 6.
Pages:
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223