How to Set Cellpadding and Cellspacing in CSS

Web developers heavily rely on HTML tables to display content in a lucid manner and organize their page layout. Often then need to add some padding within table cells so that their content doesn’t look crammed. They also need to add some spacing between table cells to make the table content look neat and tidy. Typically, they use the cellspacing and cellpadding HTML attributes that are available for each table. But they are not supported by HTML5 web browsers. In this article, we will learn how to set cellpadding and cellspacing using CSS and nothing else. This way you do not need to worry about modifying your web page’s HTML code, or using any kind of JavaScript library.

What is Cellpadding

Cell padding is the amount of space present inside a table cell surrounding its content. It is the space between table cell content and its edges. It is used to make the table content easy on the eyes and improve readability. By default, it is set to 0. Here is an example of how it can be assigned as HTML attribute for table. Here we set it to 5px, that is 5px space in each table cell, in each of the 4 directions, between cell content and its borders.

<table cellspacing="5px">

What is Cellspacing

Cell spacing is the amount of space between the cells of a table. It is used to organize the table content in a more aesthetic way. By default, it is set to 2px. Here is an example to set it to 5 pixels for each cell in a table.

<table cellpadding="5px">

Please note, both cellpadding as well as cellspacing attributes are supported for table HTML tag only. They are applied to all cells in a table.

How to Set Cellpadding and Cellspacing in CSS

The above mentioned HTML attributes are not supported by HTML5 web browsers. So you need to use CSS styling instead. Let us say you have the following HTML table.

<table id='my_table'>
      <tr>
        <th id='my_heading'>Heading 1</th>
        <th>Heading 2</th>
      </tr>
      <tr>
        <td id='my_cell'>Text 1</td>
        <td>Text 2</td>
      </tr>
      <tr>
        <td>Text 3</td>
        <td>Text 4</td>
      </tr>
</table>

1. Cellpadding with CSS

For applying cellpadding of 5px to your table cells, you can use the padding property supported by th and td attributes.

th, td {
  padding:5px;
 }

The above style will be applied to all table header and data cells. If you want to apply it to only one heading or one data cell, you can select them using their ID or another attribute and set padding property of only that cell.

#my_heading {
  padding:5px;
 }

#my_cell{
  padding:5px;
}

You can also use other ways to precisely apply cellpadding to only required cells. This is useful if most of the content in your table fit well and do not need that extra padding.

2. Cellspacing with CSS

In case of cell spacing, you can use border-spacing CSS property for your table, along with border-collapse property. Here is an example to set border-spacing property to 5px.

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

The above code will set both horizontal as well as vertical spacing to 5px. If you want to set horizontal spacing to 7px and vertical spacing to 5px then you can specify border-spacing as shown below.

table { 
    border-spacing: 7px 5px;
    border-collapse: separate;
}

In fact, in most web browsers, if you have already set the border-spacing CSS property, then you do not need to set border-collapse property.

3. Old Fashioned Solution

The old fashioned way of setting cellspacing and cellpadding is to assign these HTML attributes directly to the table.

<table cellspacing='3px' cellpadding='5px'>
...
</table>

These attributes are applicable to all cells of the table and cannot be easily customized, unless you individually assign them to each required cell separately. This is very tedious.

Conclusion

In this article, we have learnt how to set cellpadding and cellspacing using plain CSS. The advantage of this method is that since you are not using HTML attributes, you can easily modify the table’s styling by modifying its CSS. It is recommended that you use the above mentioned modern CSS properties to set cell padding and spacing, even if you already use HTML attributes for the same. This is because HTML cellpadding and cellspacing HTML attributes are not supported by HTML5 web browsers.

FAQ

1. Do these solutions work on all web browsers?

Yes. These are cross-browser solutions supported by all HTML5 web browsers such as Chrome, Edge, Firefox and Opera.

2. Can you set cellpadding and cellspacing for just one cell?

Yes. In the CSS selector, specify the cell you want to apply formatting for. You can do this by selecting the specific cell using its ID or any other attribute with unique value. Once you identify the right CSS selector to pick the target cell, add border-spacing and padding CSS attributes for that cell.

Also read:

How to Horizontally Center Div in CSS
How to Change HTML Input’s Placeholder in CSS
How to Detect Click Outside Element in JavaScript