Styling Tables

Borders, padding and stripes

Use border-collapse: collapse to merge double borders, add padding to cells, and stripe alternate rows with :nth-child(even).

<style>
  table { border-collapse: collapse; width: 100%; font-family: sans-serif; }
  th, td { border: 1px solid #e6e8f0; padding: 10px 14px; text-align: left; }
  th { background: #4338ca; color: #fff; }
  tr:nth-child(even) { background: #f3f4f8; }
  tr:hover { background: #e0e7ff; }
</style>
<table>
  <thead><tr><th>Name</th><th>Course</th></tr></thead>
  <tbody>
    <tr><td>Asha</td><td>HTML</td></tr>
    <tr><td>Ravi</td><td>CSS</td></tr>
    <tr><td>Meera</td><td>MERN</td></tr>
  </tbody>
</table>

Five small rules turn a bare HTML table into a polished one:

• border-collapse: collapse merges the doubled-up cell borders into single clean lines (without it you get an ugly gap between every cell).
• th, td { border ... padding ... } gives every header and data cell a thin border, comfortable inner spacing, and left-aligned text.
• th { background ... color ... } makes the header row stand out with an indigo bar and white text.
• tr:nth-child(even) shades every second row light grey — the “zebra stripe” that makes wide rows easy to follow.
• tr:hover highlights whichever row the mouse is over, so users can track across a row.