HTML Table Borders

By default, native HTML tables are invisible grids. They organize elements perfectly, but without drawing lines between them. To make a table look like a traditional spreadsheet chart, we have to lean into CSS targeting the table cells.

Drawing the Lines

To draw lines around your data, use the CSS border property. You typically apply this to three distinct pieces of the table so everything gets outlined:

1. The entire table container (for the outer box)
2. The th heading elements
3. The td standard data elements

<style>
  /* Applies a 1-pixel solid grey line */
  table, th, td {
    border: 1px solid #777;
  }
</style>

The Magic of Border Collapse

Modern web design almost never uses double borders. To merge those adjacent table and cell borders into a single, clean pixel line, we use the border-collapse property directly on the parent table.

<style>
  table {
    /* Fuses all internal borders together */
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid black;
    padding: 10px;
  }
</style>

Advanced Styling Tricks

You aren't restricted to simple lines. Once you master the basics, you can apply background colors to cells, round off the table wrapper using border-radius, or apply styling solely to rows (tr) to create horizontal separators without vertical divider lines.