6 The ?¬? nished styling
gives a clean, minimalist look to the
table that aids understanding instead
of distracting from the data.
Note the use of the border-collapse property on the table tag.
Border collapsing reduces that double border we saw in the default
style to a single border line between the two cells. We aren??™t showing
the vertical lines on this table, but if we were, there would be one on
the edge of each cell with a space between them, as we saw in the
default style example earlier. Because we weren??™t displaying those
vertical lines, we were just seeing the space, and by collapsing the
borders, that space is closed up. I also added a little padding inside
removes the space between the
cells
space between the table and the
caption
some space around the text in
each cell
STYLIN??™ WITH CSS - CHAPTER 6 182
the cells to give the text some breathing space, and put a few pixels
of space between the caption and the table. We end up with a simple,
clean look, especially when compared with the 10-box default
version with which we started.
Now that you understand the basics of table markup, let??™s take a
look at the complete markup for a variation on the same markup,
shown in Figure 6.7, which I call Bars-n-Stripes.
FIGURE 6.7 A different styling of the
same markup, but this time with colored
backgrounds.
Pages:
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220