Problem
I want to have a one-pixel one-color solid border around a table and its cells. Adding border="1" to the table tag isn’t suitable, because it looks horrific in most of the browsers.

Solution
To make the CSS code easier to maintain, we can first set the border color for both table and td and then set the differing part separately. If you later want to change the border color, you only need to change it in one place.

Here is our final code:

<style type="text/css">
/* <![CDATA[ */

table, td
{
    border-color: #600;
    border-style: solid;
}

table
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
}

td
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
    background-color: #FFC;
}

/* ]]> */
</style>

<table>
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
</tr>
<tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
</tr>
</table>