Table Borders
Give all cells a thin solid border and collapse shared edges.
Understand the topic
Borders make cell boundaries visible. Apply border properties to header and data cells, then decide whether adjacent borders should collapse into one line. border-collapse: collapse is often suitable for compact data tables. Keep border contrast sufficient, but avoid heavy decoration that distracts from values or obscures row relationships.
Worked example
<style>table { border-collapse: collapse; } th, td { border: 1px solid #475569; padding: .5rem; }</style><table><caption>Workshop places</caption><thead><tr><th scope="col">Class</th><th scope="col">Places</th></tr></thead><tbody><tr><th scope="row">HTML</th><td>12</td></tr><tr><th scope="row">CSS</th><td>8</td></tr></tbody></table>Without collapsed borders, adjacent cells can display separate lines. The CSS affects appearance; header and data elements still express the table structure.
Practice
Give all cells a thin solid border and collapse shared edges.
Show a suggested answer
table { border-collapse: collapse; }
th, td { border: 1px solid #64748b; }Common mistake
Avoid obsolete border attributes for new work. Put presentation rules in CSS.