CSS – How to Completely Remove Borders From HTML Table

The table is a major component of the HTML page used to store and organize the data. Developers can design the HTML table using CSS properties, such as background color, border, margin, padding, etc. The CSS “border” property is utilized to set borders around tables and cells. But, in some scenarios, users do not require a border for styling.

This post will explain how to remove borders from HTML using CSS completely.

How to Completely Remove Borders From HTML Table?

If users want to remove borders completely from an HTML table, look at the instructions.

Step 1: Create Table With Border

To create a table in HTML, follow the instructions:

First, add a table element “<table>” along with the “border” attribute.
Then, the “<tr>” tag is added to create the desired number of rows.
The heading cells are specified using “<th>” tags.
After that, “<td>” tags are included in other “<tr>” tags for adding data cells:

<table border="1px">

<tr> <th> Name</th> <th>ID</th> <th> Category</th></tr>

<tr> <td>Jenny</td> <td>001</td> <td> A</td></tr>

<tr> <td>Hafsi</td> <td>002</td> <td> B</td></tr>

<tr> <td>Mari</td> <td>003</td> <td> C</td></tr>

</table>

For styling the HTML table, we will use following CSS properties:

Inside the “<style>” tag, access the <table> element using its tag. Then, apply the following properties:

“margin” property with the value “auto” is used to set equal space around the element.
“padding” property with the value “10px” sets the space of 10px around the element’s content.
“border” property applies the border around the table.

Output

Step 2: Remove Border in CSS

To remove the border from the table, users are required to set the “border” property as “none”:

table{

padding: 10px;

margin: auto;

border: none;

}

It can be observed that the outer border from the table has been removed successfully:

Step 3: Completely Remove Table border

Furthermore, if you want to remove the entire border from the table as well as from cells, set “border” property as “none” on all elements, including “table”, “tr”, “th”, and “td”:

table, tr, td, th{

padding: 10px;

margin: auto;

border: none;

}

The below output indicates that we have completely removed the border from the HTML table:

We have demonstrated the method to remove borders from HTML tables completely.

Conclusion

To completely remove the border from the HTML table, first create a table. After that, apply CSS properties “border”, “padding”, and “margin” on the table. Then, set the border property as “none” on all table elements, such as “table”, “tr”, “td”, and “th”. This tutorial has demonstrated the method for completely removing the border from the HTML table.