Tables

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

Basic table

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

Compact table

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>