<section class="section section-tokens" aria-labelledby="tables-heading">
  <h2 id="tables-heading">Tables</h2>

  <div class="table-container">
    <table class="table table-sortable table-selectable">
      <thead>
        <tr>
          <th data-sortable>Name</th>
          <th data-sortable>Role</th>
          <th data-sortable>Status</th>
          <th data-sortable>Score</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td>Admin</td>
          <td><span class="badge badge-success">Active</span></td>
          <td>94</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>Editor</td>
          <td><span class="badge badge-warning">Pending</span></td>
          <td>72</td>
        </tr>
        <tr>
          <td>Carol</td>
          <td>Viewer</td>
          <td><span class="badge badge-secondary">Offline</span></td>
          <td>88</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h3>Compact striped table</h3>
  <div class="table-container">
    <table class="table table-compact table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Item</th>
          <th>Qty</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#101</td>
          <td>Widget</td>
          <td>12</td>
        </tr>
        <tr>
          <td>#102</td>
          <td>Gadget</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>