How to Create an HTML Table With No Border

Depending on the design you're going for, you may not want to have a border around your table. Similarly, you may just want to remove the border around the outside while keeping borders between rows. By default, HTML tables have borders around cells, but there are several ways to create a table without borders. In this guide, we'll explore different methods to achieve this. Let's dive in!

How to Remove Border Without CSS

If you prefer not to use CSS to remove borders from your HTML table, you can achieve a borderless table by using the border attribute with a value of 0 (zero) on the <table> element. Here's an example:

HTML

<table border="0">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

By setting the border attribute to 0, you effectively remove the border from the entire table, resulting in a table with no visible border.

Why is border="0" Not Working?

If you're using the border attribute but find that you can't remove the border, it may be due to one of the following reasons:

1. Conflicting CSS: If there are CSS styles applied to the table or its parent elements that override the border attribute, the border may still be visible. Check the CSS stylesheets and inline styles to ensure that there are no conflicting styles affecting the table's border.
2. Deprecated Attribute: Although the border attribute is supported in HTML, it is considered deprecated in favor of using CSS for styling. Some modern browsers may ignore deprecated HTML attributes, which could result in the border still being displayed.
3. Parent Styles: If the table is nested within other elements that have border styles applied, such as <div> or <fieldset>, the parent element's border may override the table's border. Check the styles applied to parent elements to ensure they are not affecting the table's border.
4. Incorrect Syntax: Double-check the syntax of the border attribute to ensure it's spelled correctly and properly assigned a value of 0. It should be included within the opening <table> tag, like this: <table border="0">.

By investigating these potential issues, you can identify the reason why the border="0" attribute isn't working and take appropriate action to resolve it. If you're using CSS for styling, consider applying styles directly to the table or its cells to achieve the desired border appearance.

How to Remove Border With CSS

Alternatively, you can use CSS to remove borders from an HTML table. This method offers more flexibility and control over the table's appearance. You can target specific tables or apply styles globally to all tables. Here's how to remove borders from a table using CSS:

CSS

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

In this example, the border-collapse property is set to collapse, which removes the spacing between table cells, and the border property is set to none, effectively removing the border from the table.

How to Remove Border Between Cells

Sometimes, you may want to keep the table border but remove the borders between individual cells. You can achieve this by applying CSS styles to the <td> and <th> elements within the table. Here's how:

CSS

td, th {
  border: none;
}

By setting the border property to none for <td> and <th> elements, you remove the borders between cells while keeping the border around the entire table intact.

Conclusion

Creating an HTML table with no border is simple and offers a clean and minimalist appearance, which is ideal for some websites. Whether you choose to use HTML attributes or CSS styles (the preferred way), you have the flexibility to customize the table's border according to your design preferences.