How to Remove Cellspacing from Tables Using CSS

CSS has many useful properties that can solve big problems in a few seconds.

In this snippet, we're going to show how to remove cellspacing from the table with the help of CSS. Using CSS to put a border on your <th> and <td> tags a space between them will appear.

In the past, you would remove the space between cells using the cellspacing attribute, which is now deprecated. Today, CSS suggests the border-collapse property, which specifies whether table borders are collapsed or not.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Create a <table> element, which will contain <tr>, <th> and <td> tags.
<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

Add CSS

  • Set the padding and border for the <td> and <th> tags.
td,
th {
  padding: 1em;
  border: 1px solid #666666;
}

Here is the full example.

Example of creating a table with cellspacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      td, th {
        padding: 1em;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
      </tr>
      <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
      </tr>
    </table>
  </body>
</html>

In the example above, we have a table, and we can see that there is a space between our cells. To remove this space, we should use the "collapse" keyword of the border-collapse property. Let's see the following example, where the spaces between cells are removed.

Example of removing cellspacing from a table having <th> and <td> elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      td, th {
        padding: 1em;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
      </tr>
      <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
      </tr>
    </table>
  </body>
</html>

Result

1 2 3 4
text text text text

Below, you can see another example where the table is created by <thead> and <tbody> tags. The <thead> tag defines the header of an HTML table. The tag is used along with <tbody> tag, which specifies the body.

Example of removing cellspacing from a table having <th>, <td>, <thead> and <tbody> elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table { 
        border-collapse: collapse;
      }
      table, th, td {
        border: 2px solid #000000;
      }
      table th, table td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Country</th>
          <th>Capital</th>
          <th>Major City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>France</td>
          <td>Paris</td>
          <td>Lyon</td>
        </tr>
        <tr>
          <td>Italy</td>
          <td>Rome</td>
          <td>Milan</td>
        </tr>
        <tr>
          <td>Spain</td>
          <td>Madrid</td>
          <td>Valencia</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>