How to Use Cell Padding in Table in CSS

1. Use the padding and border-spacing Properties for Cell Padding and Cell Spacing in CSS
2. Use the border-spacing Property to Specify the Vertical and Horizontal Spacing in CSS

This article introduces the concept of cell padding and cell spacing with the ways to accomplish in CSS.

Use the padding and border-spacing Properties for Cell Padding and Cell Spacing in CSS

The purpose of cell padding is to provide the spaces from the cell’s border to the content in the cell. We can use the padding property in CSS to specify the padding of a cell. The padding property is a short-hand to represent the top, right, bottom, and left padding. We can select the cells of a table with CSS selectors and use the padding property on them.

Likewise, the purpose of cell spacing is to provide the spaces between the adjacent cells. We can use the border-spacing CSS property to specify the spacing between the border of the neighboring cells. However, this property only works when the border-collapse property is set to separate. This means that we cannot use the border-spacing property when we set border-collapse to collapse. The value separate is the default value of the border-collapse property.

The normal HTML table with no cell padding and cell spacing is equivalent to the following applied CSS. The border-collapse:collapse implies that the borders of the adjacent cells are merged into one. The padding:0px resembles no padding in the cells. It resembles the default behaviour of a table.

table {
    border-collapse:collapse;
}

td {
    padding:0px;
} 

For example, create an HTML table with the headings Name, Address and Age. Fill the table with some values. The <td> </td> tag represent the table data. In CSS, select the <table> tag and set border-spacing to 5px. Next, select the <td> tag and set padding to 5px.

Thus, we created a cell padding of 5px from all four sides of the text. We also created a space of 5px between the borders of each cell in the table. We learned how to accomplish cell padding and cell-spacing in CSS.

Example Code:

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>

table {
    border-spacing: 5px;
}
td {
    padding: 5px;
}

Use the border-spacing Property to Specify the Vertical and Horizontal Spacing in CSS

We can use the border-spacing property to specify the horizontal and vertical spacing between the borders of the cells in the table. In the previous example, we applied horizontal spacing. Here, we will apply both spacings. We can specify two values for the border-spacing property. The first resembles the horizontal spacing, and the second resembles the vertical spacing. We can apply this method in the table created above.

For example, select the table tag and set border-spacing to 8px and 5px. It will create the horizontal spacing of 8px and the vertical spacing of 5px.

Example Code:

table {
    border-spacing:8px 5px;
}
td {
    padding: 5px;
}

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>