Once you have your table marked up correctly, it’s time to style it. This article is the first in a series featuring CSS design patterns that you can apply to your own tables, or read to learn from. All of the resulting tables show share the same basic markup:
CSS for a Grid Table
Make an HTML table look like an actual table.
| Position | Movie | Year of Release |
|---|---|---|
| 1 | Citizen Kane | 1941 |
| 2 | The Godfather | 1972 |
| 3 | Casablanca | 1942 |
| 4 | Raging Bull | 1980 |
| 5 | Singin’ In The Rain | 1952 |
Zebra Striped Table
Vertical division between columns, single line between rows, alternate colors on table rows, and highlight rows on mouse hover.
| Position | Movie | Year of Release |
|---|---|---|
| 1 | Citizen Kane | 1941 |
| 2 | The Godfather | 1972 |
| 3 | Casablanca | 1942 |
| 4 | Raging Bull | 1980 |
| 5 | Singin’ In The Rain | 1952 |
Rounded Corner Table
Linear gradient in table head, rounded corners on table. Gradient will need vendor prefixes to work in older browsers.
| Position | Movie | Year of Release |
|---|---|---|
| 1 | Citizen Kane | 1941 |
| 2 | The Godfather | 1972 |
| 3 | Casablanca | 1942 |
| 4 | Raging Bull | 1980 |
| 5 | Singin’ In The Rain | 1952 |