Flash cards
Review the key moves
What is the main idea behind CSS 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.
___: 10px;Put the learning moves in the order that makes the concept easiest to apply.
CSS Table Padding
To add some more space between the inner borders and the content in a table, use the padding property on <td> and <th> elements:
| First Name | Last Name | Savings |
|---|
Example
th, td {
padding: 10px;
text-align: left;
}Live preview
CSS Horizontal Dividers
To create horizontal dividers for a table, add the border-bottom property to <th> and <td> elements:
| First Name | Last Name | Savings |
|---|
Example
th, td {
border-bottom: 1px solid #ddd;
}Live preview
CSS Hoverable Table
Use the CSS :hover selector on <tr> to highlight table rows on mouse over:
| First Name | Last Name | Savings |
|---|
Example
tr:hover {background-color: coral;}Live preview
CSS Zebra-striped Table
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:
| First Name | Last Name | Savings |
|---|
Example
tr:nth-child(even) {background-color: #f2f2f2;}Live preview
CSS Table Color
The example below specifies a background color and a text color for the <th> elements:
| First Name | Last Name | Savings |
|---|
Example
th {
background-color: #04AA6D;
color: white;
}Live preview