Table Layouts Using CSS and Bootstrap

At QBS PC Help we do not use tables to design website's as keeping the content and styles separate (XHTML and CSS) produces a quick loading site that's search engine friendly and far more accessible than a table based layout.

We do use tables to contain data that's best served via a table. So rather than a plain table lets look at a few ways to smarten up our table displays, using CSS.

Here's a basic table with 3 columns and 3 rows. This is certainly useable and can contain any sort of tabular data. You can still see these sort of table layouts when you surf the Internet.

Of course we could improve on this by using additional table styles and a bit of colour.

This site was built using the BootStrap Framework so using table styles is a simple way to improve the look and feel of any table layout.

The striping of the table rows was achieved by adding a class="table-bordered table-striped".

More Table Row Striping

The above table is more or less the same as the previous 'Nicer Table' with the use of of an added hover effect

The final results

So tables needn't look dull and boring if you use CSS and the Bootstrap Framework to smarten things up.

And by using tables in the way they are meant to be used you can design truly accessible website's using CSS and XHTML that incorporate good looking tables to display the sort of information for which they're suited.