Floating Headers for Tabular Data

Ashley McKee

August 2nd, 2007

Handling and presenting large amounts of data is often a challenge many organizations are faced with. There are issues such as the number of fields that must be shown, the height and width of the cells the data must fit in, visual noise and redundant content, filtering and sorting mechanisms, vertical and horizontal labeling, and, of course, vertical and horizontal scrolling when tables become large.

The U.S. Census Bureau has an interesting way of handling one of these complexities associated with displaying large amounts of tabular data. At the top of many of their population characteristic data sheets, the Census Bureau site designers have installed a very nice header that tells you which data sheet you are in, the population estimate for the certain characteristic you are looking at, and the margin of error. In this case I was looking at general demographic characteristics for 2005.

Census Bureau Floating Header 1

As you begin to scroll down the page, the header moves along down the page with you, not only reminding you what it is you’re looking at, but also providing a mechanism to clearly read across the table without getting the different subcategory or number rows mixed up.

Census Bureau Floating Header 2

How do you handle the complexities associated with large amounts of tabular data? What do you think of the floating header? What do you think about the design of the rest of the tables?

8 Responses to “Floating Headers for Tabular Data”

  1. Marla Erwin Says:

    There isn’t much visual indication of the header’s “floatingness” — i.e., it is hard to tell there is any data above the first visible field. Otherwise though the concept is a good one, and the more columns in the table, the more valuable it would be.

  2. Jeff L Says:

    Very interesting – but only from a screen users perspective. What they have done is actually duplicate the header in the source, so it’s on the page twice. Would be fairly confusing for someone using a screenreader. Also, they duplicated the code exactly, so the id’s of the table cells are the same (nevermind that it should be table headers, not table cells).

    I’d love to see something like this implemented with a little more thought for the accessibility side of things as well.

  3. Joseph Selbie Says:

    Ashley,

    You can accomplish this same thing by putting the table in an i-frame and having the module that contains the table spawn it’s own scroller below the header. (This actually requires an i-frame within an i-frame — and in some case i-frame within i-frame, within i-frame…but you get the idea.) We’ve used this quite a lot. It would think it would feel a bit more “stable” for a user than the “floating” header.

    Joseph Selbie
    CEO, Founder Tristream
    http://www.tristream.com

  4. Claude Says:

    They could have accomplished the same thing by splitting the data into multiple tables for the different categories, simple and easy for the screen user while remaining accessible.

    It would a different story if they had to display thousands of records, such as daily closing values for the Dow Jones Industrial Average since its inception in May of 1896. That dataset has just under 28,000 rows of data, so the only usable solution is to paginate (1,397 pages of 20 rows each) and enhance the experience with Ajax for those browsers that can handle it.

  5. Iacovos Constantinou Says:

    I could not agree more with you Claude. In my opinion, this is a bad example of presenting tabular data. As someone can see, the table contains numerous subheaders and subsections like “Sex and Age”, “Race” etc; each section could be presented as a single table that contains info regarding a single category.

    Anyway, as Clause suggests pagination appears to be the best solution but if for some reason you want desperately to display all rows in one page Pure CSS Scrollable Table with Fixed Header is probably what are you looking for.

  6. blog.dsetia.com» Blog Archive » Floating Headers for Tabular Data Says:

    [...] Handling and presenting large amounts of data is often a challenge many organizations are faced with. There are issues such as the number of fields that must be shown, the height and width of the cells the data must fit in, visual noise and redundant content, filtering and sorting mechanisms, vertical and horizontal labeling, and, […] Source: [Link] [...]

  7. scupp Says:

    Just wondering about any user validation anyone has performed on these scrollable divs for long tables? What level of efficacy does the user generally need to have in order to assume they notice the scrollbar and understand that there is more data below the view visible? While I think all web users are familiar with the individual component of a scrollbar, do they translate that knowledge to internal page components cleanly?

  8. Kendall Says:

    I’d take a different perspective to the situation. If you’re dealing with so many rules it is very likely that the user does not wish to read all records (rows). So don’t show everything, only show what the user wants. Provide search or filter type options, maybe have the user pick a category that limits the resulting amount of data to show to the user. Specific solution would vary considerably depending on the situation. This may not always be a possibility, but it is more often than not if the right people involved in the design.

    The floating header is nice, but needs work as implemented here, for reasons others have already elaborated on.

Add a Comment