Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Tables Styling
HTML tables display tabular data like pricing plans, comparison charts, and data tables. CSS transforms plain tables into clean, readable, and responsive data presentations.
Table Styling Properties
- border-collapse: collapse - Merges cell borders into single lines (the first rule for any table)
- padding on th/td - Adds space inside cells for readability: padding: 12px 16px
- text-align - Left for text, right for numbers, center for headers
- Zebra stripes - tr:nth-child(even) { background: #f8f9fa; } for alternating row colors
- Hover rows - tr:hover { background: #e8f0fe; } for interactive feedback
- Sticky header - thead th { position: sticky; top: 0; } keeps header visible while scrolling
- Responsive tables - Wrap in a div with overflow-x: auto for horizontal scroll on mobile
Table Styling Code
/* Professional table styles */
table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
thead th {
background: #1a1a2e;
color: white;
padding: 14px 16px;
text-align: left;
font-weight: 600;
position: sticky;
top: 0;
}
tbody td {
padding: 12px 16px;
border-bottom: 1px solid #e0e0e0;
}
/* Zebra stripes */
tbody tr:nth-child(even) {
background: #f8f9fa;
}
/* Hover effect */
tbody tr:hover {
background: #e8f0fe;
}
/* Responsive wrapper */
.table-container {
overflow-x: auto;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}Tip
Add position: sticky; top: 0 to thead th to keep the table header visible while users scroll through long data tables. Pair it with a contrasting background color and z-index so it floats clearly above the scrolling rows.
Every element follows the box model - content + padding + border + margin
Common Mistake
Forgetting border-collapse: collapse gives you ugly double-borders between cells. Always start every table stylesheet with 'table { width: 100%; border-collapse: collapse; }' - treat it as a mandatory table reset, just like box-sizing: border-box for layouts.
Practice Task
Style a comparison table: (1) border-collapse: collapse, (2) zebra stripes with tr:nth-child(even), (3) row hover effect, (4) sticky dark header with position: sticky; top: 0, (5) wrap in overflow-x: auto for mobile. Resize the browser to verify mobile scrolling works.
Quick Quiz
Key Takeaways
- HTML tables display tabular data like pricing plans, comparison charts, and data tables.
- border-collapse: collapse - Merges cell borders into single lines (the first rule for any table)
- padding on th/td - Adds space inside cells for readability: padding: 12px 16px
- text-align - Left for text, right for numbers, center for headers