Tables must be wrapped inside a section with the a-table
class and a div. The table must have the cellpadding
and the cellspacing
set to 0
. Also, the table headers must be inside a div element.
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
If section
height is lower than table
height then the table
headers are going to be fixed on top and the content can be scrolled.
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="width: 640px;height: 144px;">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
Tables can be bordered with the modifier -bordered
.
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -bordered" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
Or borderless using the modifier -borderless
.
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -borderless" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
The table can be striped with the modifier -striped
.
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -striped" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
And we can enable a hover state over the rows.
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -hover" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
There are modifiers for the rows to express different states. For example we can disable a row with the attribute disabled="disabled"
.
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr disabled="disabled">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
or just use the following classes:
rowSuccess
rowWarning
rowDanger
rowInfo
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr class="-rowSuccess">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr class="-rowWarning">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr class="-rowDanger">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr class="-rowInfo">
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
Sometimes we need to express that a column is sorted. For that, we have to use the column header modifier -sorted
in conjunction of one of the followin modifiers:
-ascending
-descending
name
|
ID
|
last login
|
---|---|---|
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
David Navarro | david | Dec 18, 2017 3:26 PM |
<section class="a-table" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="-sorted -ascending">
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
</tbody>
</table>
</div>
</section>
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="-sorted -descending">
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
Last but not least we could use size modifiers.
-small
-large
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -small" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
name
|
ID
|
last login
|
---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table -large" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>
All the different modifiers can be combined in order to create complex and beautiful tables.
name
|
ID
|
last login
|
|
---|---|---|---|
David Navarro | david | Dec 18, 2017 3:26 PM | |
Diego Sanjuan | diego | Dec 18, 2017 2:38 AM | |
Manuel Martin | manuel | Nov 5, 2017 10:15 AM |
<section class="a-table" style="width: 640px">
<div>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="48px">
<div class="-lh1"><input class="a-input" type="checkbox" id="chk-1" /><label for="chk-1"></label></div>
</th>
<th class="-sorted -descending">
<div>name</div>
</th>
<th>
<div>ID</div>
</th>
<th>
<div>last login</div>
</th>
</tr>
</thead>
<tbody>
<tr class="-rowWarning">
<td class="-lh1"><input class="a-input" type="checkbox" id="chk-1-01" checked="checked" /><label for="chk-1-01"></label></td>
<td>David Navarro</td>
<td>david</td>
<td>Dec 18, 2017 3:26 PM</td>
</tr>
<tr>
<td class="-lh1"><input class="a-input" type="checkbox" id="chk-1-02" /><label for="chk-1-02"></label></td>
<td>Diego Sanjuan</td>
<td>diego</td>
<td>Dec 18, 2017 2:38 AM</td>
</tr>
<tr>
<td class="-lh1"><input class="a-input" type="checkbox" id="chk-1-03" /><label for="chk-1-03"></label></td>
<td>Manuel Martin</td>
<td>manuel</td>
<td>Nov 5, 2017 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</section>