Styling a table by Css : 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.