Remove HTML Table Border and Spacing 🤓

When adding an HTML table, it’s common for many default styles to be automatically added, which may not be desired for your website.

Indeed, to achieve the desired appearance, we must remove or overwrite the borders in specific parts of the table, such as the outer table, inner table, column borders, and other designated areas.

First, let’s explore how you can remove the table border in HTML by simply adding a single attribute to your HTML element.

To remove the table border in HTML, you can add the “border” attribute to your HTML “

” element and set it to “0”. This will eliminate the border around the entire table. Here’s an example:

<!DOCTYPE html>
<html>
<head>
<title>Table Border Removal Example</title>
</head>
<body>

</body>
</html>

All the problems can be easily solved by just adding some HTML attributes and CSS properties,

I explained all the methods with the code, so if the user does not have knowledge about the HTML or CSS they can also remove the borders of the HTML Table

How to Remove Table Border in HTML?

There are two simple ways that can help to completely remove all the borders from the HTML table, I have mentioned both methods below.

Use the Border attribute to Remove the Table border

By default, the HTML table does not have a border and it is a very common thing in the HTML table, But in case you see a border in your HTML table which can happen because of the CSS you use in your HTML,

To remove the border you can use an HTML attribute called “Border” using this attribute you can set the border to the table to zero and the border will be removed from your Table Border in HTML.

Just add border=”0″ attribute inside the table tag and the border will be removed from your HTML table.

This is one of the simplest ways to remove all the Table rows, table headers, and table data borders with just one attribute.

Use CSS to Remove the Table Border

Let’s say on a web page there are so many HTML tables and they all have the same CSS but now if you want to remove the border from any one of the tables, then, what are we going to do?

Well, I have added a specific CSS to the tables from which we want to remove the borders,

In my case, I have added a class called remove-table to the table in which I want to remove the table.

Now in the CSS file select the table and add a CSS property called border and the value to 0 something like this, border:0;

After adding thing CSS property we also need to add an HTML attribute to the table otherwise there will be a thin line around the table.

The attribute we need to add is “cellspacing=”0″” And “cellpadding=”0″”, once you added this attribute along with the CSS property all the table borders will be removed completely

HTML:

CSS:
remove-table{
border:0;
}

How to Remove Double Border in HTML Table?

How to Remove Double Border in HTML Table

In HTML tables by default, the border contains padding in it, and that padding makes the borders, double border,

The good thing is that you can easily fix this problem, to remove the double border we just need to remove the padding between the border.

And to remove the padding you need to add an HTML attribute to the table tag called “border-collapse=”collapse””, this attribute removes all the extra space or the padding from the table borders completely.

Another method to remove a double border is by using CSS properties, go to your CSS file and select the table where you want to remove double border.

Now add a CSS property called border-collapse: collapse; to it,

After adding the border-collapse property we need to add a second property to the table row and that is border-bottom: 1px solid #000000;

Just select the Table-row in your CSS file and add border-bottom: 1px solid #dddddd; property to it.

You can adjust the size of the border and the color according to you.

You can also add HTML attributes like “cellspacing=”0″” And “cellpadding=”0″” to get rid of the default spacing and padding between the table border.

How to Remove Column Border in HTML Table?

How to Remove Column Border in HTML Table

There are so many situations where we do not need a border on our HTML table column,

Removing borders from the table column can be a tricky part and at the same time it is also so simple to remove borders from the HTML column once you know the right CSS properties and in which HTML tag to apply this property,

To remove border columns in the HTML table just go to your CSS file and select the Table or the CSS class given by you,

Now add “border-left” and “border-right” properties to your table, and set the property value to “none”

This way the table left and right borders will be removed from the table meaning the table column will be completely removed

table{
border:1px solid #000000;
border-collapse: collapse;

/* To Remove Column Border */
border-right:none;

border-left:none;
}

How to Remove the Inner Border of a Table in HTML?

How to Remove the Inner Border of Table in HTML

If you do not want to show Table row, Table head, and Table data borders in your table and just want to make our table border visible then with the help of CSS you can do that.

To Remove the Inner Border of the Table in HTML open your CSS file and select the Table tag or the CSS class in which you want to remove the inner border,

now add two CSS properties “border-collapse: collapse;” And “border: 1px solid #000000;”

table{
border-collapse: collapse;
border: 1px solid #000000;
}

After adding the above CSS properties now select the table head (th) and table data (td) and add a border property to it and set the value to 0.

th,
td {
border: 0;
}

How to Remove the Outer Border of a Table in HTML?

How to Remove Outer Border of Table in HTML

So many developers remove the outer border of the HTML table to make it look a little fancy and modern,

But when it comes to removing only the outer border of the table then you must know the right CSS property and technique to remove the outer border of the HTML table.

Inside your CSS file select the table in which you want to remove the border, then add two CSS properties to it, “border-collapse: collapse;” And “border: 0;”

table {
border-collapse: collapse;
border: 0;
}

In the same CSS file now select the table head (th) and table data and add another property called border-“bottom: 1px solid #000000;” and “border-right: 1px solid #000000;”

td,
th {
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}

On the next line again select the table head and table data but this time add last-child CSS pseudo-elements on both of the tags,

Something like this

td:last-child,
th:last-child {
border-right: 0px solid #000000;
}

At the last select the table tow (tr) tag to it and add last-child pseudo to it, now add the CSS border property and set the value to 0;

tr:last-child td {
border-bottom: 0px solid #000000;
}

I hope this post helps you, To Remove the Table Border in HTML.

You may also want to know: How to put a border around text in HTML (with codes example)