Topic: Design Tips for sites heavy on tabular data

I'm a programmer; I write code.  Graphic design is decidedly NOT one of my talents.  But, like many of you other programmers out there, I don't have the luxury of a designer at my disposal so the task of putting together a user interface falls to me.

Despite being bad at it, web page design techniques are actually a pretty interesting topic to me.  I've read a ton of stuff out there on that there intraweb on the subject.  I've looked at countless layout templates and always try to quantify to myself what exactly appeals to me when I come across a web site with a design I like.

But I've got a problem:  The knowledge I've absorbed is almost never applicable to my own projects.  You see, when you come across those design sites they nearly always focus on how to present paragraphs of text.  They show you blogs, news sites, etc.  My two primary web application projects don't fit that mold.  Each page of my application is typically presenting tabular data.  I'm talking at least 6-7 columns of data wide.  Mostly numeric.  The blocks of text in these pages are typically limited to brief blurbs describing what you're seeing the table.

I haven't found anything out there that talks about effective ways of presenting stuff like this.   Anything that gives actual design examples of such.  Something I can look at to get ideas and inspiration and *cough*steal*cough*.

So I appeal to you.  Have you come across anything like I'm looking for? Do you have your own tips, tricks, and techniques that you'd like to share?  I would love to hear them because I'm sick of looking at my hard work and feeling like I'm back in 1998.

Re: Design Tips for sites heavy on tabular data

I've gotten some past inspiration from
maybe that helps you.

Re: Design Tips for sites heavy on tabular data

I think mint ( is a great example of how to manage a lot of data.

Also, for great inspiration (not necessarily with data though) I like: … -guide.cfm … e-without/



Re: Design Tips for sites heavy on tabular data

Below is a snippet of actual CSS from my (beta) site.

This code presents my information vertically, but it wouldn't take much to display it horizontially.

#battlepanel {
    border: 2px solid #000;   
    padding: 5px 0 5px 2px;
    margin: 5px 0 0 0;
    width: 60%;
    background: #999900;

    width: auto;
    font-size: 1em;   

    float: left;
    font-size: .75em;   
    width: auto;
    margin-left: 5px;   

...and the HTML looks like this...

    <div id = "battlepanel">
        <div id ="battleheader">
            Battle ID:<%= %>
        <div id="battledetail">
                presentation detail here

When creating my pages I sketch out (pencil/paper only) how I think the information would look. I then translate that sketch using <div> blocks into my HTML pages and as a piece of scaffolding I use the CSS instruction

border: 1px solid #000;

- which will frame each of the <div> commands and provides a visual reference as to the page layout.

Hope this helps :-)


Re: Design Tips for sites heavy on tabular data

If you have a lot of really wide tables in your apps, I suggest not having sidebars or anything like that. Try to keep your main navigation as a bar or two across the top of the page so the tables have more room to "breathe". The last thing you want is scrolling on a 1024x768 or higher screen because you wanted to add supplemental navigation on the left or right.

I also tend to find that apps like these which are heavy on tabular data shouldn't necessarily be as "pretty" as say, a blog or a photo gallery site. Your users are there to get work done I assume, so stick to the basics and don't worry about having huge gradients everywhere.

vinnie - rails forum admin

Re: Design Tips for sites heavy on tabular data

Thanks for the replies everyone.