2em;
}
You will notice that I have also added a few styles at the end to align
the headings??™ column text to the right, and to provide some space
around the text, as you can see in Figure 6.12. Note I hide from IE
the text-align:right on the left column by using an attribute selector,
which IE doesn??™t understand. If I did it any other way then all
headings would be right-aligned, which would look wrong along the
top row of headings; they really have to be centered. IE6 users simply
see the left column of headings centered also, as shown in the
previous screenshot??”graceful enough, I think.
removes bottom border from last
cell of labels column
borders for top row of cells, but
IDWIMIE6??”previous th rule
applies to IE6
thick right border on ?¬? rst cell of
headings row
no border on right edge of last cell
of headings row
text aligned right in left column of
labels
pads all cells
styles table caption
DESIGNING INTERFACE COMPONENTS 189
FIGURE 6.12 The ?¬? nished ???tic-tactoe???
table.
This section of the chapter was intended to give you a sense of
what??™s possible with styling tables to make them a visually appealing
area of your page and to draw focus to the information in your data;
they don??™t have to be a boring bunch of boxes that your viewer??™s
eye skips over as fast as possible. I??™ll ?¬? nish by saying there are other
XHTML elements associated with tables that I haven??™t covered here.
Pages:
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227