CSS Tables

A plain HTML table works, but it looks bare — thin grey lines, cramped text, no colour at all. CSS turns that same table into a clean menu, a neat timetable, or a readable marksheet. You do not change the HTML. You only add style.

Diagram — see how it fits together

Tables are used everywhere: a chai shop menu, a school timetable, a cricket scorecard, an exam result list. If people must read rows of data, the table has to be easy on the eyes. That is the whole job of CSS tables.

Borders — the first step

Give the table, the headings and the cells a border with the border property. Without one more property, you get a strange result: every cell draws its own border, so you see double lines between cells. The fix is border-collapse: collapse on the table. It merges the touching borders into a single clean line.

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #999;
  padding: 10px;
}

Width, padding and alignment

Three small properties do most of the work. width decides how wide the table is — 100% makes it fill its container. padding puts breathing space inside each cell, so the text does not touch the border. text-align lines the text up: headings and names on the left, numbers and prices on the right.

th, td {
  padding: 12px;
  text-align: left;
}
.price {
  text-align: right;
}

Zebra stripes — colour every second row

When a table has many rows, the eye slips to the wrong line. Zebra stripes fix that: give every even row a light background colour. The selector tr:nth-child(even) picks rows 2, 4, 6 and so on. You will meet :nth-child properly in the pseudo-classes lesson.

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Hover rows

A hover row lights up the row under the mouse. It is a small touch, but it makes a long table much easier to read — the reader always knows which row they are on.

tr:hover {
  background-color: #ddd;
}

Responsive tables — small screens

A wide table breaks a phone screen: it either squeezes the text or pushes the page sideways. The simple fix is to wrap the table in a <div> with overflow-x: auto. On a small screen the table scrolls sideways inside its own box, and the rest of the page stays still.

<div style="overflow-x: auto;">
  <table> ... </table>
</div>

Common mistakes

• Forgetting border-collapse: collapse and wondering why the borders look doubled.
• Putting a border only on the table and forgetting the cells — then only the outside edge shows.
• Using <br> or extra spaces for spacing inside cells instead of padding.
• Making the table a fixed pixel width, so it overflows on a phone screen.
• Colouring every row the same dark shade, so the zebra stripes and the hover effect disappear.

Remember

• border-collapse: collapse turns double borders into single clean lines.
• padding gives the text room inside each cell; text-align lines it up.
• tr:nth-child(even) makes zebra stripes; tr:hover lights up the row under the mouse.
• Wrap a wide table in a div with overflow-x: auto so it scrolls on small screens.
• Style the heading row (th) differently from the data rows (td).

Example explained

• table { width: 80%; margin: 20px auto; border-collapse: collapse; } — the table takes 80% of the page width, sits in the centre, and its borders merge into single lines.
• th, td { border: 1px solid #d97706; padding: 12px; text-align: left; } — every heading cell and data cell gets the same warm brown border, roomy padding, and left-aligned text.
• th { background-color: #92400e; color: white; } — the heading row gets a dark brown background with white text, so the column names stand out.
• tr:nth-child(even) { background-color: #fef3c7; } — every even row gets a pale yellow background, giving the menu its zebra stripes.
• tr:hover { background-color: #fde68a; } — the row under the mouse turns a deeper yellow, so the reader never loses their place.
• .price { text-align: right; } — the price column lines up on the right, which is how prices are normally read.