Answer by MattAllegro for Set cellpadding and cellspacing in CSS?

Say that we want to assign a 10px "cellpadding" and a 15px "cellspacing" to our table, in a HTML5-compliant way. I will show here two methods giving really similar outputs.

Two different sets of CSS properties apply to the same HTML markup for the table, but with opposite concepts:

• the first one uses the default value for border-collapse (separate) and uses border-spacing to provide the cellspacing,

• the second one switches border-collapse to collapse and uses the border property as the cellspacing.

In both cases, the cellpadding is achieved by assigning padding:10px to the tds and, in both cases, the background-color assigned to them is only for the sake of a clearer demo.

First method:

table{border-spacing:15px}td{background-color:#00eb55;padding:10px;border:0}

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

Second method:

table{border-collapse:collapse}td{background-color:#00eb55;padding:10px;border:15px solid #fff}

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