W3docs
en
Log in

How to Remove Cellspacing from Tables Using CSS

CSS suggests flexible and useful properties to solve any problems that may occur. Remove the space between cells of the table with the border-collapse property.

Tags

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 <span class="attribute">cellspacing</span> 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>, <span class="property"> XFI5 </span> and <span class="property"> XFI6 </span> tags.

How to create a table using HTML <table>, <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 <span class="property">border</span> for the <td> and <th> tags.

How to add CSS padding and border properties to header cells (created with the <th> element) and standard cells (created with the <td> element) for an element ?

td,
th {
  padding: 1em;
  border: 1px solid #666666;
}

Here is the full example.

Example of creating a table with cellspacing:

An example of a table where CSS padding and border properties are used

<!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>
Try it Yourself »

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 <span class="property">border-collapse</span> 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:

Example of removing cellspacing with the border-collapse property:

<!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>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <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> </div>

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:

Example of removing cellspacing with the border-collapse property:

<!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>
Try it Yourself »