C8 · Componentes

Table

Dados estruturados com colunas, linhas e legenda. Cabeçalho em peso 600. Hairlines entre linhas. Status em coluna dedicada usa C16 Badge.

01

Anatomia

<table>
  <caption>Última hora de transmissão</caption>
  <thead>
    <tr>
      <th scope="col">Stream</th>
      <th scope="col">Status</th>
      <th scope="col">Latência</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Live #042</th>
      <td><span class="badge live">Live</span></td>
      <td>42ms</td>
    </tr>
  </tbody>
</table>

02

Diretrizes

Faça

Use sempre tags semânticas (<table>, <thead>, <th>).
Atributo scope em todos os <th>.
Números alinhados à direita; texto à esquerda.
Em mobile, considere padrão 'card por linha' em vez de scroll horizontal.

Não faça

Não use <div> com classes de grid para tabelas de dados.
Não codifique status só na cor da célula — use Badge.
Não use zebra-stripe — hairlines comunicam separação.