2.5 base.tables Tables

Toggle example guides Toggle HTML markup

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.

Example
Optional table caption.
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