Table Styling

CSS offers many ways to make tables visually appealing. The most important property is border-collapse: collapse which merges cell borders. Adding padding inside cells with padding on th and td greatly improves readability.

Striped Rows and Hover Effects

Alternating row colours (zebra striping) help readers track across wide tables. Use the :nth-child(even) or :nth-child(odd) CSS pseudo-class on <tr> inside <tbody>. A :hover rule on rows highlights the row the user is focused on, further aiding scanning.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table Styling</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
      font-family: sans-serif;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    th {
      background: #2c3e50;
      color: white;
      padding: 12px 16px;
      text-align: left;
    }
    td { padding: 10px 16px; }
    tbody tr:nth-child(even) { background: #ecf0f1; }
    tbody tr:hover { background: #d5e8d4; }
    td, th { border-bottom: 1px solid #ccc; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th>Name</th><th>Role</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td>Alice</td><td>Developer</td><td>Active</td></tr>
      <tr><td>Bob</td><td>Designer</td><td>Active</td></tr>
      <tr><td>Carol</td><td>Manager</td><td>On leave</td></tr>
      <tr><td>Dave</td><td>QA</td><td>Active</td></tr>
    </tbody>
  </table>
</body>
</html>

HTML

Full Editor

Pro Tip

Make your table responsive by wrapping it in a <div style="overflow-x:auto"> container — on small screens the table will scroll horizontally instead of breaking the page layout.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned