border-spacing sets gaps between adjacent table-cell borders when border-collapse is separate. Cell padding supplies space inside the borders instead.
Use different gaps on each axis
The first table has no gap. The second uses 12px horizontal and 4px vertical spacing; each cell’s padding stays the same.
HTML and CSS
HTML
<table class="zero">
<caption>
Zero spacing
</caption>
<thead>
<tr>
<th scope="col">Topic</th>
<th scope="col">Minutes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML</th>
<td>20</td>
</tr>
<tr>
<th scope="row">CSS</th>
<td>30</td>
</tr>
</tbody>
</table>
<table class="spaced">
<caption>
12px horizontal, 4px vertical
</caption>
<thead>
<tr>
<th scope="col">Topic</th>
<th scope="col">Minutes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML</th>
<td>20</td>
</tr>
<tr>
<th scope="row">CSS</th>
<td>30</td>
</tr>
</tbody>
</table>CSS
th,
td {
border: 2px solid #2563eb;
padding: 0.5rem;
text-align: left;
}
caption {
text-align: left;
font-weight: bold;
}
table {
margin-block: 1rem;
}
table {
border-collapse: separate;
}
.zero {
border-spacing: 0;
}
.spaced {
border-spacing: 12px 4px;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Leave room around a sparse table
The 6px gap applies around the outside cells as well as between cells. Table padding adds another 8px between the outer border and those gaps.
HTML and CSS
HTML
<table class="">
<caption>
Practice sessions
</caption>
<thead>
<tr>
<th scope="col">Topic</th>
<th scope="col">Minutes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML</th>
<td>20</td>
</tr>
<tr>
<th scope="row">CSS</th>
<td>30</td>
</tr>
</tbody>
</table>CSS
th,
td {
border: 2px solid #2563eb;
padding: 0.5rem;
text-align: left;
}
caption {
text-align: left;
font-weight: bold;
}
table {
margin-block: 1rem;
}
table {
border-collapse: separate;
border-spacing: 6px;
padding: 8px;
border: 1px solid #94a3b8;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Values and defaults
One nonnegative length sets both axes; two set horizontal then vertical. Percentages and negative values are invalid. The initial value is 0, and the property is inherited. Browser table styles may supply a nonzero spacing, so author an explicit value when comparing results.
Common mistakes
Spacing is ignored for collapsed borders. Setting it to zero in the separate model still leaves neighboring cells with separate borders; it is not the same as collapse. The outside distance includes the relevant border-spacing plus the table’s padding. Use CSS instead of the obsolete cellspacing attribute.
Learn border-collapse, padding, and table-layout.
Sources and browser support
MDN: border-spacing describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.