Languages
[Edit]
EN

HTML - how to remove space between table cells

3 points
Created by:
DrJoystick
315

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

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