Data Tables In Modern Web Design

28 Dec 2009

By Matt Cronin

Being able to organize data and information is a skill not to be overlooked. The way you organize content and text, generally referred to as copy, has a direct effect on how that content is received by users. You must find a way to organize information so that it is scannable and can be quickly absorbed by the reader. One way to organize information in a clean way is to use data tables. Data tables provide a structured way of showing large amounts of information.

Data tables have been in use since the beginning of Web development. The structure of the table hasn’t changed — and will not change, because, well, it’s a table. But even though the structure has stayed the same, styling has come a long way; and recent tables are just as readable as the early ones.

Common Uses Of Data Tables

Tables make organizing information in a clean and readable way very easy. They can be used to store and show large amounts of information, small amounts of information, static data and even data that is constantly changing.

Because of the chart-like layout of tables, they are extremely useful for making comparisons. Many websites use them to compare products, services and, as mentioned, pricing plans.

The table below on Apple’s website compares all of the MacBooks. The chart contains a large amount of information, yet it is still organized and easy to read through. It is an extremely simple table but looks nice because of the good spacing and borders. Also, notice how images of the laptops are included and important information is bolded. This makes the table very scannable.

Data tables are often used to compare pricing plans. They provide space to show the names of plans, prices and the unique features of each plan. Most often, tables showing pricing plans contain a column for each plan and a row for each feature. Then, inside each cell is a marker indicating whether the plan comes with that specific feature.

Finally, tables often appear on TV network websites to shows schedules. These are a little different than typical tables; the cells are of various sizes due to staggered viewing periods. Other than that, schedule tables follow the exact same structure.

Components Of A Useful Data Table

Although almost every user knows how to make sense of a table, you can still do a few things to take yours to the next level of usability.

Titles + Labels + Data = Data Table
Obviously, a data table consists of columns titles, rows labels and the actual data in the cells. A table should be nothing more and nothing less.

When adding color, you should make the cells contrast with labels and titles. Make the background color for labels and titles different than the one you use for core data. This makes the table much easier to read and eliminates confusion.

The table below by Goplan uses a darker color for column titles and row labels. Notice how reading this table is much easier because of the contrast.

Stick to a Simple Grid
All tables are grids, and they work nicely that way, so why do anything different? Grids are efficient because you can fit a large amount of information in a small area and the viewer is still able to read the content easily.

Use Icons
Icons are an excellent way to cut down on boring text on a page. Icons can also help organize data tables.

The table below makes excellent use of icons and looks very clean. Check marks and crosses are used instead of “Yes” and “No.”

Don’t Leave Blank Spaces
Tables often have cells to which data does not apply. Avoid simply leaving these spaces blank; instead, fill them with an marker, such as a cross (X), icon or, as in the table below, dashes.

This clean table uses three dashes to indicate that data does not apply to a cell; this looks much nicer than leaving an empty space.

Highlight Important Columns and Rows
Many data tables highlight columns and rows that provide particularly important or useful information. In pricing charts, you will often see the best plan highlighted. Take a look at the table below. The most important row — the schedule for the day on which the table is being viewed — is highlighted with a thick border and different background color.

Working With Larger And More Complex Data Tables

So far, we have focused mainly on small and simple data tables, but what about large, complex and data-heavy tables? There are many usability considerations that are specific to large data tables.

Make Columns Movable
Data tables figure prominently in many software applications, both Web-based and installed. Generally, developers will create tables so that columns can be moved and organized in any way desired by the user. Also, applications usually allow users to add and remove columns.

Allow for Reordering of Columns
In tables with a lot of data or data that changes frequently, you should give users the ability to reorder content and cells. The most common variables by which you can order data include date, alphabet and importance.

Provide Search for Large Tables
If data is extensive and the table very large, then a search box should be provided. This will improve the overall usability of large tables and make finding data much faster.

