Summary - Data table

Build a professional data table with table styles.

Data table intro

In this group you learned table styling: border-collapse and padding for the skeleton, th styles for headers, :nth-child(even) and tr:hover for row emphasis. Now we combine them into a professional data table.

The target: a sales report table. Column headers dark, rows zebra-striped, hovered row highlighted. Every piece in its place.

Exercise Build the sales report table

Build a table with class .rapor: add border-collapse: collapse; on .rapor; add background: #1e3a8a; and color: #ffffff; on .rapor th; add padding: 10px; on .rapor td, .rapor th.

Show example solution

open three selectors. Write border-collapse: collapse; inside .rapor. Write background: #1e3a8a; and color: #ffffff; inside .rapor th. Write padding: 10px; inside .rapor td, .rapor th.
Example solution:
.rapor {
  border-collapse: collapse;
}
.rapor th {
  background: #1e3a8a;
  color: #ffffff;
}
.rapor td, .rapor th {
  padding: 10px;
}

Exercise Add zebra and hover to the sales report

To the same .rapor table, add zebra stripes and a hover row: write background: #f1f5f9; on .rapor tr:nth-child(even); write background: #e0e7ff; on .rapor tr:hover.

Show example solution

open two selectors. Write background: #f1f5f9; inside .rapor tr:nth-child(even). Write background: #e0e7ff; inside .rapor tr:hover.
Example solution:
.rapor tr:nth-child(even) {
  background: #f1f5f9;
}
.rapor tr:hover {
  background: #e0e7ff;
}

Test yourself

Which is preferred in a professional table?
```
/* the ? combination fits a professional table */
```
- A separate border color per cell
- border-collapse: collapse and zebra stripes
- The same background on every row
- A table without headers
Show answer

border-collapse: collapse and zebra stripes — Correct! Merged borders and zebra stripes are the heart of a professional table.
Match the table concepts

border-collapse

border merging
th

header cell
:nth-child(even)

zebra stripes
tr:hover

hover row

Value for zebra

.rapor tr:nth-child(even) {
  background: ____;
}

Show answer

.rapor tr:nth-child(even) {
  background: #f1f5f9;
}

Next lesson: What is SVG?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies