Loading...

CSS Tables

HTML builds the grid of rows and cells. CSS decides whether borders look clean, how wide the table sits, how text sits in a cell, and whether rows are easy to scan.

A table CSS toolkit

📊 Table styles at a glance

Property Everyday job
border-collapse Merge cell borders (collapse) or keep them apart (separate)
border-spacing Gap between cells when borders are separate
width Stretch the table (often 100% in a card or article)
padding on th/td Breathing room inside cells
text-align / vertical-align Horizontal and vertical cell alignment

Style the table, th, td, and sometimes tr — not every cell one by one — so a whole data grid stays consistent.

Borders that do not double up

Without help, adjacent cell borders can look thick or doubled. border-collapse: collapse merges them into one clean line — the everyday choice for data tables.

Collapsed table borders

css
CSS Code 
table.data {
width: 100%;
border-collapse: collapse;
}

table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}

Separate borders and spacing

If you want a visible gap between cells, use border-collapse: separate and set border-spacing. Spacing is ignored when borders are collapsed.

Separated cells with gaps

css
CSS Code 
table.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}

table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}

Width, headers, and alignment

A full-width table often reads better in articles. Bold headers, center or left-align text, and use vertical-align when cell heights differ.

Header and cell alignment

css
CSS Code 
table.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}

table.data td {
text-align: left;
vertical-align: top;
}

Zebra rows and calm hover

Alternating row backgrounds help the eye track across wide tables. A light :hover on tr can highlight the active row without neon noise.

Zebra stripes + row hover

css
CSS Code 
table.data tbody tr:nth-child(even) {
background: #fafafa;
}

table.data tbody tr:hover {
background: #eef5ff;
}

A calm data-table habit

Collapse borders, give cells real padding, keep header contrast modest, and add zebra or hover only when the table is wide enough to need help scanning.

Readable article table

css
CSS Code 
article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}

Try it yourself

  1. Put border-collapse: collapse and a light border on th/td.
  2. Add comfortable padding inside cells.
  3. Left-align headers; try vertical-align: top on multi-line cells.
  4. Stripe even rows with tr:nth-child(even).
  5. Add a soft tr:hover background — then compare with border-spacing on a second demo table.

Common mistakes

  • Leaving default separate borders so lines look doubled and messy
  • Setting border-spacing while border-collapse: collapse is on (spacing is ignored)
  • Tiny padding that makes dense data hard to read
  • Neon hover or heavy zebra that fights the content
  • Mixing this lesson with list-style markers (previous session)

Summary

  • border-collapse: collapse is the calm default for data tables
  • Use separate + border-spacing when you want gaps between cells
  • Width, padding, and alignment shape readability
  • Zebra rows and light hover help scanning on wide tables
  • Keep structure in HTML; polish appearance with CSS

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 32 of 35
Css Tutorial