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
Do you find this helpful?

Related articles