CSS Table Padding and Hover

CSS Table Padding

To add space between the cell borders and the content, use the padding property on <td> and <th> elements.

Example

Each cell gets 10px of padding and left-aligned text.

Prompt
An HTML page that adds padding and left alignment to table cells. In an internal <style> block, collapse the table borders, make it full width, and give th and td 10px of padding with left-aligned text. Add a table with First Name, Last Name, Savings columns and a few rows.
Output: complete HTML page

CSS Horizontal Dividers

To add horizontal divider lines between rows, add a border-bottom to the <th> and <td> elements.

Example

A bottom border on each cell creates row dividers.

Prompt
An HTML page that adds horizontal divider lines between table rows. In an internal <style> block, collapse the table borders, make it full width, give th and td padding, and add a bottom border (1px solid #ddd) to th and td so each row has a divider line. Add a table with First Name, Last Name, Savings columns and a few rows.
Output: complete HTML page

CSS Hoverable Table

Use the :hover selector on <tr> to highlight a row when the mouse moves over it.

Example

Each row turns coral when you hover over it.

Prompt
An HTML page that highlights a table row when the mouse hovers over it. In an internal <style> block, collapse the table borders, make it full width, give th and td padding and bottom dividers, and add a tr:hover rule that sets a coral background. Add a table with First Name, Last Name, Savings columns and a few rows.
Output: complete HTML page

CSS Zebra-striped Table

For zebra stripes, use the nth-child() selector and give every even (or odd) row a background color.

Example

Every even row gets a light gray background.

Prompt
An HTML page with a zebra-striped table. In an internal <style> block, collapse the table borders, make it full width, give th and td padding and left alignment, and shade every even row with a light gray background using tr:nth-child(even). Add a table with First Name, Last Name, Savings columns and a few rows.
Output: complete HTML page

CSS Table Color

You can set a background color and a text color for the table, for example on the <th> elements.

Example

The header cells get a green background and white text.

Prompt
An HTML page with a colored table header. In an internal <style> block, collapse the table borders, make it full width, give th and td padding and left alignment, and give the th elements a green (#04AA6D) background with white text. Add a table with First Name, Last Name, Savings columns and a few rows.
Output: complete HTML page