Languages
[Edit]
EN

HTML - how to remove space between table cells

3 points
Created by:
Dirask Community
4320

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

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

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