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; }