<section class="ui_section" id="tables">
  <h2 class="ui_section_title">Tables</h2>

  <div class="ui_block">
    <h3 class="ui_block_title">Basic table</h3>

    <table class="ui_table">
      <caption class="ui_table_caption">Devices list</caption>

      <thead class="ui_table_head">
        <tr class="ui_table_row">
          <th class="ui_table_th" scope="col">Device</th>
          <th class="ui_table_th" scope="col">Status</th>
          <th class="ui_table_th" scope="col">IP</th>
          <th class="ui_table_th ui_table_th_right" scope="col">Ping</th>
          <th class="ui_table_th ui_table_th_right" scope="col">Actions</th>
        </tr>
      </thead>

      <tbody class="ui_table_body">
        <tr class="ui_table_row">
          <td class="ui_table_td">Kitchen Light</td>
          <td class="ui_table_td">
            <span class="ui_badge ui_badge_success">Online</span>
          </td>
          <td class="ui_table_td">
            <code class="ui_code">192.168.1.21</code>
          </td>
          <td class="ui_table_td ui_table_td_right">12 ms</td>
          <td class="ui_table_td ui_table_td_right">
            <button class="ui_btn ui_btn_secondary ui_btn_small" type="button">Open</button>
            <button class="ui_btn ui_btn_accent ui_btn_small" type="button">Toggle</button>
          </td>
        </tr>

        <tr class="ui_table_row">
          <td class="ui_table_td">Hall Sensor</td>
          <td class="ui_table_td">
            <span class="ui_badge ui_badge_warning">Degraded</span>
          </td>
          <td class="ui_table_td">
            <code class="ui_code">192.168.1.34</code>
          </td>
          <td class="ui_table_td ui_table_td_right">88 ms</td>
          <td class="ui_table_td ui_table_td_right">
            <button class="ui_btn ui_btn_secondary ui_btn_small" type="button">Open</button>
            <button class="ui_btn ui_btn_danger ui_btn_small" type="button">Restart</button>
          </td>
        </tr>

        <tr class="ui_table_row ui_table_row_muted">
          <td class="ui_table_td">Garage Relay</td>
          <td class="ui_table_td">
            <span class="ui_badge ui_badge_error">Offline</span>
          </td>
          <td class="ui_table_td">
            <code class="ui_code">—</code>
          </td>
          <td class="ui_table_td ui_table_td_right">—</td>
          <td class="ui_table_td ui_table_td_right">
            <button class="ui_btn ui_btn_secondary ui_btn_small" type="button" disabled>Open</button>
            <button class="ui_btn ui_btn_accent ui_btn_small" type="button" disabled>Toggle</button>
          </td>
        </tr>
      </tbody>

      <tfoot class="ui_table_foot">
        <tr class="ui_table_row">
          <td class="ui_table_td" colspan="5">
            <span class="ui_table_meta">Total: 3 devices</span>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>

  <div class="ui_block">
    <h3 class="ui_block_title">Compact / key-value table</h3>

    <div class="ui_table_wrap">
      <table class="ui_table ui_table_compact">
        <thead class="ui_table_head">
          <tr class="ui_table_row">
            <th class="ui_table_th" scope="col">Key</th>
            <th class="ui_table_th" scope="col">Value</th>
            <th class="ui_table_th ui_table_th_right" scope="col">Updated</th>
          </tr>
        </thead>

        <tbody class="ui_table_body">
          <tr class="ui_table_row">
            <td class="ui_table_td">mode</td>
            <td class="ui_table_td"><code class="ui_code">normal</code></td>
            <td class="ui_table_td ui_table_td_right">2s ago</td>
          </tr>
          <tr class="ui_table_row">
            <td class="ui_table_td">heap_free</td>
            <td class="ui_table_td"><code class="ui_code">27 KB</code></td>
            <td class="ui_table_td ui_table_td_right">2s ago</td>
          </tr>
          <tr class="ui_table_row">
            <td class="ui_table_td">uptime</td>
            <td class="ui_table_td"><code class="ui_code">04:12:19</code></td>
            <td class="ui_table_td ui_table_td_right">2s ago</td>
          </tr>
        </tbody>
      </table>
    </div>

    <p class="ui_hint">Container .ui_table_wrap — под горизонтальный скролл на узких экранах.</p>
  </div>
</section>