CSS: Cellspacing and Cellpadding

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


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:

 <tr><td>Tim Berners-Lee</td> <td>[email protected]</td></tr>
 <tr><td>Ian Hickson</td> <td>[email protected]</td></tr>

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

Tim Berners-Lee [email protected]
Ian Hickson [email protected]

Tell us what you think:

  1. There are several different techniques that can be used to center an element in its container, both vertically and horizontally; this tutorial will take you through some of the easiest techniques to use.
  2. How to make italic text by changing the font-style of parts, or all, of the text on a HTML page.
  3. How to change numbers and bullets on HTML lists like ol and ul.
  4. How to add hover effects on links using CSS pseudo classes.
  5. Here you can learn how to change the background of every second HTML element in a parent with CSS.

More in: CSS Styling