CSS Design Patterns For HTML5 Tables

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.

Zebra Striped Table

Vertical division between columns, single line between rows, alternate colors on table rows, and highlight rows on mouse hover.

Rounded Corner Table

Linear gradient in table head, rounded corners on table. Gradient will need vendor prefixes to work in older browsers.