How to Create an HTML Table With no Border

HTML tables with no borders can look pretty clean. You can do this with either the border attribute in HTML or CSS styling. This post goes into more detail on how this all works.

How to remove border using HTML attribute?

Set the border attribute of your table to "0" to remove borders. This method is straightforward and directly tells the browser that you do not want any borders around your table cells:

<table border="0">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

How to remove border using CSS?

Applying CSS to control the appearance of your table offers more detailed customization. You can easily adjust the look of your table without borders by either adding styles directly to your table tag or by linking a CSS class.

Inline CSS

Directly add the style attribute to your table tag to eliminate borders, ensuring a seamless display:

<table style="border-collapse: collapse; border: none;">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

External or internal CSS

Defining your styles in an external stylesheet or within a <style> tag enhances your HTML's readability and maintains separation of concerns:

.no-border {
  border-collapse: collapse;
  border: none;
}

Apply this class to your table for a borderless design:

<table class="no-border">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Using CSS not only removes the table borders effectively but also aligns cells closely together, ensuring a neater and more organized presentation of data. This method is the go-to for web developers seeking to customize their table designs further.