Why this site looks better in Firefox
Thumbnail
Borrow my code

Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, and other help sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from coboldinosaur.com a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Dzone icon Reddit icon Facebook icon RSS Icon

COBOLdinosaur


Modern Table Styles Part II

Author: COBOLdinosaur

This article is a continuation of an earlier piece that explored modern table styling. Here we will extend that to examine some of the advance techniques available to professional web developers. I'll just repeat one thing from the previous article, because it is important. Tables are for the presentation of tabular data. Do not use them for layout. There are plenty of ways to do layout using CSS and a range of semantically correct tags like ul, ol, nav, div, section, aside, etc.

Most of the time when I see tables in a page it either lacks a title, or the title is done with some variation of:


      <p>Table Title</p>
      <table>... table detail ...

Most developers have either forgotten the caption tag or don't know how to use it. It exists to apply a title to tables with built in semantics that improve accessibility. Use it:


     <table><caption>Table Title</caption> ... 

It is no more work than doing it wrong, so why hurt accessibility with nothing to gain. The CSS properties caption-side {top or bottom} and text-align can be used to control the positioning. The caption must be the first tag following the table tag.

Now consider these formats:

Location A Location B
Ranges 1/2 1 111
112 1001
MIN 1 111
MAX 112 1001
This is a caption
Location A Location B
ye:2010 ye:2011 ye:2010 ye:2011
Ranges 1/2 1 111 / 4 212
112 1001 106 1101
+/- 213
MIN 1 11 222
MAX 1121 1021 121 1221

Here we merge cells in the first column vertically by using rowspan, and merge cells in the first row of headings with colspan.

Notice that the number of td or th tags are reduced when we use rowspan and/or colspan. The conventional thinking is that the number of cells must be the same for every row; not true. The number of cells defined must merely take into account that a cell with rowspan or colspan is defining more than one cell. Just do the arithmetic.

You can define any number of different presentations by using rowspan and colspan. When you need a complex presentation, do not fall into the trap of nesting tables. That is the road to ruin, and causes a slower page load on some browsers. With rowspan and colspan there should never a situation where the presentational structure requires table nesting. It you find yourself looking at nesting a table, you need to re-evaluate the design.

Just because the th tag is for defining headings, it does not mean that they are restricted to being across the top of a table. They can be where they need to be. Left column for tables that read across or repeated in the middle of a table that is too long for the heading to stay on the screen.

This is a caption
Location A 1/2 1 111
Location B 112 1001 1111
Location C MIN 1 111
Location D MAX 112 1001
Location A Location B
ye:2010 ye:2011 ye:2010 ye:2011
Ranges 1/2 1 111 / 4
112 1001 106 213
ye:2010 ye:2011 ye:2010 ye:2011
1 11 222 999
1121 1021 121 1221

That second problem can also be solved by using a scrollable table with fixed headings. There is a snippet that shows how to do that though it is not a true table; but rather a scrollable grid structure.

In the first table tutorial, we did alternating rows by applying classes to odd and even rows. We did it that way so we could do dynamic effects with scripting. The problem with that method is that it requires a lot of coding to apply the attributes to each individual row. Even if it was static, every row would require a class or inline style to be coded. A much simpler way is to directly target odd and even rows with CSS. You can also do columns with just a little bit of HTML/CSS:

Location A Location B
ye:2010 ye:2011 ye:2010 ye:2011
Ranges 1/2 1 111 / 4
112 1001 106 213
112 1001 106 213
1 11 222 999
1121 1021 121 1221
112 1001 106 213
1 11 222 999
1121 1021 121 1221
Location A Location B
ye:2010 ye:2011 ye:2010 ye:2011
Ranges 1/2 1 111 / 4
112 1001 106 213
112 1001 106 213
1 11 222 999
1121 1021 121 1221
112 1001 106 213
1 11 222 999
1121 1021 121 1221

The alternating rows are dead simple all it takes is two short rules in the CSS:


    #altTab tr:nth-of-type(odd) td {
                        background-color:dodgerblue;
                                            } 
   #altTab tr:nth-of-type(even) td {
                        background-color:silver;
                                             }

The "altTab" id is applied to the tbody so the headings are not affected. If we applied it to the table, it would still apply to just the rows in the tbody because we are targeting the individual td tags, and the th tags in the heading would not be affected, however using a shorter cascade from the tbody is a little more efficient and keeps the options open for styling heading rows.

It is slightly more work for alternating columns. There is an extra bit of HTML structuring required:

The colgroup and col structure is like a directive that specifies table formatting outside of the normal flow. Notice that the col tags do not get closed in HTML5, and the cascade is irregular. Normally the cascade applies to children, but the rows and cells in the table are not children or grandchildren of the col or colgroup. The relationship is more like stepchildren. Because of the irregular relationship, the CSS specificity appears to be quirky. Its not really, but it is not always as expected. To insure the the correct application of both the colgroup rules and the other rules being applied to the tr and td tags the colgroup rules should be applied in line, or be the final rule in the style entries.

One of the problems with having these capabilities available is that it can lead to over styling. Keep in mind that the presentation of tables is intended to enhance the user experience. It should not be used to show off your skills and do effects that add nothing but distraction to the user. Best practice is to do the table and then add one CSS declaration at a time and when you reach the point that it does not improve readability ... STOP!

The formatting capabilities also put temptation to do table based layout in front of the developer. Don't do it. it is stupid to revert to a 20th century technique and create maintenance problems because it looks easy. CSS for layout is easier, more easily maintained and using a table for layout makes the page semantically defective and that can hurt SEO; plus it creates performance issues in some browsers.

In the next article in this series on tables we will be exploring the DOM methods that turn tables to dynamic components, and provide easy traversal through the matrix. We will also look at using style sheet manipulation and how the stylesheet object properties apply to tables.

If you found this article helpful you might also be interested in:


Got an idea for an article? Author Guidelines

To comment on this article LOGIN or REGISTER FOR FREE