EN
HTML - how to remove space between table cells
3 points
In this article, we would like to show you how to remove space between table element cells in HTML.
Before:
After:
Quick solution:
xxxxxxxxxx1
<style>2
table {3
border-collapse: collapse;4
}5
</style>or
xxxxxxxxxx1
<table cellspacing="0">Below examples show two ways how to remove space between cells in HTML:
- Using
border-collapseCSS property - Using
cellspacingHTML attribute
In this solution, we create a style for our table to get rid of the space between cells (cell borders).
xxxxxxxxxx1
2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<style>6
table, th, td {7
border: 1px solid black;8
border-collapse: collapse; /* <--------------- REQUIRED */9
}10
</style>11
</head>12
<body style="height: 100px;">13
14
<table>15
<tr>16
<th>ID</th>17
<th>Username</th>18
<th>User age</th>19
</tr>20
<tr>21
<td>1</td>22
<td>Amy</td>23
<td>25</td>24
</tr>25
<tr>26
<td>2</td>27
<td>Tom</td>28
<td>27</td>29
</tr>30
</table>31
32
</body>33
</html>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.
xxxxxxxxxx1
2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<style>6
table, th, td {7
border: 1px solid black;8
}9
</style>10
</head>11
<body style="height: 100px;">12
13
<table cellspacing="0"> <!-- <---------- set cellspacing to 0 value here -->14
<tr>15
<th>ID</th>16
<th>Username</th>17
<th>User age</th>18
</tr>19
<tr>20
<td>1</td>21
<td>Amy</td>22
<td>25</td>23
</tr>24
<tr>25
<td>2</td>26
<td>Tom</td>27
<td>27</td>28
</tr>29
</table>30
31
</body>32
</html>