Set cellpadding and cellspacing in CSS

Question

In an HTML table, the cellpadding and cellspacing can be set like this:

<table cellspacing="1" cellpadding="1">
How can the same be accomplished using CSS?

Answer 1

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".