Table Cells in CSS - Padding, Zebra, and Hover

After setting up the table structure, the most important step is styling the cells themselves. Proper styling of th and td makes data easier to read and more professional.

If you are looking for table cell styling in CSS, zebra table in CSS, or table row hover effect, this lesson is for you.

Why Cell Styling Matters in CSS

Tables without padding and contrast are visually tiring. With a few simple tweaks, they become clear and easy to scan.

Simple definition: Table cell styling in CSS means improving th and td so data is easier to read.

1) Padding Inside Table Cells

The first essential step is adding padding to cells.

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

What does this code do? Adds space inside each cell and aligns text right for Arabic tables.

Expected result: the table feels less cramped and easier to read.

Common mistake: leaving cells without padding so text touches borders.

2) Styling the Table Header (th)

Header rows should stand out so users can understand columns quickly.

th {
    background-color: #0d6efd;
    color: white;
}

What does this code do? Highlights headers with a blue background and white text.

Expected result: clear distinction between header and data rows.

Common mistake: choosing a header color too close to the row background, reducing contrast.

3) Zebra Stripes with nth-child

Long tables are easier to read when rows alternate colors.

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

What does this code do? Colors even rows with a light background.

Expected result: easier row tracking in dense data tables.

Common mistake: applying nth-child to all rows and affecting the header unintentionally.

4) Hover Effect for Table Rows

Hover effects help users track the row they are reading.

tbody tr:hover {
    background-color: #e5e7eb;
}

What does this code do? Changes the row color on hover.

Expected result: better interaction and readability in large tables.

Common mistake: using a very strong hover color that hurts text contrast.

Common Mistakes with Table Cells in CSS

1) Header not distinct: columns are hard to understand.

2) Missing alignment: especially in Arabic tables where right alignment is expected.

3) Too many colors: reduces data clarity.

FAQ - Common Search Questions

How do I add spacing inside table cells?

Use padding on th, td.

How do I make zebra tables in CSS?

Use tbody tr:nth-child(even) to color even rows.

How do I change the table header color in CSS?

Apply background-color and color to th.

How do I add hover effects to table rows?

Use tbody tr:hover { ... }.

Why is my table hard to read even with borders?

Usually because of missing padding, low contrast, or a header that is not styled.