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 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 border-collapse property. Set the value "separate".
Note that the "separate" value is set by default when you define the border property.

Example

<!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

<!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

<!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

<!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>

Do you find this helpful?

Related articles