Languages
[Edit]
EN

HTML - how to remove space between table cells

3 points
Created by:
DrJoystick
465

In this article, we would like to show you how to remove space between table element cells in HTML.

Before:

Table before removing spaces between cells.

After:

Table with removed spaces between cells with CSS.
Table with removed spaces between cells with CSS.

 

Quick solution:

<style>
    table {
        border-collapse: collapse;
    }
</style>

or 

<table cellspacing="0">

Below examples show two ways how to remove space between cells in HTML:

  1. Using border-collapse CSS property
  2. Using cellspacing HTML attribute

1.border-collapse CSS property example

In this solution, we create a style for our table to get rid of the space between cells (cell borders).

// ONLINE-RUNNER:browser;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;  /*   <--------------- REQUIRED          */
        }
    </style>
</head>
<body style="height: 100px;">
  
    <table>
        <tr>
            <th>ID</th>
            <th>Username</th>
            <th>User age</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Amy</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Tom</td>
            <td>27</td>
        </tr>
    </table>

</body>
</html>

2. cellspacing HTML attribute example

In this solution, we set cellspacing="0" in our <table> tag to get rid of the space between cells in our table.

Note: this approach is very old, so it is better to use CSS solution that lets to switch between different styles without page template modifications (without HTML code modification) - with CSS we can change spaces with different web page themes.

// ONLINE-RUNNER:browser;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body style="height: 100px;">
  
    <table cellspacing="0">   <!--    <---------- set cellspacing to 0 value here      -->
        <tr>
            <th>ID</th>
            <th>Username</th>
            <th>User age</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Amy</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Tom</td>
            <td>27</td>
        </tr>
    </table>

</body>
</html>

References

Alternative titles

  1. HTML - how to remove spaces in table
  2. HTML - how to remove spaces between td in table
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

HTML

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join