HOME FORUM ARTICLES TUTORIALS SCRIPTS LINKS NEWS MENTORS TOOLS REGISTER

CSS for Dynamic Data Table Presentation

A tutorial by COBOLdinosaur

The table is the most misused and abused tag in HTML. Tables are not intended to be used for layout. They are specified the way they are for optimization for data table presentation. They do not have to be boring grids. Using CSS for Dynamic effects is a powerful and elegant tool for the developer.

CSS, Scripting and the methods available in the DOM, give the developer almost unlimited flexibility, and the opportunity to enhance the user experience. Consider this. Not all users have the same taste in color selection. Let's start by offering some simple options. A table with alternating row colors is simple. A couple of CSS declarations:

Instead of coding the classes on every row in the table and making maintenance difficult when we have to add or remove rows; we will just add the styling dynamically with scripting:

BUT... wait a minute! A web page should be about the user. Why not give them some options? With a tiny extra bit of coding we can give them:

All it took was a little extra CSS to define a set of row pairs instead of one:

We added some buttons to fire the switch:

[The buttons could also be text or image links] The final step is a slight modification of the script:

Shall we stop there, or can we make this little data table even easier to use and more appealing to the user?

We could allow them to highlight a column. An Icon in the headings and instant highlighting. While we are at it, we can use a mouseover event to show the current row. One final touch will be to dull the button for the currently active style.

What we will have is this:

Style 1 Style 2 Style 3 Style 4

Project Name	Description	Start Date	End Date	Required Skills
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA
DATA	DATA	DATA	DATA	DATA

Let's look at the changes starting with the HTML.

• The heading <th> tags get and image added to carry the click event:
  

  <th>Description <img src="http://www.expertsrt.com/images/hilite.gif"
   onclick="hiliteCol(1);return false;"></th>

• Each of the data rows gets a pair of mouse events:
  

  <tr onmouseover="setAction(this,true);" 
      onmouseout="clearAction(this,false);">

• The CSS gets 4 new declarations:
  

   // a style for the default settings
  .default {background-color:white; color:black;}
  // a style for the mouseover of the active row
  .actionrow {background-color:navy;color:white;}
  // a style for the cells in the highlighted column
  .cellHi {background-color:lightyellow;color:blue;}
  // a style for the button that has activated the current style
  .butdown {background-color:silver; color:white; }
  

• The biggest changes are in the scripting. To start, we need to add some global variables:
  

  var lastval=99;
  var lastCol=-1;
  var lastclass='';
  

• The setcolor() code gets more complex because we now have to set the active style when a button is clicked.
• We need to add a function to highlight the column that is selected.
• We need Set and Clear functions to handle the active row highlight

AND... we are good to go. The script ends up looking like this:

There are all kinds of possibilities and we could end up with a 20 page article if we explored them all. Much better than that is experimenting. You have the basics and code to work from. Try different CSS, tagging or scripting. The most enjoyable part of web development is the experimentation and moments of personal discovery.

Play with this table. Have some fun. Be glad you are a developer who gets to play on the web every day.

© Copyright COBOLdinosaur 1999-2007

Search ERT on the Tools Page