How to Use CSS to Style a Table

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 and a border. 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.

Header 1 Header 2 Header 3
Nam ultricies vulputate nisl. Nam ultricies vulputate nisl. Nam ultricies vulputate nisl.
Aliquam erat volutpat. Aliquam erat volutpat. Aliquam erat volutpat.

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.

A Nicer Table
Header 1 Header 2 Header 3
Nam ultricies vulputate nisl. Nam ultricies vulputate nisl. Nam ultricies vulputate nisl.
Nam ultricies vulputate nisl. Nam ultricies vulputate nisl. Nam ultricies vulputate nisl.
Nam ultricies vulputate nisl. Nam ultricies vulputate nisl. Nam ultricies vulputate nisl.
Nam ultricies vulputate nisl. Nam ultricies vulputate nisl. Nam ultricies vulputate nisl.

The striping of the table rows was achieved by adding a class with just two table styles - table width="100%" cellspacing="1" class="table-bordered table-striped".

More Table Row Striping


Article Date
Create A Basic Contact Form Dec 2007
Help in using CSS for web design Jan 2008
Redirecting site pages with .htaccess Feb 2008
Search Engine Optimisation Guidelines Jan 2008
Website accessibility guidelines Dec 2007
Using ems page styling Feb 2008
horizontal and vertical navigation Feb 2008
Get a free web template Nov 2007

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.

Read more articles about PC repairs, Web design & SEO...