Table Borders

By default, HTML tables are invisible. No grid lines, no borders — just text floating on the page. To make your table actually look like a table, you need to add borders. You have a few ways to do it.

The border Attribute

The quickest way is the border attribute directly on the <table> tag. It sets a border around the entire table and around every cell.

<table border="1">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Coffee</td>
    <td>$3.50</td>
  </tr>
</table>
    

CSS Borders

The border attribute is old-school. Modern HTML uses CSS for styling. You can add borders with style or a stylesheet. This gives you much more control — different colors, thicknesses, and styles.

<table style="border: 2px solid black;">
  <tr>
    <th style="border: 1px solid gray; padding: 8px;">Name</th>
    <th style="border: 1px solid gray; padding: 8px;">Score</th>
  </tr>
  <tr>
    <td style="border: 1px solid gray; padding: 8px;">Alice</td>
    <td style="border: 1px solid gray; padding: 8px;">95</td>
  </tr>
</table>
    

Notice the padding — it adds space inside each cell so the text does not touch the borders.

Collapsed Borders

With regular borders, each cell has its own border, creating a double-line effect where cells meet. If you want clean single lines, use border-collapse: collapse.

<table style="border-collapse: collapse; border: 2px solid black;">
  <tr>
    <th style="border: 1px solid black; padding: 8px;">A</th>
    <th style="border: 1px solid black; padding: 8px;">B</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">1</td>
    <td style="border: 1px solid black; padding: 8px;">2</td>
  </tr>
</table>
    

With border-collapse: collapse, adjacent borders merge into one. This is almost always what you want for a clean, professional-looking table.