CSS: Styling HTML Table

Table sans CSS

<table>
<tr><td>cat</td><td>dog</td></tr>
<tr><td>bird</td><td>fish</td></tr>
</table>

browser shows:

Table cells with borders

.cellborder6870 td {
 border: solid 1px gray;
}

<table class="cellborder6870">
<tr><td>cat</td><td>dog</td></tr>
<tr><td>bird</td><td>fish</td></tr>
</table>

Table cells with shared border

.sharedbd1800 {
 border-collapse: collapse;
}

.sharedbd1800 td {
 border: solid 1px gray;
}

• border-collapse: collapse means draw a single line between neighbor cells.
• border-collapse: separate

Cell Padding

.pad7473 td {
 border: solid 1px green;
 padding: 1ex;
}

• CSS: Margin vs Padding

Alternating colors for rows

.alt6996 tr:nth-child(2n) {
 background-color: silver;
}

• CSS: nth-child selector

HTML 4 Table attributes vs CSS Styling

Here is a comparison showing HTML 4 Table attributes and the CSS equivalent.

Note that these HTML 4 table attributes are obsolete in HTML 5.