2.5 base.tables Tables
The <table>
element displays tabular data in rows, columns, and cells.
Add a class .table
to each table for uniform styling. We do not provide styling on
HTML tag, so you are flexible to create other styles without having to override much css.
Member | Organisation | Role | Action |
---|---|---|---|
Chris Hall | Receptionist at Bastion Hotels | Member |
|
Michelle Williams | Community manager at Open Social | Group organiser |
|
Jim Oyster | Plumber at Forgottoflush | Member |
|
Markup: 01-base/tables/table.twig
<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>Member</th>
<th>Organisation</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Chris Hall</a></td>
<td>Receptionist at Bastion Hotels</td>
<td>Member</td>
<td>
<div class="btn-group">
<button type="button" autocomplete="off" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-primary btn-sm btn-raised dropdown-toggle">Manage<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Edit</a></li>
<li><a href="#">Remove</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><a href="#">Michelle Williams</a></td>
<td>Community manager at Open Social</td>
<td>Group organiser</td>
<td>
<div class="btn-group">
<button type="button" autocomplete="off" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-primary btn-sm btn-raised dropdown-toggle">Manage<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Edit</a></li>
<li><a href="#">Remove</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><a href="#">Jim Oyster</a></td>
<td>Plumber at Forgottoflush </td>
<td>Member</td>
<td>
<div class="btn-group">
<button type="button" autocomplete="off" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-primary btn-sm btn-raised dropdown-toggle">Manage<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Edit</a></li>
<li><a href="#">Remove</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
Source:
01-base/tables/_tables.scss
, line 3