CSS Table Padding: Give Cells Room to Breathe

Cells with no padding put text right against the borders. A little padding on th and td is the single biggest improvement you can make to a table.

index.html

HTML

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #ccc; }
  .tight th, .tight td { padding: 0; }
  .roomy th, .roomy td { padding: 12px 20px; }
</style>
<div class="tight">
<table>
  <tr><th>Book</th><th>Author</th><th>Price</th></tr>
  <tr><td>The Slow Garden</td><td>M. Okafor</td><td>$14</td></tr>
  <tr><td>Night Trains</td><td>L. Brandt</td><td>$11</td></tr>
  <tr><td>Salt and Paper</td><td>R. Iyer</td><td>$16</td></tr>
</table>
</div>
<br>
<div class="roomy">
<table>
  <tr><th>Book</th><th>Author</th><th>Price</th></tr>
  <tr><td>The Slow Garden</td><td>M. Okafor</td><td>$14</td></tr>
  <tr><td>Night Trains</td><td>L. Brandt</td><td>$11</td></tr>
  <tr><td>Salt and Paper</td><td>R. Iyer</td><td>$16</td></tr>
</table>
</div>

The first table is cramped. The second one is the same HTML with padding.

Padding vs. border-spacing

	Padding	border-spacing
Where	Inside each cell	Between cells
Needs `separate` borders	No	Yes
Background fills it	Yes	No

With border-collapse: collapse (the usual setup), padding is the tool to use.

Good defaults

style.css

CSS

th, td {
  padding: 0.75rem 1rem;
  text-align: left;
}

Use more horizontal padding than vertical for wide text columns. A header cell can have the same padding so it lines up with the body cells under it.

lightbulb

Use rem or em

Padding in rem scales with the text size, so a visitor who increases their default font size also gets proportionally larger cells.