CSS · Chapter 16 of 44
CSS Tables
CSS can style tables with border-collapse, cell padding, alternating row colors, and text alignment for a clean, readable layout.
border-collapse: collapse; merges adjacent cell borders into a single line instead of doubled borders.
Syntax
table { border-collapse: collapse; }Borders and spacing
border-collapse: collapse; removes the default gap between cell borders. Padding on td/th improves readability.
Striped rows and alignment
Using tr:nth-child(even) creates alternating row colors ('zebra striping'), and text-align controls cell content alignment.
Example 1 (css)
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}Output
A full-width table with single borders and striped rowsborder-collapse merges borders, and nth-child(even) creates a striped effect.
Key points
- border-collapse: collapse; merges cell borders.
- padding on td/th improves readability.
- tr:nth-child(even) creates zebra striping.
- width: 100% makes a table fill its container.
💡 Note: Striped tables improve readability especially for long data sets.