How to make nice tables in CSS

This is mostly for my own future reference, but I thought I’d share this with the public as well.

pretty-tables

 

The Problem with Tables

The problem with tables is that they can be a little bit confusing to style with CSS, so therefore I made this reference for you all, take a look at the CSS snippet below, each individual style is commented to tell which part of the table it will style, copy paste it into your own project and modify it as needed, if you have any questions, feel free to leave a comment.

 

Pretty Tables in CSS

The gradient in the table header row was generated using ColorZilla’s CSS Gradient Generator.

Here is a live demo: http://test.helgesverre.com/pretty-table-css/

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *