Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

Tables

Tables organize information in columns and rows. Table cells can be aligned to the left, center, or right. Stripes can also be added to tables to differentiate between rows.

Standard

To create a table start with a <table> tag with the class .table. Then add rows by inserting <tr> tags. Within rows insert header cells by adding <th> tags and insert standard cells by adding <td> tags.



 
<table class="table">
<tr>
<th>Date</th>
<th>Time</th>
<th>User</th>
<th>Cause</th>
</tr>
<tr>
<td>04/14/2017</td>
<td>1:34 PDT</td>
<td>yby.jupiter</td>
<td>jira123</td>
</tr>
<tr>
<td>04/14/2017</td>
<td>19:34 PDT</td>
<td>yby.jupiter</td>
<td>jira123</td>
</tr>
</table>

Striped

Add stripes to table rows by adding the .is-striped class to the <table> tag.



 
<table class="table is-striped">
<tr>
<th>Name</th>
<th>Domain</th>
<th class="is-center">Delete</th>
</tr>
<tr>
<td><a>AC::CGQ1::BULLETMAIL_CLIENTS</a></td>
<td><a>pes.acl.greylist</a></td>
<td class="is-center"><a><span class="d-icon d-trash is-small"></span></a></td>
</tr>
<tr>
<td><a>BULLETMAIL_CLIENTS</a></td>
<td><a>pes.acl.greylist</a></td>
<td class="is-center"><a><span class="d-icon d-trash is-small"></span></a></td>
</tr>
<tr>
<td><a>AC::CGQ1::BULLETMAIL_CLIENTS</a></td>
<td><a>pes.acl.greylist</a></td>
<td class="is-center"><a><span class="d-icon d-trash is-small"></span></a></td>
</tr>
<tr>
<td><a>AC::CGQ1::BULLETMAIL_CLIENTS</a></td>
<td><a>pes.acl.greylist</a></td>
<td class="is-center"><a><i class="d-icon d-trash is-small"></i></a></td>
</tr>
</table>

Alignment

Table header cells and standard cells are aligned to the left by default. To align these cells to the center or right, add an .is-center or .is-right class to <th> or <td> tags.