Tables

TorqueUI is a responsive web design centric UI Framework with components made for the modern web.
 
Download TorqueUI

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>
  • © TorqueUI