Flash cards
Review the key moves
What is the main idea behind HTML Table Styling?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
tr:___-child(even) {Put the learning moves in the order that makes the concept easiest to apply.
Use CSS to make your tables look better.
HTML Table - Zebra Stripes
If you add a background color on every other table row, you will get a nice zebra stripes effect.
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
To style every other table row element, use the :nth-child(even) selector like this:
tr:nth-child(even) {
background-color: #D6EEEE;
}Note
If you use (odd) instead of (even) , the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.
HTML Table - Vertical Zebra Stripes
To make vertical zebra stripes, style every other column , instead of every other row .
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Set the :nth-child(even) for table data elements like this:
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}Note
Put the :nth-child() selector on both th and td elements if you want to have the styling on both headers and regular table cells.
Combine Vertical and Horizontal Zebra Stripes
You can combine the styling from the two examples above and you will have stripes on every other row and every other column.
If you use a transparent color you will get an overlapping effect.
Use an rgba() color to specify the transparency of the color:
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}Horizontal Dividers
| First Name | Last Name | Savings |
|---|
If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.
Add the border-bottom property to all tr elements to get horizontal dividers:
tr {
border-bottom: 1px solid #ddd;
}Hoverable Table
Use the :hover selector on tr to highlight table rows on mouse over:
| First Name | Last Name | Savings |
|---|
tr:hover {background-color: #D6EEEE;}