Remove Borders From HTML Table

John on March 31, 2022

In this tutorial, we will learn two different ways to remove borders from an HTML table using CSS.

Remove Table Border Spacing with the border-collapse CSS Property

The default behaviour of HTML tables in most browsers is to use the separate value from the border-collapse CSS property. This causes each element to have a gap. To remove this, set the value of border-collapse to collapse on the table element like this:

<table>
  <tr>
    <td>First</td>
    <td>Second</td>
    <td>Third</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}

Remove Table Borders Using the CSS border Property

Another way to remove borders from an HTML table is to set the border property to none. It will need to be applied to the table, tr and td elements like this:

table, tr, td{
  border:none;
}