More Readability Tricks

This is a useful trick for making large amounts of data easier on the eye.

The bad code:

bc.

ID Name
1. Michael Moore
2. Rush Limbaugh
3. Bill O’Reilly

The bad output:

ID Name
1 Michael Moore
2 Rush Limbaugh
3 Bill O’Reilly
4 Matt Drudge
5 Al Gore
6 John Ashcroft

The good code:

bc. /* begin stylesheet.css */
/* our CSS classes: even and odd */
.even { background: #eee; }
.odd { background: #fff; }
/* end stylesheet.css */

ID Name
1. Michael Moore
2. Rush Limbaugh
3. Bill O’Reilly
4. Matt Drudge
5. Al Gore
6. John Ashcroft

The good output:

{background:#eee} ID Name
1 Michael Moore
{background:#eee} 2 Rush Limbaugh
3 Bill O’Reilly
{background:#eee} 4 Matt Drudge
5 Al Gore
{background:#eee} 6 John Ashcroft

To be a little more advanced, let’s say we are working with data from a large database where we have to output 500 (15 records/page) records of political pundits/figures.

Aside from the pagination functions, we want to keep the table’s readability in-tact.

bc. /* this is pseudocode */
for(i = 1; i
{
if(i mod 2 == 0) { // i is even, apply the ‘even’ CSS class }
else { // i is odd, apply the ‘odd’ css class }
}

I know the code is a little sloppy, but you get the point. The alternating row color effect is very possible and fairly easy to implement. Also – for those of you who don’t know, the ‘mod’ operand finds the remainder after division. It’s a ’%’ in pascal-based languages, and usually MOD in lesser languages like VB/ASP and Cold Fusion.

Advertisements

About andyhillky
I'm cool.

4 Responses to More Readability Tricks

  1. Clayton says:

    Wonder why I cant see the alternating colors? The bad code and the good code produce the same results!

  2. bofe says:

    Make sure you have a stylesheet in place.

    or, just fire up notepad and put this at the beginning:

    /* begin stylesheet.css */
    /* our CSS classes: even and odd */
    .even { background: #eee; }
    .odd { background: #fff; }
    /* end stylesheet.css */

    and then give it a try.

  3. I like the example but you should make one without the use of tables as well. Tables == The Enemy.

  4. bofe says:

    Chris,

    The same concept applies without tables. I just used tables for outputting tabular data.

    If your CSS has this:

    .even { background #eee; }
    .odd { background: #eee; }

    You can apply that class to any HTML element – like this:

    Jerry McGuire

    et cetera. That answer your question?

%d bloggers like this: