How to remove gaps between HTML table rows and table cells.

The use of tables to display data remains as one of HTML’s most well known foundational techniques. It is still used widely in combination with all sorts of technologies and frameworks to provide a useful layout on a web page.

Sometimes we find that there are unwanted gaps between the rows and cells of a table. This proves to be frustrating as the changing margin, padding, and border properties are ineffective for removing these gaps.

So, how can you remove gaps between HTML rows and cells? There are three main ways to remove gaps between table and cells:

• Using the border-collapse  and border-spacing properties in CSS
• Adding CSS reset to your code
• Using the cellspacing table attribute (deprecated).

Let’s say we have a table that looks like the following:

We can remove the gaps using the following methods:

Using Border Collapse & Border Spacing

The border-collapse property determines whether cells inside a table of share or separate borders. While the border-spacing property sets the distance between the borders of adjacent tables.

In our CSS, we can set the border-spacing property to 0:

table {
  border-spacing:0; /* Removes the cell spacing via CSS */ 
  border-collapse: collapse;
}

Our markup will look like this

<table class="no-spacing"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>Tommy Vercetti</td>
    <td>Niko Bellic</td>
  </tr>
</table>

Our table gaps are gone!

Adding CSS Reset

In order to create consistent alignment of your borders, margins, and padding, we can utilize a CSS reset. This will solve the gaps in our HTML table rows and cells, however, this is an excessive approach if your CSS styles are already established.

So, if your CSS styles for your project are in their infancy than this approach will be effective. It will help you solve the table gaps as well as allowing you to customize the rules of your spacing from the ground up.

Simply add the CSS from this link to your base styles in your project.

Using Cell Spacing (deprecated)

This is an old method to control table cell layout. This might work in older browsers but is mostly deprecated. Add this in if you want to support IE6 downwards.

<table class="no-spacing"> <!-- cellspacing 0 to support IE6 and IE7 -->
<tr>
<td>Tommy Vercetti</td>
<td>Niko Bellic</td>
</tr>
</table>

Hopefully this removes any unwanted spacing from your cells and rows.