Default HTML tables look like they belong in 1998. Gray borders, cramped cells, zero visual appeal.
CSS table styling changes everything. A few properties transform raw data into clean, scannable layouts that users actually want to read.
This collection of CSS tables examples covers the techniques that work in modern browsers. Border styles, responsive layouts, zebra striping, sticky headers, hover effects.
Each example includes working code you can copy directly into your projects.
Whether you’re building a pricing comparison, data dashboard, or schedule grid, you’ll find a starting point here.
What is CSS Table Styling
CSS table styling is the process of applying Cascading Style Sheets properties to HTML table elements.
Tables display data in rows and columns. CSS controls how that data looks.
The basic HTML structure uses <table>, <tr>, <th>, and <td> tags. CSS transforms these raw elements into readable, organized data presentations.
Without styling, browser default tables look dated. Gray borders, cramped cells, no visual hierarchy.
CSS fixes all of that. Border styles, cell padding, background colors, hover effects, responsive behavior.
The W3C defines table display properties in the CSS specification. MDN Web Docs provides the most current browser compatibility data.
How Does the CSS Table Element Work
The CSS display: table property creates table-like layouts without semantic HTML table markup.
But for actual tabular data, HTML tables with CSS styling remain the correct approach. Screen readers and accessibility tools depend on proper table structure.
Basic Table Structure in HTML
Every table needs these elements: <thead> for headers, <tbody> for content, <tfoot> for summaries.
The <th> element defines header cells. The scope attribute tells assistive technology whether the header applies to a row or column.
CSS Properties for Table Display
Core display values include table, table-row, table-cell, inline-table, and table-caption.
These properties let you create table layouts with <div> elements when semantic tables aren’t appropriate.
CSS Table Border Styles
Borders define table structure visually. The border-collapse property determines whether cells share borders or maintain separate ones.
Two values exist: collapse and separate. This single property changes everything about how your table looks.
Solid Border Tables
The simplest approach. Apply border: 1px solid #ddd to table cells.
Works in Chrome, Firefox, Safari, Edge, and even Internet Explorer. Universal support.
table, th, td {
border: 1px solid #333;
}
Collapsed Border Tables
Set border-collapse: collapse on the table element. Adjacent cells share a single border instead of doubling up.
This creates the clean grid lines you see in spreadsheet applications and data tables on sites like Stack Overflow.
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
padding: 12px;
}
Separated Border Tables
The default behavior. Each cell maintains its own borders with space between them.
Control the gap with border-spacing. This property only works when border-collapse is set to separate.
table {
border-collapse: separate;
border-spacing: 8px;
}
CSS Table Width and Layout Settings
Table width behavior differs from standard block elements. The table-layout property controls how browsers calculate column widths.
Fixed Table Layout
Set table-layout: fixed for predictable column widths.
The browser uses the first row to calculate widths, then applies those measurements to all subsequent rows. Faster rendering on large datasets.
table {
table-layout: fixed;
width: 100%;
}
Auto Table Layout
The default setting. Browsers analyze all content before determining column widths.
More flexible but slower. Content never gets cut off, though columns may become unexpectedly wide.
Responsive Table Width
Set width: 100% on the table element for fluid layouts.
Combine with max-width on a wrapper div to prevent tables from becoming too wide on large screens. This approach works well whether you’re building a simple website or a complex web application.
.table-wrapper {
max-width: 1200px;
overflow-x: auto;
}
table {
width: 100%;
}
CSS Table Cell Padding and Spacing
Cell padding creates breathing room inside cells. Border spacing controls gaps between them.
These two properties affect readability more than any other table styles. Cramped cells make data hard to scan.
Cell Padding Values
Apply padding directly to <td> and <th> elements.
12-16 pixels works for most data tables. Increase to 20-24px for tables with minimal columns. Good white space distribution makes content scannable.
th, td {
padding: 14px 18px;
}
Border Spacing Properties
The border-spacing property accepts one or two values.
Single value: equal horizontal and vertical spacing. Two values: horizontal first, vertical second.
table {
border-collapse: separate;
border-spacing: 4px 8px; /* horizontal vertical */
}
Note: border-spacing has no effect when border-collapse: collapse is active.
CSS Table Row Styling
Row styling improves scannability. Users track data across columns more easily when rows have visual distinction.
Zebra Stripe Rows
Use the nth-child selector to target alternating rows. The zebra striping pattern is standard in data-heavy interfaces.
tr:nth-child(even) {
background-color: #f8f9fa;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
Hover Effects on Rows
Add tr:hover styles for interactive feedback. Subtle hover effects help users track which row they’re examining.
tr:hover {
background-color: #e8f4f8;
transition: background-color 0.2s ease;
}
CSS Table Header Styling
Headers tell users what each column contains. Strong visual differentiation between <th> and <td> elements improves comprehension.
Sticky Table Headers
Apply position: sticky and top: 0 to keep headers visible during scroll. Works in Chrome, Firefox, Safari, and Edge.
thead th {
position: sticky;
top: 0;
background-color: #2c3e50;
color: #fff;
z-index: 10;
}
Header Background Colors
Dark backgrounds with light text create clear separation. Match your site’s website color schemes for consistency.
th {
background-color: #343a40;
color: #ffffff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
CSS Table Alignment Options
Alignment affects readability. Numbers align right, text aligns left, headers often center.
Text Alignment in Cells
Use text-align for horizontal positioning. Apply different alignments to different column types.
td { text-align: left; }
td.number { text-align: right; }
th { text-align: center; }
Vertical Alignment Settings
The vertical-align property controls content position within cells. Values include top, middle, bottom, and baseline.
td {
vertical-align: middle;
height: 48px;
}
CSS Table Caption Placement
The <caption> element provides accessible table descriptions. The caption-side property controls its position.
Caption Top Position
Default placement. Works best for tables where context is needed before viewing data.
caption {
caption-side: top;
font-weight: bold;
padding: 10px;
}
Caption Bottom Position
Set caption-side: bottom for summary-style captions. Common in financial tables and reports.
Responsive CSS Tables
Tables break on small screens. Column widths compress until content becomes unreadable. Multiple solutions exist.
Horizontal Scroll Tables
Wrap tables in a div with overflow-x: auto. Users swipe horizontally to see all columns.
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
min-width: 600px;
}
Stacked Table Layout for Mobile
Transform rows into card-like blocks using media queries. Each cell displays with its header label.
@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
td::before {
content: attr(data-label);
font-weight: bold;
display: block;
}
}
Card-Based Table Transformation
Hide the table header entirely on mobile. Display each row as a standalone card with labeled values, creating a more user-friendly website experience on small screens.
CSS Table Color Schemes
Color establishes mood and improves data scanning. Match your table colors to overall site design.
Dark Theme Tables
Dark backgrounds reduce eye strain in low-light environments. Use sufficient contrast ratios for accessibility.
.dark-table {
background-color: #1a1a2e;
color: #eaeaea;
}
.dark-table th {
background-color: #16213e;
}
.dark-table tr:hover {
background-color: #0f3460;
}
Light Theme Tables
Clean, minimal appearance. Works with most designs and maintains high readability.
.light-table {
background-color: #ffffff;
color: #333333;
}
.light-table th {
background-color: #f1f3f4;
}
Custom Color Tables
Brand-aligned color schemes require careful contrast checking. Test with good color combinations that meet WCAG guidelines.
CSS Table with Rounded Corners
Rounded corners soften table appearance. The technique requires border-collapse: separate since collapsed borders ignore border-radius.
table {
border-collapse: separate;
border-spacing: 0;
border-radius: 8px;
overflow: hidden;
}
th:first-child { border-top-left-radius: 8px; }
th:last-child { border-top-right-radius: 8px; }
tr:last-child td:first-child { border-bottom-left-radius: 8px; }
tr:last-child td:last-child { border-bottom-right-radius: 8px; }
CSS Table Sorting Indicator Styles
Visual indicators show users which column controls the sort order. Arrows or chevrons are standard patterns.
Pure CSS solutions use pseudo-elements. JavaScript handles the actual sorting logic.
th.sortable::after {
content: '⇅';
margin-left: 8px;
opacity: 0.5;
}
th.sort-asc::after { content: '↑'; opacity: 1; }
th.sort-desc::after { content: '↓'; opacity: 1; }
Complete CSS Table Code Examples
Working code samples for common table types. Copy, customize, and implement.
Simple Data Table
Clean, minimal styling for basic data presentation. Uses collapsed borders and alternating row colors.
.simple-table {
width: 100%;
border-collapse: collapse;
font-family: system-ui, sans-serif;
}
.simple-table th,
.simple-table td {
border: 1px solid #dee2e6;
padding: 12px 16px;
text-align: left;
}
.simple-table th {
background-color: #f8f9fa;
font-weight: 600;
}
.simple-table tr:nth-child(even) {
background-color: #f8f9fa;
}
Pricing Table
Comparison-focused layout for products or service tiers. Highlight the recommended option with distinct styling. This format appears frequently in product page designs.
.pricing-table {
width: 100%;
text-align: center;
border-collapse: separate;
border-spacing: 16px;
}
.pricing-table th {
padding: 24px;
background-color: #6c5ce7;
color: white;
border-radius: 8px 8px 0 0;
}
.pricing-table th.featured {
background-color: #0984e3;
transform: scale(1.05);
}
.pricing-table td {
padding: 16px;
border: 1px solid #dfe6e9;
}
Comparison Table
Feature matrices for product comparisons. Checkmarks and x-marks indicate feature availability.
.comparison-table td.yes::before {
content: '✓';
color: #00b894;
font-weight: bold;
}
.comparison-table td.no::before {
content: '✗';
color: #d63031;
}
.comparison-table th:first-child {
text-align: left;
width: 40%;
}
Schedule Table
Time-based layouts for events, classes, or appointments. Fixed column widths keep time slots aligned.
.schedule-table {
table-layout: fixed;
width: 100%;
}
.schedule-table th {
width: 14.28%;
background-color: #2d3436;
color: #fff;
padding: 12px 8px;
}
.schedule-table td {
height: 60px;
vertical-align: top;
padding: 8px;
border: 1px solid #b2bec3;
}
.schedule-table .event {
background-color: #74b9ff;
border-radius: 4px;
padding: 4px 8px;
font-size: 0.875rem;
}
Browser Support for CSS Table Properties
Most CSS table properties have universal browser support. A few newer features require fallbacks.
Full support across all browsers:
border-collapseborder-spacingtable-layoutcaption-sideempty-cellsvertical-align
Good support with minor variations:
position: stickyon table headers (not supported in IE11)border-radiuson table elements (requiresborder-collapse: separate)
Check Can I Use for current compatibility data. MDN Web Docs provides detailed browser support tables for each property.
Test in Chrome, Firefox, Safari, and Edge at minimum. Internet Explorer 11 still appears in some enterprise environments, though Microsoft ended support in 2022.
FAQ on CSS Tables
How do I remove default borders from HTML tables?
Set border: none on table, th, and td elements. Add border-collapse: collapse to the table to eliminate spacing between cells. This removes all default browser styling.
What is the difference between border-collapse and border-spacing?
Border-collapse merges adjacent cell borders into one. Border-spacing controls the gap between separate cell borders. Border-spacing only works when border-collapse is set to separate.
How do I make a table responsive in CSS?
Wrap the table in a div with overflow-x: auto for horizontal scrolling. Alternatively, use media queries to stack cells vertically on mobile devices with display: block.
How do I create alternating row colors in CSS tables?
Use the nth-child selector. Apply tr:nth-child(even) or tr:nth-child(odd) with different background colors. This zebra stripe pattern improves readability in data-heavy tables.
Can I use border-radius on table cells?
Yes, but only with border-collapse: separate. Collapsed borders ignore border-radius. Target specific cells using :first-child and :last-child selectors for corner rounding.
How do I make table headers sticky in CSS?
Apply position: sticky and top: 0 to th elements. Add a background color and z-index. Works in Chrome, Firefox, Safari, and Edge. Not supported in Internet Explorer.
What is the best padding size for table cells?
12 to 16 pixels works for most data tables. Increase to 20-24px for tables with fewer columns. Consistent padding improves scannability and creates comfortable reading space.
How do I align text in table cells?
Use text-align for horizontal alignment (left, center, right). Use vertical-align for vertical positioning (top, middle, bottom). Numbers typically align right, text aligns left.
Should I use CSS Grid or Flexbox instead of HTML tables?
Use HTML tables for actual tabular data. Screen readers and assistive technology depend on proper table markup. CSS Grid and Flexbox work better for layout purposes, not data presentation.
How do I add hover effects to table rows?
Target rows with tr:hover and change the background color. Add transition: background-color 0.2s for smooth effect. This helps users track data across wide tables.
Conclusion
These CSS tables examples give you the foundation for building clean, functional data presentations. From border-collapse settings to responsive layouts, every property serves a purpose.
Start simple. Apply basic border styling and cell padding first.
Then layer in enhancements. Zebra striping improves scannability. Sticky headers keep context visible during scroll. Hover states provide interactive feedback.
Test across browsers. Chrome, Firefox, Safari, and Edge handle most properties consistently. Check Can I Use for edge cases.
Remember accessibility. Proper <thead>, <tbody>, and scope attributes help screen readers interpret your data correctly.
Tables remain the right choice for tabular data. CSS Grid and Flexbox handle website layout tasks, but structured data belongs in semantic HTML tables with thoughtful styling.
Perffect!