Styling the <th> and <td> Elements

Styling the <th> and <td> Elements

Now the <th> and <td> elements need to be styled with a right and bottom border. Because the border will appear on all <td> and <th> elements, you can group both elements into one selector.

Applying a border is more powerful than using cellspacing because you can change the color or width of these borders at any time to suit your needs.

To apply padding to all cells, use padding: .5em as shown in Listing 14.11.

Listing 14.11. CSS Code for Styling the <th> and <td> Elements

caption
{
    text-align: left;
    margin: 0 0 .5em 0;
    font-weight: bold;
}

table
{
    border-collapse: collapse;
}

th, td
{
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: .5em;
}