Tables

For all your tabular data!

Tables have been abused over the years and have led to some of the most convoluted, unmaintainable and inaccessible markup. The Web standards movement has been able to stamp out these table based layouts. Tables are sane again and provide us with some of the most powerful markup.

<table cellspacing="0"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Title</th> <th scope="col">date</th> <th scope="col"> </th> </tr> </thead> <tfoot> <tr> <td colspan="4">Footer</td> </tr> </tfoot> <tbody> <tr class="odd"> <td>A101</td><td>Name 01</td><td>00-00-0000</td><td><a href="#">delete</a></td> </tr> ... <tr class="even"> <td>A106</td><td>Name 06</td><td>00-00-0000</td><td><a href="#">delete</a></td> </tr> </tbody> </table>

Standard table

ID Title date  
Footer
A101Name 0100-00-0000delete
A102Name 0200-00-0000delete
A103Name 0300-00-0000delete
A104Name 0400-00-0000delete
A105Name 0500-00-0000delete
A106Name 0600-00-0000delete
<table cellspacing="0" class="datatable"> <col class="id"/> <col class="title"/> <col class="date"/> <col class="actions"/> <thead> <tr> <th scope="col">ID</th> <th scope="col">Title</th> <th scope="col">date</th> <th scope="col"> </th> </tr> </thead> <tfoot> <tr> <td colspan="4" class="ui-state-default">Footer</td> </tr> </tfoot> <tbody> <tr> <td>101a</td> <td>Firstname ... 01</td> <td>00-00-0000</td> <td><a href="#" class="ui-icon ui-icon-trash">delete</a></td> </tr> ... </tbody> </table>

Datatable & jQuery UI scripted tables

ID Title date  
Footer
101a Firstname Middlename Middlename Surname 01 00-00-0000 delete
101bFirstname Middlename Middlename Surname 0400-00-0000delete
101cFirstname Middlename Middlename Surname 0200-00-0000delete
101dFirstname Middlename Middlename Surname 0600-00-0000delete
101eFirstname Middlename Middlename Surname 0300-00-0000delete
101fFirstname Middlename Middlename Surname 0500-00-0000delete