We continue to present some of the best CSS-techniques which web-developers can always use working on their current web-project. Recently we’ve taken a look at the best css-based forms, today we present some useful techniques for displaying information in a tabular mode. In fact, tables can present data quite efficiently, particularly if you can use some sorting or filtering functions in order to improve the legibility of the text stored in the table. Furthermore, Zebra tables are becoming more and more popular, and the techniqies supposed to enhance their functionality appear on a weekly basis.
So what do we have? Let’s take a look around: over 28 modern css-based techniques in a brief overview. Links checked: May/27 2008.
A CSS Styled Table by Veerle Pieters.
Data Tables and Cascading Style Sheets Gallery – 78 CSS Table Designs.
Zebra Table Showdown featuring Plain DOM Scripting, Yahoo UI, Dojo, Prototype, Mochikit, mootlos, jQuery, AJS. – design67
Tables with further functionalities (i.e. sorting, filtering)
How to create and style accessible tables – design56
Dynamic Sorting of HTML-tables via XSLT
- Data Generator lets you generate large volumes of random, custom data (for testing purposes only).
Links and references
- Accessible Data Tables
- Advanced HTML Tables and CSS Tutorial
- Bring on the tables: Roger Johansson explains when to use tables for presenting information on the Web.
- Create tables that transform gracefully by WebAIM
- Designing Data: Table structure by Jonathan Snook
- Ein Herz fuer Tabellen (German) explains how to use tables efficiently and when not to use them.
- How to paginate, sort and search a table with Ajax and Rails
- HTML Tables best practice Presentation
- Refining Data Tables by Luke Wroblewski.
- Tables and CSS Tutorials by Chris Heilmann
- Table Manners by Jim Byrne
- Tablesorter plugin for jQuery
- Table Sorting with Prototype
- Mark Pilgrim, Dive Into Accessibility: Day 19: Using real table headers
- Joe Clark: Building Accessible Web-Sites. Chapter 10: Tables and Frames