Table Borders
Borders help readers trace a table’s cells, but they should support the structure rather than overwhelm it. CSS controls border appearance without changing the table’s data.
How it works
- Apply borders to th and td when you want visible cell boundaries. A border only on table outlines the table rather than every cell.
- border-collapse: collapse merges neighbouring table borders. The separate model keeps individual cell borders distinct.
- Choose a restrained border colour with enough contrast to clarify grouping. Keep text contrast stronger than decorative grid lines.
A practical example
<div class="table-scroll"><table class="schedule"><caption>Garden club sessions</caption><thead><tr><th scope="col">Session</th><th scope="col">Day</th><th scope="col">Places</th></tr></thead><tbody><tr><th scope="row">Seed swap</th><td>Saturday</td><td class="numeric">12</td></tr><tr><th scope="row">Plant care</th><td>Sunday</td><td class="numeric">8</td></tr></tbody></table></div>
table { border-collapse: collapse; }
th, td {
border: 1px solid #9eafa5;
padding: 0.75rem;
text-align: left;
}
Use this CSS with the Workshop places table. Adjacent cells share borders instead of displaying two independent lines between them.