How to Remove Cellspacing from Tables using CSS?
Last Updated :
11 Oct, 2024
Removing cellspacing from tables using CSS means eliminating the default space or gaps between table cells. This can be achieved with properties like border-collapse: collapse or border-spacing: 0, resulting in a more compact and seamless table layout.
Here we have some common apporaches:
Using border-collapse: collapse
The border-collapse: collapse approach in CSS removes the default spacing between table cells by merging adjacent cell borders into a single line. This eliminates gaps and creates a seamless appearance, making the table look more compact and unified.
Syntax
border-collapse: collapse;
Example: In this example we are demonstrates removing cellspacing from tables using the CSS border-collapse property. It compares a separate table with space between borders to a collapsed table with no spacing.
html
<!DOCTYPE html>
<html>
<head>
<title>
Remove cellspacing from tables using CSS
</title>
<!-- border-collapse CSS property -->
<style>
table,
td,
th {
border: 2px solid black;
}
#collapseTable {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>
Before using the border Collapsing Property
</h2>
<table id="separateTable">
<tr>
<th>Author Name</th>
<th>Contact No</th>
</tr>
<tr>
<td>Geek</td>
<td>XXXXXXXXXX</td>
</tr>
<tr>
<td>GFG</td>
<td>XXXXXXXXXX</td>
</tr>
</table>
<h2>
After using the border collapsing Property
</h2>
<table id="collapseTable">
<tr>
<th>Author Name</th>
<th>Contact No</th>
</tr>
<tr>
<td>Geek</td>
<td>XXXXXXXXXX</td>
</tr>
<tr>
<td>GFG</td>
<td>XXXXXXXXXX</td>
</tr>
</table>
</body>
</html>
Output
Using border-spacing
The border-spacing approach in CSS explicitly sets the space between table cells to zero, effectively removing any gaps. This method ensures no extra space appears between cells, creating a more compact table layout.
Syntax
border-spacing : 0
Example: In this example we demonstrates removing cellspacing using the CSS border-spacing: 0; property. It creates a table without spacing between cells while maintaining borders and padding for cell content.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Remove Cellspacing Using border-spacing</title>
<style>
table {
/* Removes the spacing between cells */
border-spacing: 0;
border: 1px solid black;
}
td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h2>Table without Cellspacing</h2>
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
