Tables

Таблицы используют базовый класс `.table`, semantic table markup и дополнительные элементы: `.table-caption`, `.table-head`, `.table-body`, `.table-foot`.

Basic table

Projects list
Project Status Owner Updated Actions
Website Redesign Online @design 2 min ago
Billing API Degraded @backend 1 hour ago
Archive Import Offline @ops Yesterday
Total: 3 projects

Compact table

Recent jobs
Job State Runtime Run ID Actions
Sync catalog Done 18s run_1048
Import archive Running 2m 14s run_1047
Export report Failed 4s run_1046
Tables HTML 
<table class="table">
  <caption class="table-caption">Projects list</caption>
  <thead class="table-head">
    <tr class="table-row">
      <th scope="col">Project</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr class="table-row">
      <td>Website Redesign</td>
      <td><span class="badge badge-success">Online</span></td>
    </tr>
  </tbody>
</table>
Compact Table HTML 
<table class="table table-compact">
  <caption class="table-caption">Recent jobs</caption>
  <thead class="table-head">
    <tr class="table-row">
      <th scope="col">Job</th>
      <th scope="col">State</th>
      <th scope="col">Run ID</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr class="table-row">
      <td>Sync catalog</td>
      <td><span class="badge badge-success">Done</span></td>
      <td class="table-cell-mono">run_1048</td>
    </tr>
  </tbody>
</table>