Note the caption by default
displays outside the table, even
though it is within its tags.
A sans-serif font family and a crisp blue line under the caption
(which appears above the table even though it follows the table tag
in the markup) make a good start. Now let??™s add some lines to the
headings and data (see Figure 6.5).
sets the width on the layout
a top border for the table
STYLIN??™ WITH CSS - CHAPTER 6 180
body {
font: .8em verdana, sans-serif;
}
table.basic_lines {
width:300px;
border-top:3px solid #069;
}
table.basic_lines th {
border-bottom:2px solid #069;
}
table.basic_lines td {
border-bottom:1px solid #069;
}
FIGURE 6.5 A mix of thick and thin
lines helps further differentiate the
data from the headings. But what??™s
with those little gaps in the lines?
Quite nice. Now a little cleanup is all that??™s needed. Let??™s create
some space around the text and close up those gaps in the lines
(see Figure 6.6).
body {
font: .8em verdana, sans-serif;
}
table.basic_lines {
width:300px;
DESIGNING INTERFACE COMPONENTS 181
border-collapse:collapse;
border-top:3px solid #069;
}
table.basic_lines caption {
margin-bottom:6px;
}
table.basic_lines th {
border-bottom:2px solid #069;
}
table.basic_lines td {
border-bottom:1px solid #069;
}
table.basic_lines td, table.basic_lines th {
padding:5px 3px;
}
FIGURE 6.
Pages:
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219