Provide Different Views
If your table contains information with thumbnail images or other visual content, another usability feature you can include is the ability to view that information in different ways. Provide options to view all text, both text and thumbnails or only thumbnails.

Take a look at this Flash-based data table. It provides many of the features that work well with large tables, as mentioned, including search, reordering options and different views.

Styling Data Tables

Styling, or lack of styling for that matter, plays a big part in how a user views a table and absorbs the data. Keep in mind, though, that it’s still only a data table and should not be overloaded with styling. Keeping it simple and readable should be your overall goal. Shadows and artistic borders may work with other elements in a layout, but stay away from them with data tables. Here are a few styling elements that work better for data tables.

Alternate Colors
The most important characteristic of any data table is readability. One way to achieve this is by alternating colors for columns and rows. This makes it easier to read and more scannable.

The data table below is very well laid out. The rows of the table alternate colors, providing a clean, flowing, efficient layout. It has a lot of information but is still readable.

Borders
Separating cells with borders is extremely important. Borders make data much more readable and can eliminate confusion. With a lot of information, data in different cells can seem to blend together as one, but you want to keep them separate.

Ample Spacing
Like borders, spacing between data contributes to usability. In each cell, leave sufficient padding between the border and data. Use at least 20 pixels of space.

Simple Background Colors
Good data tables are all about readability, as we keep saying. Color and readability often go hand and hand. Data tables should always be simple, and one way to be simple is to use simple colors. Avoid using bright, obnoxious background colors that reflect poorly on the data being presented.

Showcase Of Data Tables

As promised, here are some websites that get data tables right.

Quantcast
A clean and basic table with nice fonts and a good color palette.

JukeFly
A large Flash-based data table with many usable features and user-friendly styling.

eWedding
A beautifully styled table that is still clean and readable.

Media Temple
A minimalist table with good use of icons, which provide an effective visual alternative to text.

iTunes
Data tables are everywhere, not just on the web. Applications such as iTunes use data tables.

Mosso
A very nice table, with pleasant colors and icons and alternating background colors for rows.

Zibler
A data table made with Flex that has search, movable columns and reordering options.

Cleartrip
Here is a complex table with a lot of information, but it can still be read with ease. Also note that the table has sorting and ordering options for columns.

Realmac Software
Shopping cart areas are also built on a grid system. Here is one example from Realmac Software.

MT Support
This table makes good use of color and contrast.

CBS
Here is the CBS Network’s schedule.

Long Term Clients
A smooth table with excellent styling, a clean layout and alternating colors.

Media Temple
Another nice table from Media Temple, this one combining visual elements and text in a flowing table with readable data.

Fox
A data grid is used for the schedule on Fox.com. Notice again how the schedule for the current day is highlighted.

Quommunication
Many forum home pages are structured as a table. Here is just one example.

Viget
A well-structured and well-organized table.

Joomla! Forum
Another example of a table on a forum landing page.

About the Author

Matt Cronin is a freelance Web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon.

(al)

Go to Source

Tags: content, Data, data tables, Don, information, information data, macbooks, Matt CroninBeing, network websites, static data, table, way

5 Responses to Data Tables In Modern Web Design

Bernard L

March 19th, 2010 at 2:36 am

Suppose I announce that from a knowledge of just one reliably measurable factor, I can predict a child's mental age very closely to more complex measures. Neat, huh? Then I announce that the wonderful new factor I have chosen is shoe size! Well, you can see that there's no big deal here. It makes it a fact of life that, as shoe size increases with time, so does mental age, but there's absolutely no mental ,theoretical or unknown construct here. It lacks construct
validity. Now if I demonstrate that I can account for 60% of the variance in SAT scores from a knowledge of astrological birth signs , I've got something just screaming for a construct to be articulated where none has gone before. But there's no construct validity yet.
Finally, if I can predict with reasonable accuracy one's senior year high school academic standing from a knowledge of family income,
My research paper would almost surely explain the construct (or a construct anyway) that accounts for this, and for which validity is believed measurable. This way oversimplified, but you get the idea.

