At QBS PC Help we do not use tables to design websites 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 elements and a bit of colour.
| 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 is achieved by adding just a few CSS styles.
tr.diff {
background-color:#FFFFCC;
text-align:center;
}
tr.diff2 {
background-color:#FFCC66;
text-align:center;
}
tr.diff3 {
background-color: #CCCCFF;
text-align:center;
}
You then just add the appropriate class to each table row (<tr>).
Another great use for tables is in producing calendars. Because calendars have columns and rows they are the perfect use for a table layout and CSS styling. Here's an example of a what can be achieved.
| Mon | Tues | Wed | Thur | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
1 |
2 |
3 |
4 |
5 |
6 |
|
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
| 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 stronger colours and the use of a semi transparent background image for alternating rows (i.e. the lighter rows are the same background colour as the heading background colour but with the transparent image applied). The image was created using Fireworks and is simply a white 5x5 pixels image with opacity reduced to 20%, saved as a .png.
Warning - Internet Explorer has trouble with png background images prior to version 7. So if a site visitor using IE 5 sees this table the nice effect will not be seen. To counteract this it's good practice to add a backround-color, that's equivalent to the faded colour, to the CSS table row (tr) that already has the image attached.
You could also add Internet Explorers proprietary conditional comments to fix the problem.
Here's the last table style and all that's been added is a colour change (i.e. the transparent background image has been removed) and a couple of extra CSS styles which add a chunky border and remove the default inner table borders:
border: 8px solid #6699CC;
border-collapse: collapse;
| 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 full CSS for all these table styles can be viewed here.
So tables needn't look dull and boring if you use CSS to smarten things up.
And by using tables in the way they are meant to be used you can design truly accessible web sites using CSS and XHTML that incorporate stylish tables to display the sort of information for which they're suited.