Back to the list

Table

Tables can be a good way to display informations to the user.

File to include

@import "components/table";

Bordered

# First Name Last Name Facebook Twitter
1 Anna Fali Anna Fali @anna.fali
2 Niek Bove Niek Bove @niek.bove
3 Lacara Jones Lacara Jones @lacara.jones
4 Pablo Cambeiro Pablo Cambeiro @pablo.cambeiro
5 Irene Sotelo Irene Sotelo @irene.sotelo 
<table class="table" data-table-style="bordered">
    <thead>
        <tr>
            <th>Title</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Content</td>
        </tr>
    </tbody>
</table>

Stripped

# First Name Last Name Facebook Twitter
1 Anna Fali Anna Fali @anna.fali
2 Niek Bove Niek Bove @niek.bove
3 Lacara Jones Lacara Jones @lacara.jones
4 Pablo Cambeiro Pablo Cambeiro @pablo.cambeiro
5 Irene Sotelo Irene Sotelo @irene.sotelo 
<table class="table" data-table-style="stripped">
    <thead>
        <tr>
            <th>Title</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Content</td>
        </tr>
    </tbody>
</table>

Attributes

Name Example value Possible values Default Required
data-table-style stripped "bordered" | "stripped" bordered No