HTML Table Padding & Spacing

Have you ever seen an HTML table where the text is crammed tightly against the black border lines? It makes reading very difficult and feels outdated. Beautiful tables require "breathing room" both inside the cells and between logic blocks.

Adding Internal Padding

Padding refers to the invisible distance pushing the text away from the cell's outer boundaries. A fundamental step in styling tables is injecting CSS padding onto the <td> and <th> elements so the text isn't suffocating against the edges.

If you don't declare padding, browsers assign almost nothing by default.

<style>
  /* Applying uniform 12px padding across all sides */
  th, td {
    padding: 12px;
    border: 1px solid #c0c0c0;
  }
</style>

You can also be highly specific. A common design trend is to add a lot of left-to-right padding, but keep top-to-bottom padding thinner: padding: 8px 16px;

Controlling Gaps Between Cells

While padding manipulates space inside the cell boxes, spacing manipulates the space between the cell boxes.

If you are using the classic un-merged table design (where you have a double-border grid), you can control how wide the "streets" between the cell boxes are. This is done using the CSS border-spacing property on the active table element.

<style>
  /* Push all table cells 15 pixels away from each other */
  table {
    border-spacing: 15px;
  }
</style>