envision_man

March 20th, 2010 at 4:40 am

This is a huge topic that cannot be completely covered here. I am a commercial Realtor in Texas, and I deal with development and raw land deals on a regular basis. CAP rate scenarios only truly apply to existing, income-producing properties. All you can do with raw land is create a prospectus. A prospectus is basically a business plan with a bunch of variables, one of which can be a CAP rate on the investment. This is directly tied to the NOI (annual Net Operating Income), which insinuates that the development is already built.

A developer has 2 ways of making money based on a CAP rate. The first is to hold the property over a long period of time, and collect revenue (like a landlord). The second is to fill the spaces (like in a retail center) and establish cash flow, and then sell the property to an investor on a pure CAP rate calculation. These two methods are very different in planning and execution.

Over the long term, a developer will try to get around a 15% return (not truly a CAP rate here) on his initial investment. That means that if they plan to spend $10,000,000 buying the land, building the building, paying commissions, paying management fees, etc, then they should earn an income of $1,500,000 in year one (before debt service, aka the loan payments). Because there are so many risks involved, the percentage must be high.

If the developer plans to sell right after leasing all the spaces (like in a retail center), then they sell the building based entirely on the CAP rate. If the building is 90% leased and earning $1,500,000 a year (after expenses), then they could likely sell to an investment group at an 8% CAP rate, which equals $18,750,000. If it only cost them $12,000,000 to build, then they profit over 50% on the deal (although this is not a CAP rate… it is a profit margin).

Without knowing where you are, it is impossible to guess what construction costs are. Also, the different developments vary immensely in price per foot, so it is impossible to speculate.

If a real estate group is advertising a raw piece of land with a CAP rate, just ignore it… it is just bad marketing. You cannot do a CAP rate this way at all. The only way this could be done is if the site plan is already done and approved, which shows exactly what sort of buildings are to be built and what sort of zoning is allowed, and perhaps if there are already leases signed in advance. But even then, there is no way to predict exactly the costs to build, so the conversation is moot.

In other words, the only person that can predict the CAP rate of any property is the developer himself. Any rates determined by others is just a marketing ploy.

If you would provide more specific info on what you are looking for, I might be able to assist you further. It would be good to know the following:

-What part of the country/state you are in
-How big of a development you are talking of
-What use specifically are you wanting (a retail prospectus is completely different than a self-storage prospectus)
-Are you looking at this from the seller's perspective, or the buyer's?
-Will this be an in-fill project (other parcels nearby are all occupied) or a pioneer project (lots of other vacant land in the area).

That's all I have for now.

Jay

March 20th, 2010 at 6:57 pm

Give the div or table a fixed width, e.g., <div style="width:1200px">. (You can generalize this by using a style tag in the head of your document or by referencing an external stylesheet (CSS file)).

From a usability perspective, however, this isn't a great idea. You should either set a flexible width (e.g., percent or em), or set a fixed width that's small enough to fit in the smallest resolution you're targeting, e.g. 800px.

hippiechick

March 21st, 2010 at 8:51 am

To protect the artwork you have just done on the table i would recomend you use a good few coats of laquer or clear varnish this will protect your picture and seal the table from unwanted staining. hope this helps a bit.

March 24th, 2010 at 8:03 pm

If your wireless network uses no encryption (no password) or if it uses the weak WEP encryption then it is trivial for someone to see not only websites, but passwords, emails and chat conversations which are not encrypted by the software that sends them.

If you are using WEP, change your router to use WPA or preferably WPA-2, because WEP passwords can be cracked pretty easily, and then it's just a case of sniffing all the web pages you visit right out of the air.

WPA offers the ability to give each user their own key if you wish, and the added security of the stronger encryption means it really will be only 4 people on your network.

Programming Blog