CSS Tables

Learn how to style tables with CSS to create beautiful, accessible, and responsive data displays

What is CSS Table Styling?

CSS table styling allows you to customize the appearance and behavior of HTML tables. Well-styled tables improve data readability, user experience, and the overall aesthetics of your website. CSS provides numerous properties to control table layout, borders, spacing, and responsiveness.

Table Styling Categories:

Layout & Structure - borders, spacing, alignment
Visual Enhancement - colors, zebra striping, hover effects
Responsive Design - mobile-friendly tables
Accessibility - ensuring tables are usable by everyone
Advanced Features - caption, colgroup, fixed headers

Name	Value
Item 1	100
Item 2	200

CSS Table Properties Reference

Property	Description	Common Values
border-collapse	Sets whether table borders are collapsed	collapse, separate
border-spacing	Sets distance between borders when separated	length values
caption-side	Sets position of table caption	top, bottom
empty-cells	Sets whether to display borders on empty cells	show, hide
table-layout	Sets table layout algorithm	auto, fixed
vertical-align	Sets vertical alignment of cell content	top, middle, bottom
text-align	Sets horizontal alignment of cell content	left, center, right, justify
padding	Sets space inside table cells	length values
width	Sets width of table or columns	px, %, auto
border	Sets border properties for table elements	width style color

CSS Table Styling in Action

Example Code

/* CSS Table Properties */

/* Basic table styling */
table {
  width: 100%; /* Full width table */
  border-collapse: collapse; /* Remove space between borders */
  margin: 20px 0; /* Add spacing around table */
  font-family: Arial, sans-serif; /* Set font */
}

/* Table caption */
caption {
  caption-side: top; /* Position above table */
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
  text-align: left;
}

/* Table headers and cells */
th, td {
  padding: 12px 15px; /* Cell padding */
  text-align: left; /* Text alignment */
  border-bottom: 1px solid #ddd; /* Bottom border */
}

/* Table header specific styling */
th {
  background-color: #f8f9fa; /* Header background */
  font-weight: bold;
  color: #333;
}

/* Table row styling */
tr {
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Row hover effect */
tr:hover {
  background-color: #f5f5f5;
}

/* Zebra striping */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Table borders */
.bordered {
  border: 1px solid #ddd; /* Outer border */
}

.bordered th, 
.bordered td {
  border: 1px solid #ddd; /* Cell borders */
}

/* Compact table */
.compact th,
.compact td {
  padding: 6px 10px; /* Reduced padding */
  font-size: 0.9em;
}

/* Vertical alignment */
.middle-align th,
.middle-align td {
  vertical-align: middle; /* Center vertically */
}

/* Text alignment */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Fixed layout for predictable column widths */
.fixed {
  table-layout: fixed;
}

/* Responsive table container */
.table-container {
  overflow-x: auto; /* Horizontal scrolling */
  max-width: 100%;
}

/* Themed tables */
.primary th {
  background-color: #007bff;
  color: white;
}

.success th {
  background-color: #28a745;
  color: white;
}

/* Using CSS variables for table styling */
:root {
  --table-border-color: #dee2e6;
  --table-header-bg: #f8f9fa;
  --table-header-color: #495057;
  --table-hover-bg: rgba(0,0,0,.075);
  --table-stripe-bg: rgba(0,0,0,.02);
  --table-padding: 12px 15px;
}

table {
  --border-width: 1px;
  border-color: var(--table-border-color);
}

th {
  background-color: var(--table-header-bg);
  color: var(--table-header-color);
}

td, th {
  padding: var(--table-padding);
}

tr:hover {
  background-color: var(--table-hover-bg);
}

tr:nth-child(even) {
  background-color: var(--table-stripe-bg);
}

Table Styling Techniques

Basic Table Styles

Fundamental styling techniques for clean, readable tables.

Property	Value
border-collapse	collapse
padding	12px 15px

Zebra Striping

Alternating row colors improve readability of large tables.

Name	Value
Item 1	100
Item 2	200
Item 3	300

Hover Effects

Interactive hover states improve user experience.

Name	Value
Hover Row 1	100
Hover Row 2	200

Responsive Tables

Tables that adapt to different screen sizes.

Name	Position	Office
John Doe	Software Engineer	New York
Jane Smith	Product Manager	San Francisco

Best Practices for Table Styling

Usability Tips

Use adequate padding for readable cell content
Ensure sufficient contrast between text and background
Use zebra striping for large tables to improve readability
Provide visual feedback with hover effects
Align numerical data to the right for easier comparison
Use clear, descriptive headers for each column

Common Mistakes to Avoid

Using tables for layout instead of data presentation
Overly complex tables with too many columns
Insufficient spacing between cells and content
Not making tables responsive for mobile devices
Using colors that don't have enough contrast
Forgetting to style empty cells appropriately

Accessibility Considerations

Use proper table structure with <th> elements for headers
Add scope attributes to indicate header direction (row/col)
Provide captions or summaries for complex tables
Ensure keyboard navigation works correctly
Test with screen readers to ensure proper reading order
Use ARIA attributes when necessary for complex tables

Ready to Try It Yourself?

Experiment with CSS table styling in our interactive editor. See your changes in real-time and build your understanding through practice.

< Previous Next >