Adding borders to tables
As mentioned earlier, it??™s a good policy to avoid using the default HTML table border. It
looks ugly and old-fashioned, and it??™s a far cry from a clean, flat, 1-pixel border. You might
think it??™s a straightforward process to add CSS borders to a table??”logically, it makes sense
to simply add a border property/value pair to a grouped selector that takes care of both
the table headers and table data cells.
th, td {
border: 1px solid #c9c9c9;
}
But this doesn??™t work. As the screenshot to the right shows, this method
results in the correct single-pixel border around the edge of the table,
but creates double-thick borders everywhere else. This is because the
borders don??™t collapse by default, meaning that the right-hand border of
one cell sits next to the left-hand border of an adjacent cell, and so on.
Designers have historically gotten around this by using a rule to define a style for the top
and left borders of the table, and another to define a style for the right and bottom
borders of table cells. However, there??™s a perfectly good property that
deals with the double-border syndrome: border-collapse. When this
property, with a value of collapse, is applied to the table element via an
element selector, borders collapse to a single border wherever possible.
The other available border-collapse property value, which reverts
borders back to their ???standard??? state, is separate.
table {
border-collapse: collapse;
}
With this brief explanation of table borders completed, we??™ll now move into exercise
mode and style the table.
Pages:
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344