Formatting Tables Quickly

Posted in CSS, HTML, jQuery Tips
Tags: , ,

tablesWhen you have lots of data tables on a website and need to quickly format them so they are readable look at least somewhat not too boring a little CSS and jQuery can go a long way.

As we all know tables should be only used for tabular spreadsheet-like data but even then there are considerations to me made when trying to design them in a way that matches the rest of your site. So every situation will be unique but here is a sample that can be used as a starting point.

These styles add a thin border around all cells, put content vertically spaced, unique header background color, and consistent text alignment to the left.

Note: Always try to use percentages for width and ems for spacing.

If you need alternating background color rows while excluding the header row, adding a little jQuery does the trick:

 

Leave a Reply

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

*