How to Set Cellpadding and Cellspacing in CSS

The <table> tag has cellpadding and cellspacing attributes which are not supported in HTML5, that’s why it is recommended to use the CSS padding and border-spacing properties instead.

Creating and styling a table with CSS properties

So, the CSS alternative for cellpadding will be:

td,
th {
  padding: 10px;
}

The CSS alternative for cellspacing will be:

table {
  border-spacing: 10px;
}

Let’s see how to use them step by step:

  1. First thing you need to do is creating a <table> element which will contain <th>, <tr> and <td> tags.
  2. Style the table with the border-collapse property. Set the value to "separate".

Note that the "separate" value is set by default when you define the border property.

Example of creating a table:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
        border-collapse: separate;
      }
    </style>
  </head>
  <body>
    <h2>Example for border-collapse separate</h2>
    <table>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>
  1. Add the padding property to the <th> and <td> elements for defining the cellpadding.

Example of adding cellpadding with the padding property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
        border-collapse: separate;
      }
      td,
      th {
        padding: 5px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Example for border-collapse separate</h2>
    <table>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>
  1. For setting the cellspacing, define the border-spacing property for the <table> element.

Example of setting cellspacing with the border-spacing property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-spacing: 10px;
      }
      table,
      td,
      th {
        border: 1px solid black;
        border-collapse: separate;
      }
      td,
      th {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Cellspacing Example</h2>
    <table>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>
  1. Style the <table>, <th>, <tr>, and <td> elements and give color, background-color and text-align properties where needed.

Example of styling the table:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: separate;
        border-spacing: 10px;
        background-color: #1c87c9;
      }
      table,
      th,
      td {
        border: 2px solid #aaa;
        text-align: center;
      }
      th {
        color: #fff;
        background-color: #095484;
        padding: 10px;
      }
      td {
        background-color: #eee;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Cellpadding and Cellspacing Example</h2>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Result

Cellpadding and Cellspacing Example

Heading Heading Heading Heading
Some text Some text Some text Some text
Some text Some text Some text Some text

How to adjust spacing separately for the top, right, left, and bottom of each cell?

You can use the CSS padding property to adjust the spacing of each cell in an HTML table separately. The padding property takes up to four values, which correspond to the top, right, bottom, and left sides of the element, respectively.

Here's an example of how to adjust the spacing of each cell separately in an HTML table:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>

  <body>
    <table>
      <tr>
        <!-- Set padding of 10px (top), 20px (right), 30px (bottom), and 40px (left) for the first cell in the first row -->
        <td style="padding: 10px 20px 30px 40px; background-color: cyan;">Cell 1</td>
        <!-- Set padding of 20px (top and bottom), and 30px (right and left) for the second cell in the first row -->
        <td style="padding: 20px 30px; background-color: cyan;">Cell 2</td>
      </tr>
      <tr>
        <!-- Set padding of 0px (top and right), and 10px (bottom) for the first cell in the second row -->
        <td style="padding: 0 0 10px; background-color: cyan;">Cell 3</td>
        <!-- Set padding of 0px (top and bottom), and 20px (right and left) for the second cell in the second row -->
        <td style="padding: 0 20px; background-color: cyan;">Cell 4</td>
      </tr>
    </table>
  </body>
</html>

In this example, the first cell in the first row has a padding of 10 pixels for the top, 20 pixels for the right, 30 pixels for the bottom, and 40 pixels for the left. The second cell in the first row has a padding of 20 pixels for the top and bottom, and 30 pixels for the right and left. The first cell in the second row has a padding of 0 pixels for the top and right, and 10 pixels for the bottom. The second cell in the second row has a padding of 0 pixels for the top and bottom, and 20 pixels for the right and left.

You can adjust the values of the padding property to achieve the desired spacing for each cell in the table. Additionally, you can use CSS classes to apply the same padding values to multiple cells in the table.