Home > Web dev > CSS-Based Tables: Modern Solutions

CSS-Based Tables: Modern Solutions

October 3rd, 2009 Leave a comment Go to comments

We coninue 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.

Zebra Tables

Screenshot

Redesigning a simple table

Screenshot

Zebra Tables

Screenshot

Better Zebra Tables

Screenshot

Splintered striper: Enhanced Zebra Stripes

Screenshot

Standardista Table Sorting (A client-side JavaScript Table Sort module)

Screenshot

Designing Tables with Stylesheets

Screenshot

SortedTable instructions and examples

Screenshot

A CSS Styled Table by Veerle Pieters.

Screenshot

24ways: Tables with style

Screenshot

Sinnhafte Websites

Screenshot

Data Tables and Cascading Style Sheets Gallery – 78 CSS Table Designs.

Screenshot

Zebra Table Showdown featuring Plain DOM Scripting, Yahoo UI, Dojo, Prototype, Mochikit, mootlos, jQuery, AJS. – design67

Screenshot

Stripe your tables the OO way

Screenshot

Unobtrusive Table Sort Script (Revisited)

Screenshot

Brainjar.com: DHTML Table Sort

Screenshot

Table sorting JavaScript: Unobtrusive and with alternating row colors

Tables with further functionalities (i.e. sorting, filtering)

Screenshot

Replicating a tree table

Screenshot

Reformat the Table and Reformat the Table 2

Screenshot

Table not a table

Screenshot

CSS Style Tables Tutorial

Screenshot

How to create and style accessible tables – design56

Screenshot

Sort Table Rows with Javascript

Screenshot

The Table Ruler

Screenshot

sorttable: Make all your tables sortable

Screenshot

Sortable Tables (WebFX)

Screenshot

Sort’n’scroll Table

Screenshot

Unobtrusive Table Sort Script

Screenshot

Dynamic Sorting of HTML-tables via XSLT

Screenshot

Accessible Data Tables

Tools

  • Data Generator lets you generate large volumes of random, custom data (for testing purposes only).