Make your tables more readable with Value Based Styling

Do you find it easy to check out tables with lots of numbers at the first glance? Probably not. You can make this easier by applying styling to the table, based on the values of the data.

I have created a css/javascript solution that does this automatically. It is ready-to-use, but if you want you, can also customize it easily.

Example: compare normal and styled versions

As an example, let’s compare a normal and styled version of the same table. (The table shows the increase and decrease of Browser market shares.) First, the normal, unstyled version:

Increase and decrease in browser market share 2002 – 2009

Quarter	Internet Explorer	Firefox	Opera	Safari	Chrome
2009 Q2	-4.00%	+1.90%	+0.05%	+1.12%	+0.71%
2008 Q4	-4.01%	+2.23%	+0.01%	+1.04%	+0.87%
2008 Q2	-3.56%	+2.59%	+0.09%	+0.90%	n/a
2007 Q4	-1.39%	+0.92%	+0.16%	+0.58%	n/a
2007 Q2	-1.93%	+1.42%	-0.10%	+0.60%	n/a
2006 Q4	-3.34%	+2.83%	-0.01%	+0.81%	n/a
2006 Q2	-1.85%	+1.67%	+0.03%	+0.45%	n/a
2005 Q4	-1.36%	+0.92%	+0.02%	+0.91%	n/a
2005 Q2	-4.11%	+4.42%	+0.01%	+0.39%	n/a

In this table, you can’t see quickly which browser is doing well and which isn’t. Now here’s the styled version of the same table:

Increase and decrease in browser market share 2002 – 2009

Quarter	Internet Explorer	Firefox	Opera	Safari	Chrome
2009 Q2	-4.00%	+1.90%	+0.05%	+1.12%	+0.71%
2008 Q4	-4.01%	+2.23%	+0.01%	+1.04%	+0.87%
2008 Q2	-3.56%	+2.59%	+0.09%	+0.90%	n/a
2007 Q4	-1.39%	+0.92%	+0.16%	+0.58%	n/a
2007 Q2	-1.93%	+1.42%	-0.10%	+0.60%	n/a
2006 Q4	-3.34%	+2.83%	-0.01%	+0.81%	n/a
2006 Q2	-1.85%	+1.67%	+0.03%	+0.45%	n/a
2005 Q4	-1.36%	+0.92%	+0.02%	+0.91%	n/a
2005 Q2	-4.11%	+4.42%	+0.01%	+0.39%	n/a

This table is much more scannable: it immediately tells you where the increases and decreases are the biggest.

How to implement in your own page

Implementing this is really easy. You’ll only have to do three things:

1. Include valuebasedstyling.css in the head of your page
2. Include valuebasedstyling.js just before the closing of the body element (if you want to include it somewhere else, make sure to read the comment at the end of the javascript file)
3. Add class="vbs" to each table you want to have styled automatically (vbs stands for valueBasedStyling).

This example page shows the most basic implementation. I’ve also created a zip-file with all the files you need.

Note that all td’s are styled automatically, so you should use th elements for your row and column headings.

How it works

For each table with the class vbs, the javascript checks the value of all td elements. That way, it can determine the minimum and maximum positive and negative values. It then assigns a class to each td, based on its value in relation to the minimum and maximum values. Seperate classes are assigned to td’s whose value is not a number (NaN) or whose value is zero.

Automatically calculated css rules for intermediate values

In the css file, styles are only defined for the minimum and maximum positive and negative values. The classes for the values in between are then calculated and created automatically.

Adding your own styling

If you want to customize the styling, you can do so by changing the css file. For positive and negative values, you only have to adjust the classes for the minimum (.vbs-posVal-1 and .vbs-negVal-1) and maximum (.vbs-posVal-Max and .vbs-negVal-Max) values. For each value in between, the script then calculates the color, background-color and font-size properties and creates a css rule for it.

You can adjust how many value scales are used for both positive and negative values. Just change the scales variable in the javascript file. The default is 5.

If you need your css-rules to have a higher specificity, then change the cssSelectorPrefix variable. This variable is added to every css rule.