CSS: Cellspacing and Cellpadding

How to set the cellspacing and cellpadding of HTML tables with pure CSS.

958 views

By. Jacob

Edited: 2019-11-03 06:41

Cellspacing and Cellpadding can be easily controlled with pure CSS. There is no need to use old HTML attributes anymore.

To change the space between cells, we can use the CSS border-spacing property. To collapse the borders entirely, we can set border-collapse to collapse.

Tables should, however, rarely be used for layout purposes. Even when you got tabular data, you can often obtain a more flexible and portable result by using flex and grid techniques.

table {
  border-spacing: 0;
  border-collapse: collapse;
}
table, td {
  border: 1px solid black;
  padding: 0.5rem;
}

To test this CSS code, we should try to create a simple HTML table. The below table is not using HTML attributes, and is instead styled with CSS alone:

<table>
 <tr><td>Tim Berners-Lee</td> <td>tim@example.com</td></tr>
 <tr><td>Ian Hickson</td> <td>ian@example.com</td></tr>
</table>

If you are using a modern browser, the below table should be displayed without cell spacing and with collapsed borders: