Table
A tabela organiza muitos itens do mesmo tipo em linhas e colunas, para comparar e agir. No mobile, cada linha vira um cartão.
Nesta página
Playground
| Nome | Quando | Situação | Disparos | Ações |
|---|---|---|---|---|
| Backup semanal | Domingo, 3h | Em dia | 48 | Editar Backup semanal |
| Regar as plantas | Terça, 9h | Atrasado | 3 | Editar Regar as plantas |
Densidade
Legenda
Linhas
Fundo
<div style="inline-size: 100%"><div class="feitio-table-scroll" tabindex="0" role="region" aria-label="Nome"><table class="feitio-table"><thead><tr><th scope="col">Nome</th><th scope="col">Quando</th><th scope="col">Situação</th><th scope="col" data-align="end">Disparos</th><th scope="col"><span class="feitio-visually-hidden">Ações</span></th></tr></thead><tbody><tr><td class="title">Backup semanal</td><td data-label="Quando">Domingo, 3h</td><td data-label="Situação"><span class="feitio-tag" data-status="ok"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-check"></use></svg>Em dia</span></td><td data-align="end" data-label="Disparos">48</td><td class="actions"><a class="feitio-button" href="#playground" data-size="small">Editar<span class="feitio-visually-hidden"> Backup semanal</span></a></td></tr><tr><td class="title">Regar as plantas</td><td data-label="Quando">Terça, 9h</td><td data-label="Situação"><span class="feitio-tag" data-status="warn"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-warn"></use></svg>Atrasado</span></td><td data-align="end" data-label="Disparos">3</td><td class="actions"><a class="feitio-button" href="#playground" data-size="small">Editar<span class="feitio-visually-hidden"> Regar as plantas</span></a></td></tr></tbody></table></div></div>Quando usar
- Para itens que se comparam pelas mesmas características: agendamentos com quando e quem, serviços com estado.
- Em telas de trabalho, quase sempre com
data-density="compact".
Quando não usar
- Um item, várias características: SummaryList.
- Coisas a fazer, com um estado cada: TaskList.
- Para montar o layout da página: tabela é dado, nunca posição.
Exemplos
| Nome | Quando | Situação | Disparos | Ações |
|---|---|---|---|---|
| Backup semanal | Domingo, 3h | Em dia | 48 | Editar backup semanal |
| Regar as plantas | Terça, 9h | Atrasado | 3 | Editar regar as plantas |
| Relatório do mês | Dia 1, 8h | Pausado | 1.204 | Editar relatório do mês |
Uma tabela de trabalho
Título, cabeçalho com o traço de tinta, números à direita e a ação de cada linha no fim.
Mostrar código
<div class="feitio-table-scroll" tabindex="0" role="region" aria-labelledby="agendamentos">
<table class="feitio-table">
<caption id="agendamentos">Agendamentos</caption>
<thead><tr><th scope="col">Nome</th>…<th scope="col" data-align="end">Disparos</th></tr></thead>
<tbody><tr><td class="title">Backup semanal</td>…<td data-align="end" data-label="Disparos">48</td></tr></tbody>
</table>
</div>| Nome | Quando | Situação | Disparos | Ações |
|---|---|---|---|---|
| Backup semanal | Domingo, 3h | Em dia | 48 | Editar backup semanal |
| Regar as plantas | Terça, 9h | Atrasado | 3 | Editar regar as plantas |
| Relatório do mês | Dia 1, 8h | Pausado | 1.204 | Editar relatório do mês |
No mobile
Na caixa com menos de 40rem, cada linha vira um cartão: o nome em cima, cada valor com o nome da coluna ao lado (data-label), as ações embaixo.
Mostrar código
<td class="title">Backup semanal</td>
<td data-label="Quando">Domingo, 3h</td>Ordenar pelo cabeçalho
A coluna que ordena é um link: o servidor devolve a página ordenada. A coluna ordenada leva aria-sort e a seta.
Mostrar código
<th scope="col" aria-sort="ascending"><a href="?ordem=prazo">Prazo…</a></th>Ação em lote
Uma caixa por linha e as ações do lote em cima, em botões pequenos. É um formulário: as caixas marcadas vão junto com o botão apertado.
Mostrar código
<form action="/tarefas/lote" method="post">
<button type="submit" name="acao" value="concluir" class="feitio-button" data-size="small">Concluir selecionadas</button>
…
<td class="select"><input type="checkbox" name="ids" value="12" aria-label="Selecionar revisar o contrato"></td>
</form>Sem linhas, a tabela vira um EmptyState, no lugar das linhas. Nunca um cabeçalho sozinho, sem nada embaixo.
Anatomia
| Nome | Disparos | Ações |
|---|---|---|
| Backup | 48 |
- Título (caption): o nome da tabela, dito pelo leitor de tela.
- Cabeçalho: texto suave, com o traço de tinta embaixo.
- Linha: separada da próxima por uma linha fina.
- Números à direita, com algarismos de mesma largura.
- Ação da linha: botão pequeno, no fim.
Estados
- Mouse por cima da linha: um tom mais escuro, bem leve, para o olho não perder a linha. Não é seleção.
- Densidade: confortável em leitura, compacta em telas de trabalho; a troca anima.
- Caixa estreita: cada linha vira um cartão. Caixa média e tabela larga: rola dentro da própria caixa; a página nunca rola para o lado.
Bons e maus padrões
Faça assim
| Item | Valor |
|---|---|
| Fotos | 1.204 |
| Vídeos | 38 |
Números à direita: as casas se alinham e a comparação é de olho.
Não faça
| Item | Valor |
|---|---|
| Fotos | 1.204 |
| Vídeos | 38 |
Tudo centralizado: os números não se alinham.
Faça assim
| Backup |
A ação com palavra, pequena, no fim da linha.
Não faça
| Backup | |
| Plantas |
Listras alternadas e ações só com ícone: barulho, e ninguém sabe o que o ícone faz.
Como escrever
- Cabeçalho: uma ou duas palavras, sem repetir a unidade em cada célula.
- Célula vazia: um travessão, com o texto escondido ("sem prazo") para o leitor de tela.
Acessibilidade
<caption>com o nome e<th scope="col">em cada cabeçalho.- A ação de cada linha diz de que linha é ("Editar backup semanal"), com o texto escondido.
- A caixa que rola é uma região com nome e recebe foco.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-table" | obrigatório | Linhas finas, cabeçalho com o traço de tinta, números de mesma largura. |
class="feitio-table-scroll" tabindex="0" | em volta | Mede a própria largura: estreita, vira cartões; média, rola. Com tabindex="0", role="region" e um nome. |
class="title" | na célula do nome | O título do cartão no mobile. |
data-label | nas outras células | O nome da coluna, ao lado do valor no cartão. |
data-align="end" | na coluna de números | Números à direita. |
class="actions" | na célula das ações | Botões pequenos, no fim. |
aria-sort | "ascending", "descending" | Na coluna ordenada. |