Summarize this article with:
Tables still matter. Despite flexbox and grid systems dominating modern layouts, CSS tables remain the right choice for presenting structured data.
Pricing comparisons, feature matrices, schedules, statistics. These demand proper table markup and styling.
This collection of CSS tables examples covers everything from basic border styling to responsive data grids. You will find working code for zebra striping, hover effects, fixed layouts, and sticky headers.
Each example includes copy-ready CSS you can drop into your projects.
Whether you are building admin dashboards or simple data displays, these patterns solve real frontend problems.
What is a CSS Table
A CSS table is a method for displaying data in rows and columns using Cascading Style Sheets properties.
You can style HTML table elements directly. Or use display: table on div elements to create table-like layouts without semantic table markup.
CSS tables handle tabular data presentation, pricing grids, comparison charts, and structured content layouts.
The browser renders cells, rows, and columns based on your CSS rules for borders, spacing, alignment, and colors.
CSS tables examples
HTML Table Generator
Create clean, accessible HTML tables without writing code. This intuitive tool simplifies table creation for websites, documents, and emails. Simply specify rows, columns, and content – we handle the markup.
What makes our generator different:
- Real-time preview shows exactly how your table will appear
- Copy-ready HTML code with proper semantic structure
- Customizable headers for better organization and accessibility
- Optional table captions for context
Perfect for developers looking to save time and non-coders who need professional tables. Educators, content creators, and data analysts will appreciate the straightforward interface. No complex configuration needed.
Modern Project Dashboard Table
See the Pen
Modern Project Dashboard Table by Bogdan Sandu (@bogdansandu)
on CodePen.
A sleek, dark-themed data table designed for project management with smooth animations and modern UI effects. Features include:
Visual Design:
- Dark gradient background (slate/navy)
- Blue gradient header with clean typography
- Smooth hover animations with scale & glow effects
Practical Components:
- Color-coded status badges (Completed, In Progress, Pending)
- Priority indicators with glowing dots (High/Medium/Low)
- Animated progress bars showing completion %
- Avatar badges for team member assignments
- Clean typography with proper spacing
Taking Tables to the Next Level with Accessibility
The Basics, with Alico’s Touch
Letting CSS Do The Heavy Lifting
Show the Price with a Flipping Cool Effect
Every Table Needs Some Sass
V09: Admin’s Dream in CSS
Responstable 2.0: Making HTML5 Groove
Diving Deep into CSS Table Styling
Spotlight on Hover with Pure CSS
Click and Tada! Sorted Data
Sleek Realness Right Here
The Living Table
Clean. Modern. Less is More
Gradients That Make Prices Pop
Foodie’s Dream: Nutritional Facts Display
Where Magic Meets Classic
Colors That Speak
Angular Awesomeness with a Touch of Style
Pure CSS Goodness and Yep, It’s Responsive
Keepin’ it Snappy and Responsive
Sticky Header Magic
Spin That Header Right Round
Sleek Scheduler, Coming Right Up
Sort, Search, and Show Off
Science Meets Style
Pricing, But Make It Pop
A Touch of Angular and a Dash of Material
Sleek, Simple, and So On Point
Ditch the Boring, Get Bulma
Flex Those Table Muscles
Details? Oh, They Matter
What is the CSS Display Table Property
The display: table property makes any element behave like a table element.
This property accepts 6 values that correspond to different table components: table, table-row, table-cell, table-header-group, table-footer-group, and table-column-group.
What are the CSS Table Display Values
Each display value maps to a specific table element behavior:
- table – acts like the table element
- table-row – acts like tr
- table-cell – acts like td
- table-header-group – acts like thead
- table-footer-group – acts like tfoot
- table-column-group – acts like colgroup
How to Create a CSS Table
Building a CSS table requires proper HTML markup paired with specific CSS properties.
The structure follows a parent-child hierarchy: table contains rows, rows contain cells.
What is the HTML Structure for CSS Tables
Use thead for headers, tbody for data rows, and tfoot for footer content. Each row (tr) contains either th or td cells.
What are the Required CSS Properties for Tables
Four properties control table rendering: display (table layout mode), border-collapse (border handling), border-spacing (cell gaps), and table-layout (column sizing algorithm).
CSS Table Layout Examples
The table-layout property controls how browsers calculate column widths. Two algorithms exist: fixed and auto.
How to Create a Fixed Layout Table
Set table-layout: fixed and define explicit column widths. The browser ignores cell content when calculating sizes, which speeds up rendering on large data tables.
“ .pricing-table { table-layout: fixed; width: 100%; } .pricing-table td { width: 25%; } `
How to Create an Auto Layout Table
The default table-layout: auto lets content determine column widths. Slower on large datasets but adjusts automatically to varying content lengths.
How to Create a Responsive CSS Table
Use media queries to adjust table display at different breakpoints. Common approaches: horizontal scrolling below 768px, or stacking cells vertically on mobile.
` @media (max-width: 768px) { .data-table { display: block; overflow-x: auto; } } `
CSS Table Styling Examples
Table styling covers borders, backgrounds, spacing, and hover effects. These properties transform plain data grids into readable, attractive components.
How to Style Table Borders
Apply borders to table, th, and td elements. The border-collapse property determines whether adjacent cells share borders or maintain separate ones.
` .styled-table { border-collapse: collapse; } .styled-table th, .styled-table td { border: 1px solid #ddd; padding: 12px; } `
What is Border Collapse in CSS Tables
border-collapse: collapse merges adjacent borders into single lines. The value “separate” keeps individual cell borders with optional border-spacing gaps between them.
How to Add Zebra Stripes to a Table
Target alternating rows with the nth-child selector. Apply different background colors to odd or even rows for better readability.
` .zebra-table tr:nth-child(even) { background-color: #f9f9f9; } `
How to Style Table Headers
Headers (th elements) typically get bolder treatment: darker backgrounds, white text, uppercase text-transform, or increased padding.
` .data-table th { background-color: #333; color: #fff; font-weight: 600; text-align: left; } `
How to Add Hover Effects to Table Rows
Apply :hover pseudo-class to tr elements for row highlighting. Subtle background color changes help users track data across wide tables.
` .interactive-table tr:hover { background-color: #e8f4f8; } `
CSS Table Alignment Examples
Text alignment and vertical alignment control how content positions within cells. Both properties accept multiple values for different layout needs.
How to Center Text in Table Cells
Combine text-align: center for horizontal centering with vertical-align: middle for vertical centering.
` .centered-table td { text-align: center; vertical-align: middle; height: 60px; } `
How to Align Numbers in Table Columns
Right-align numeric data for easier comparison. Financial tables, statistics, and pricing grids benefit from consistent number alignment.
` .data-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; } `
CSS Table Spacing Examples
Cell padding and cell spacing control the whitespace inside and between table cells. These properties affect readability and visual hierarchy.
How to Add Cell Padding in CSS Tables
Apply padding directly to td and th elements. Values between 8px and 16px work for most data tables.
` .spaced-table th, .spaced-table td { padding: 12px 16px; } `
How to Add Cell Spacing in CSS Tables
Use border-spacing with border-collapse: separate. This creates gaps between cells rather than inside them.
` .gap-table { border-collapse: separate; border-spacing: 4px; } `
Advanced CSS Table Examples
Beyond basic data display, CSS tables power pricing components, admin dashboards, and complex grid layouts.
How to Create a Pricing Table with CSS
Pricing tables combine styled headers, feature rows, and prominent call-to-action buttons. Highlight the recommended plan with distinct background colors or borders.
` .pricing-table .featured { background: #f0f7ff; border: 2px solid #0066cc; transform: scale(1.02); } `
How to Create a Data Grid with CSS Tables
Data grids handle large datasets with fixed headers, sortable columns, and horizontal scrolling. Wrap tables in overflow containers for responsive design.
` .grid-wrapper { overflow-x: auto; max-width: 100%; } .data-grid th { position: sticky; top: 0; background: #fff; } `
How to Create a CSS-Only Table Without HTML Table Tags
Apply display: table, display: table-row, and display: table-cell to div elements. Useful when semantic table markup conflicts with design requirements.
` .div-table { display: table; width: 100%; } .div-row { display: table-row; } .div-cell { display: table-cell; padding: 10px; } `
CSS Table vs HTML Table
Semantic HTML tables (table, tr, td) provide built-in accessibility features. Screen readers announce row and column relationships automatically.
CSS display: table on divs offers layout flexibility but loses semantic meaning. Use HTML tables for actual tabular data; use CSS tables for visual layouts only.
Accessibility considerations:
- HTML tables support scope, headers, and caption attributes
- CSS tables require ARIA roles for screen reader support
- Always add role=”table”, role=”row”, role=”cell” to div-based tables
CSS Table Browser Support
All modern browsers support CSS table properties. Chrome, Firefox, Safari, and Edge handle display: table, border-collapse, and table-layout consistently.
Full support: Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, Opera 7+.
Legacy Internet Explorer versions (6-7) had partial support for some display values. Check cross-browser compatibility if targeting older browsers.
The border-spacing property requires border-collapse: separate. Some older mobile browsers ignore table-layout: fixed on percentage-width tables.
FAQ on CSS Tables Examples
How do I make a table responsive in CSS?
Wrap your table in a container with overflow-x: auto for horizontal scrolling on small screens. Alternatively, use display: block on cells and stack them vertically below specific breakpoints using mobile-first design principles.
What is the difference between border-collapse and border-spacing?
Border-collapse merges adjacent cell borders into single lines. Border-spacing creates gaps between separate cell borders. You cannot use both simultaneously; border-spacing only works when border-collapse is set to separate.
How do I center a table on a page?
Set margin: 0 auto on the table element with a defined width. For full-width tables, center content inside cells using text-align: center and vertical-align: middle on td elements.
Can I use CSS Grid instead of tables?
CSS Grid works for visual layouts but lacks semantic meaning. Use HTML tables for actual tabular data like spreadsheets and comparisons. Screen readers and web accessibility tools rely on proper table structure.
How do I create zebra stripes on table rows?
Apply the :nth-child selector to target alternating rows. Use tr:nth-child(even) or tr:nth-child(odd) with different background colors. This improves readability on wide data tables with many columns.
Why is my table overflowing its container?
Tables default to auto width based on content. Set table-layout: fixed with a specific width to force column sizing. Add word-wrap: break-word on cells to prevent long strings from breaking layouts.
How do I make table headers sticky?
Apply position: sticky and top: 0 to th elements. Add a background color to prevent content showing through. This keeps headers visible while scrolling through long data tables.
What is the best way to style table borders?
Use border-collapse: collapse for clean single-line borders between cells. Apply border properties to th and td elements rather than the table itself. A 1px solid border in neutral gray works for most designs.
How do I add hover effects to table rows?
Target tr:hover with a subtle background color change. Avoid harsh color shifts; light grays or tinted versions of your brand color work best. This helps users track data across wide tables.
Are CSS tables still relevant with modern layout options?
Yes. Bootstrap tables and CSS table properties remain the correct choice for tabular data. Flexbox and Grid handle page layouts; tables handle structured data presentation with built-in row and column relationships.
Conclusion
These CSS tables examples give you production-ready code for any data presentation scenario.
You now have patterns for border styling, cell spacing, alignment, and row interactions. The responsive techniques keep your tables functional across all viewport sizes.
Start with semantic HTML table structure. Layer CSS properties for visual styling. Test with Chrome DevTools or Firefox Developer Tools to debug layout issues.
Tables handle what flexbox and CSS Grid cannot: true tabular relationships with proper column alignment and row groupings.
Copy the code snippets into your projects. Modify colors, spacing, and typography to match your design system.
Good data table design improves usability and keeps users engaged with your content.
