Styling HTML Tables: Borders, Spacing and Stripes

By default a table has no borders. Style it with CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<style>
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #d9cfc8; padding: 8px 12px; text-align: left; }
  th { background: #f8f2ee; }
  tbody tr:nth-child(even) { background: #fffbf9; }
</style>

<table>
  <thead>
    <tr><th>Book</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>The Slow Garden</td><td>$14</td></tr>
    <tr><td>River Notes</td><td>$11</td></tr>
    <tr><td>Paper Moons</td><td>$9</td></tr>
  </tbody>
</table>

What the CSS does

• border-collapse: collapse merges the double borders between cells into one line.
• padding gives text breathing room.
• text-align controls alignment. Left align text and right align numbers.
• tbody tr:nth-child(even) gives every second row a background colour, called “zebra stripes”.

Wide tables on small screens

A wide table can force the page to scroll sideways on a phone. Put the table inside a wrapper that scrolls instead.

1
2
3

<div style="overflow-x: auto;">
  <table> ... </table>
</div>