HTML Table CSS Styling Guide
Learn how to transform plain HTML tables into polished, readable components with CSS. This guide covers borders, striped rows, hover effects, responsive patterns, and dark mode — with a visual builder to generate the code for you.
HTML Table Generator
Build HTML tables visually. Edit cells, toggle header rows, choose a style, and export as plain HTML, inline CSS, or Tailwind classes.
Presets
| H | |||
Quick Reference: HTML Table Elements
Core Elements
<table>— the table container<thead>— groups header rows<tbody>— groups body rows<tr>— a table row<th>— a header cell (bold + centered by default)<td>— a data cell<caption>— table title/description (helps accessibility)
Accessibility Tips
- Always use
<th>for header cells — screen readers use them to describe data cells. - Add a
<caption>to describe the table's purpose. - Use
scope="col"orscope="row"on<th>to associate headers with data. - Avoid using tables for layout — only use them for tabular data.
Essential CSS for HTML tables
Start with border-collapse: collapse on the table element to merge cell borders into clean lines. Add padding to th and td cells (8-12px is standard) for readable spacing. Use border-bottom on rows instead of full borders for a lighter, modern look. Set width: 100% on the table for responsive behavior. For striped rows, use tr:nth-child(even) { background: #f9f9f9 }. Add tr:hover { background: #f0f4ff } for interactive row highlighting.
/* Modern HTML table styling */
table {
width: 100%;
border-collapse: collapse;
font-family: system-ui, sans-serif;
}
th, td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
th {
background: #f9fafb;
font-weight: 600;
color: #374151;
}
/* Zebra striping */
tr:nth-child(even) { background: #f9fafb; }
/* Hover effect */
tr:hover { background: #f3f4f6; }
/* Responsive — horizontal scroll on small screens */
.table-wrapper { overflow-x: auto; }
/* Tailwind equivalent */
/* <table class="w-full border-collapse"> */
/* <th class="bg-gray-50 px-4 py-3 text-left font-semibold"> */Responsive table patterns
Tables can overflow on mobile screens. The simplest fix is wrapping the table in a div with overflow-x: auto to enable horizontal scrolling. For a more advanced approach, use CSS Grid or Flexbox to stack cells vertically on small screens with display: block on tr and td elements combined with data attributes for labels. Another option: hide less-important columns on mobile with media queries and display: none.
HTML tables in emails
Email clients strip external CSS, so HTML email tables must use inline styles. Set style attributes directly on table, th, td, and tr elements. Use table attributes like cellpadding and cellspacing for maximum compatibility. Avoid CSS Grid, Flexbox, nth-child selectors, and CSS variables — Outlook and Gmail ignore them. DevBolt's 'Inline CSS' output format generates email-safe table code.
Frequently Asked Questions
How do I add borders to an HTML table?
Add border-collapse: collapse to the table element, then border: 1px solid #ddd to th and td cells. Border-collapse merges adjacent cell borders into a single line instead of doubling them. For a minimal look, use border-bottom only on tr elements instead of full cell borders.
How do I make an HTML table responsive?
Wrap the table in a container div with overflow-x: auto and max-width: 100%. This enables horizontal scrolling on small screens. For a mobile-first approach, use media queries to stack cells vertically or hide non-essential columns on narrow viewports.
How do I style an HTML table for dark mode?
Use a prefers-color-scheme: dark media query to swap background and text colors. Set the table background to a dark gray (#1f2937), text color to light gray (#e5e7eb), and border colors to a mid-gray (#374151). For hover states, use a slightly lighter background (#374151).
Related Generate Tools
QR Code Generator
Generate customizable QR codes from text or URLs
Color Palette Generator
Generate harmonious color palettes using color theory algorithms
Box Shadow Generator
Design CSS box shadows visually with multiple layers, presets, and live preview
Flexbox Generator
Build CSS flexbox layouts visually with live preview, item config, and presets