Master border-collapse and border-spacing for table borders
Create striped rows using :nth-child() pseudo-class
Add hover effects and transitions for interactive tables
Implement sticky table headers with position: sticky
Make tables responsive with horizontal scroll techniques
Control cell alignment with text-align and vertical-align
Style table captions with caption-side property
Build modern table designs with professional styling patterns
Introduction to Table Styling
Tables are essential for displaying structured data in rows and columns. While HTML provides the semantic structure with <table>, <thead>, <tbody>, and <th>/<td> elements, CSS transforms them into polished, professional components. Proper table styling improves readability and helps users quickly scan and compare data.
Modern table styling includes techniques for border control, alternating row colors, hover states, sticky headers, and responsive layouts. These patterns work together to create tables that are both functional and visually appealing across all device sizes.
border-collapse Property
The border-collapse property controls how table borders are rendered. By default, each cell has its own border with spacing between cells (separate). The collapse value merges adjacent borders into a single border, creating the clean table appearance most designs require.
/* Separate borders (default) */
table {
border-collapse: separate;
border-spacing: 10px; /* Gap between cells */
}
/* Collapsed borders (most common) */
table {
border-collapse: collapse;
/* Adjacent borders merge into one */
}
/* Example with collapsed borders */
.table {
border-collapse: collapse;
width: 100%;
}
.table th,
.table td {
padding: 12px;
border: 1px solid #ddd;
}
Striped Rows with :nth-child
Alternating row colors (zebra stripes) improve readability by helping users track data across columns. The :nth-child() pseudo-class makes this pattern trivial to implement without adding classes to every row.
Adding hover effects to table rows provides visual feedback and helps users focus on specific data. Combine :hover with transitions for smooth, professional interactions.
Sticky table headers remain visible as users scroll through long tables, maintaining context for each column. This requires position: sticky on header cells and a scrollable container with defined height.
Wide tables with many columns need special handling on mobile devices. The horizontal scroll approach wraps the table in a scrollable container, allowing users to swipe through columns while maintaining the table layout.
Proper cell alignment improves readability and helps users compare values. Use text-align for horizontal alignment and vertical-align for vertical positioning within cells.
The <caption> element provides a title or description for tables. Style it with caption-side to position it above or below the table, and apply standard text styling properties.
Combine multiple techniques to create polished, professional table designs. These patterns include shadows, rounded corners, smooth transitions, and thoughtful color schemes.