CSS-Based Tables: Modern Solutions

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.

Zebra Tables

Redesigning a simple table

Zebra Tables

Better Zebra Tables

Splintered striper: Enhanced Zebra Stripes

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

Designing Tables with Stylesheets

SortedTable instructions and examples

A CSS Styled Table by Veerle Pieters.

24ways: Tables with style

Sinnhafte Websites

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

Stripe your tables the OO way

Unobtrusive Table Sort Script (Revisited)

Brainjar.com: DHTML Table Sort

Table sorting JavaScript: Unobtrusive and with alternating row colors

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

Replicating a tree table

Reformat the Table and Reformat the Table 2

Table not a table

CSS Style Tables Tutorial

How to create and style accessible tables – design56

Sort Table Rows with Javascript

The Table Ruler

sorttable: Make all your tables sortable

Sortable Tables (WebFX)

Sort’n’scroll Table

Unobtrusive Table Sort Script

Dynamic Sorting of HTML-tables via XSLT

Accessible Data Tables

Tools

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

Share on Google Plus

About Entertainment

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.