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.

Basic
Datatable


<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
A101	Name 01	00-00-0000	delete
A102	Name 02	00-00-0000	delete
A103	Name 03	00-00-0000	delete
A104	Name 04	00-00-0000	delete
A105	Name 05	00-00-0000	delete
A106	Name 06	00-00-0000	delete


<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
101b	Firstname Middlename Middlename Surname 04	00-00-0000	delete
101c	Firstname Middlename Middlename Surname 02	00-00-0000	delete
101d	Firstname Middlename Middlename Surname 06	00-00-0000	delete
101e	Firstname Middlename Middlename Surname 03	00-00-0000	delete
101f	Firstname Middlename Middlename Surname 05	00-00-0000	delete