How to Remove Borders From HTML Table

1. Use the border-collapse CSS Property to Remove Border From Cells in Table in HTML
2. Set the CSS border Property to none to Remove Border From a Table in HTML

This article will introduce methods to remove borders from the HTML table. We will learn to remove the borders of the cells while inserting images in the table cells.

Use the border-collapse CSS Property to Remove Border From Cells in Table in HTML

We can use the HTML table to insert images. We can assign classes to the elements in the table and define the attributes of the classes in CSS. This method helps us set the height and width of the td element and insert the image using the background-image property. So, in each of the td elements, we can insert the image. While inserting the images this way, we can see the border of each cell in the table. We might want to remove the borders in the cells and the table to make our images look better. For this, we can use the CSS border-collapse property. We can set the property’s value to collapse so that the border of the cells will merge. This enables the cell spacing to 0. The border will not appear if we do not use the border attribute in the table tag.

For example, in HTML, write the <table> tag and then the <tr> tag inside it. Inside the <tr> tag, write three <td> tags and write the classes left, midddle and right in the first, second and third classes. In CSS, select the table tag and set the border-collapse property to collapse. Then select all the three classes left, middle and right at once and set height, width, and a background image.

We have created three td elements and inserted images in those elements in the example below. Using the border-collapse property, we removed the borders from the cells. We can remove the border-collapse property to see how the border of the cells makes the image look like.

Example Code:

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>

table{
 border-collapse:collapse;
}
.left, .middle, .right
{
 width: 200px;
 height: 280px;
 background-image: url('https://loremflickr.com/212/280'); 
}

Set the CSS border Property to none to Remove Border From a Table in HTML

We can set the border property to none to remove the border from an HTML table. The property is short-hand of different border properties. Those different properties are border-width, border-style and border-color. A border won’t be formed when we use the border property and set it to none.

For example, we can use the table created above. We can modify the above CSS a little bit to achieve our goal using the border property. We can select the table, tr and td tags from the table and set the border property to none. In this way, we can remove the border from a table and the borders from the cells of the table in HTML.

Example Code:

table, tr, td{
 border:none;
}

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>