Table: Borders

If you do not specify a border for the table, it will be displayed without borders. You must style table borders with CSS border attribute:

<table style="border:1px solid black;">
HTML file: Displayed by browser:
<p>This table has no borders</p>
<table>
 <tr>
    <td>Cell #1</td>
    <td>Cell #2</td>
    <td>Cell #3</td>
 </tr>
</table>

This table has no borders

Cell #1 Cell #2 Cell #3
<p>This table's borders are styled with <strong>inline</strong> CSS</p>
<table style="width:100%;border:1px solid black;">
 <tr>
    <td style="border:1px solid black;">Cell #1</td>
    <td style="border:1px solid black;">Cell #2</td>
    <td style="border:1px solid black;">Cell #3</td>
 </tr>
</table>

This table's borders are styled with inline CSS

Cell #1 Cell #2 Cell #3
<!DOCTYPE html>
  <html>
    <head>
      <style>
table, th, td {
    border: 1px solid black;
    }
      </style>
    </head>
    <body>
<p>This table's borders are styled with an <strong>internal</strong> CSS stylesheet</p>
<table>
 <tr>
    <td>Cell #1</td>
    <td>Cell #2</td>
    <td>Cell #3</td>
 </tr>
</table>
    </body>
  </html>

This table's borders are styled with an internal CSS stylesheet

Cell #1 Cell #2 Cell #3

Note: The old HTML attribute < table border="1" > is on its way to being obsolete. Don't use it anymore!

Good habit Remember to define borders for both the <table> and the <td> elements. You may not like the double border look, but we can collapse them into one line...
Back button Table of Contents Next button