HTML Table Styling

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.

Example: Building a Clean Base Style

<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.

Example: Styling the Header Row

<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.

Example: Zebra Striping Rows

<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.

Example: Hover Effects for Interactive Tables

<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.

Example: Responsive Table Design

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