w3docs logo
  1. Snippets
  2. CSS
  3. How to Remove Cellspacing from Tables Using CSS

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.

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