/CSS/ Create collapsible tables
19/10/2009 | Filed under Develop > CSS
Craig Grannell shows you a nifty technique to collapse the body area of website tables, using a combination of CSS and JavaScript
It’s generally recommended you ensure the vast majority of your web page content is immediately visible when someone accesses it – but there are exceptions. For example, you might want to provide access to some historical information but not clutter up the page with several years’ worth, which might distract users.
This kind of thing often happens with tables. You might have a sports table or a favourites chart and want to provide the potential for comparison, but only initially display the most recent table’s content. This tutorial provides a simple and elegant solution for doing just that, utilising JavaScript and CSS to create collapsible tables.
The concept behind the methodology of this month’s tutorial isn’t new, and closely resembles a tutorial we did in issue 169, which detailed how to work with the DOM (Document Object Model) tree to modularise collapsible content. The idea was to use clickable headings to toggle the visibility of the subsequent block element: a div. With pages or page areas that have a very strict structure, this kind of manipulation is faster and more efficient code-wise than targeting from each link an element with a specific id value. (Note: the full tutorial from issue 169 is available here)
Although tables haven’t traditionally leant themselves to this kind of manipulation, due to basically being a bunch of row elements, that all changes when row groups are added to the mix. The three row group elements – thead, tbody and tfoot – provide a logical structure to a table (and also potentially enable all sorts of browser ‘tricks’, such as scrolling the body while leaving the head and foot in place) and group components, thereby enabling a section to be targeted and collapsed.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
How do you like your eggs? Cooked
Click here to download the support files
Click here to download tutorial PDF
Bonus links! More CSS articles over at Computer Arts: Design a liquid layout, make global styles in Dreamweaver and magazine-style layouts.
Bookmark with:
