2.5 base.tables Tables

Toggle example guides Toggle HTML markup

The <table> element displays tabular data in rows, columns, and cells.

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>
  <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