Tables

Eventhough though the web has become modern and responsive, it is still important to support tables, but not in the old faction way, but in the correct way. Mainly for presenting tabular data. And TorqueUI contains a CSS module with style for tables, even responsive tables.

Table

Tables in TorqueUI comes with different themes for tables, below is a simple table, using the .table class.

#	Firstname	Lastname	Username
1	John	Doe	Anonymous
2	John	Doe	Anonymous
3	John	Doe	Anonymous
#	Firstname	Lastname	Username
4	John	Doe	Anonymous
5	John	Doe	Anonymous
6	John	Doe	Anonymous
#	Firstname	Lastname	Username

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </tfoot>
</table>

Table horizontally striped

The same table as above but with horizontally stripes. Using the .table-h-striped class.

#	Firstname	Lastname	Username
1	John	Doe	Anonymous
2	John	Doe	Anonymous
3	John	Doe	Anonymous
#	Firstname	Lastname	Username
4	John	Doe	Anonymous
5	John	Doe	Anonymous
6	John	Doe	Anonymous
#	Firstname	Lastname	Username

<table class="table-h-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </tfoot>
</table>

Table vertically striped

The same table as above but with vertically stripes. Using the .table-v-striped class.

#	Firstname	Lastname	Username
1	John	Doe	Anonymous
2	John	Doe	Anonymous
3	John	Doe	Anonymous
#	Firstname	Lastname	Username
4	John	Doe	Anonymous
5	John	Doe	Anonymous
6	John	Doe	Anonymous
#	Firstname	Lastname	Username

<table class="table-h-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </tfoot>
</table>

Table vertically and horizontally striped

It is possible to combine the .table-h-striped and .table-v-striped classes.

#	Firstname	Lastname	Username
1	John	Doe	Anonymous
2	John	Doe	Anonymous
3	John	Doe	Anonymous
#	Firstname	Lastname	Username
4	John	Doe	Anonymous
5	John	Doe	Anonymous
6	John	Doe	Anonymous
#	Firstname	Lastname	Username

<table class="table-h-striped table-v-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </tfoot>
</table>

Table with borders

A third theme is a bordered table, with borders around all the cells using the .table-border.

#	Firstname	Lastname	Username
1	John	Doe	Anonymous
2	John	Doe	Anonymous
3	John	Doe	Anonymous
#	Firstname	Lastname	Username
4	John	Doe	Anonymous
5	John	Doe	Anonymous
6	John	Doe	Anonymous
#	Firstname	Lastname	Username

<table class="table-border">
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Username</th>
        </tr>
    </tfoot>
</table>

Responsive wrapper for tables

To make a table responsive you need to wrap it with the .responsive-table-wrap wrapper element. Resize you browser and see how the table functions.

#	Firstname	Lastname	Username
1	John	Doe	Anonymous
2	John	Doe	Anonymous
3	John	Doe	Anonymous
#	Firstname	Lastname	Username
4	John	Doe	Anonymous
5	John	Doe	Anonymous
6	John	Doe	Anonymous
#	Firstname	Lastname	Username

<div class="responsive-table-wrap">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody> ... </tbody>
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody> ... </tbody>
        <tfoot>
            <tr>
                <th>#</th>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Username</th>
            </tr>
        </tfoot>
    </table>
</div>