HTML Table Styling

A bare, unstyled HTML table is functional but visually forgettable -- plain black text on a plain white grid. Table styling brings together borders, padding, alternating row colors, hover effects, and typography choices into a single cohesive design, turning a plain data grid into something that matches the rest of a polished website.

In this page:

Building a Clean Base Style
Styling the Header Row
Zebra Striping Rows
Hover Effects for Interactive Tables
Responsive Table Design

Building a Clean Base Style

A solid table styling foundation starts with border-collapse: collapse to merge grid lines, consistent padding on every cell for breathing room, and a neutral border color -- these three basics alone transform a raw, unstyled table into something clean and professional-looking.

Note: Start every table design from this same clean base (collapse, padding, subtle border) before layering on color and effects.

Warning: Skipping border-collapse before adding other styling can make later border-radius and border-color choices look inconsistent.

Example: Building a Clean Base Style

markup

<style>
  table {
    border-collapse: collapse;
  }
  td, th {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

Styling the Header Row

A distinct header style, typically a solid background color with white or dark contrasting text, immediately signals to readers where the labels are and where the data begins, making the whole table faster to scan and understand at a glance.

Note: Choose a header background color with strong contrast against its text (check contrast ratio) so labels remain readable for all users.

Warning: A header style with insufficient contrast between text and background can make column labels hard to read, especially for visually impaired users.

Example: Styling the Header Row

markup

<style>
  th {
    background-color: #333;
    color: white;
  }
</style>
<table>
  <tr><th>Name</th></tr>
</table>

Zebra Striping Rows

Alternating background colors on every other row, applied with the :nth-child(even) or :nth-child(odd) selector, creates a "zebra stripe" pattern that makes it much easier to follow one row across a wide table without accidentally jumping to a neighboring row.

Note: Keep zebra stripe colors subtle (a very light gray works well) so they guide the eye without competing with the actual data.

Warning: Two zebra stripe colors with too much contrast between them can make a table feel busy rather than genuinely easier to scan.

Example: Zebra Striping Rows

markup

<style>
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
</table>

Hover Effects for Interactive Tables

A subtle background color change on tr:hover gives users clear visual feedback about which row their mouse is currently over, which becomes genuinely useful on wide tables with many rows where it is easy to lose track while reading horizontally.

Note: Combine a hover effect with a short CSS transition on background-color so the highlight feels smooth rather than an abrupt flash.

Warning: A hover color too close to the zebra stripe color can make the hover effect nearly invisible on striped rows specifically.

Example: Hover Effects for Interactive Tables

markup

<style>
  tr:hover {
    background-color: #ddd;
    transition: background-color 0.2s;
  }
</style>
<table>
  <tr><td>Hover me</td></tr>
</table>

Responsive Table Design

On narrow mobile screens, a wide multi-column table can become genuinely unusable if simply left to shrink. Common responsive strategies include allowing horizontal scroll within a contained wrapper, or restructuring cells to stack vertically with CSS at small breakpoints so each row reads like a labeled card instead of a cramped grid.

Note: Test any styled table at common mobile widths (375px, 414px) before considering the table design finished.

Warning: A table forced to shrink without any responsive strategy can compress its text and numbers to the point of being unreadable on phones.

Example: Responsive Table Design

markup

<div style="overflow-x: auto;">
  <table>
    <tr><td>Wide table content</td></tr>
  </table>
</div>

Common Mistakes

Styling a table with dozens of scattered, one-off CSS rules instead of a few reusable class-based rules, making the design hard to maintain.
Choosing a header background color with too little contrast against the header text, hurting readability for all users.
Forgetting to style the :hover state on rows, missing an easy opportunity to make a dense table easier to visually track while scanning.

Chapter Summary

A well-styled table typically combines border-collapse, consistent padding, a distinct header style, and zebra striping.
Row hover effects and alternating background colors both make it easier to track a single row across many columns.
Table styling should be built with reusable class selectors rather than one-off inline styles for easier long-term maintenance.

Browser Support

All the CSS properties used to style HTML tables (border, padding, background-color, :hover, :nth-child) are supported in every modern browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Colspan & Rowspan Next Lesson → HTML Table Colgroup

HTML Table Styling

Building a Clean Base Style

Styling the Header Row

Zebra Striping Rows

Hover Effects for Interactive Tables

Responsive Table Design

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code