CSS Table Generator

Create beautiful, styled tables with customizable headers, borders, zebra striping, and hover effects.
Preview live and copy the CSS instantly.

Name	Role	Status
John Doe	Developer	Active
Jane Smith	Designer	Active
Bob Johnson	Manager	Inactive
Alice Brown	Developer	Active

Header Background

Header Text Color

Body Background

Border Color

Zebra Striping (Alternating Rows)

Hover Highlight

Border Style

Cell Padding12px

Border Radius8px

CSS Code

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}

.table th {
  background-color: #3b82f6;
  color: #ffffff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
}

.table td {
  padding: 12px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.table tr:nth-child(even) td {
  background-color: #f9fafb;
}

.table tbody tr:hover td {
  background-color: #f3f4f6;
}

Need table styles from real sites instead?

Frontend Hero's CSS Scanner lets you extract any table style from any website in 2 clicks. See how top designers create their data tables.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →