# 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.
## Playground
```html
```
## 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
### 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
```html
```
### 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
```html
| Backup semanal |
Domingo, 3h |
```
### 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
```html
Prazo… |
```
### 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
```html
```
Sem linhas, a tabela vira um [EmptyState](/pt/components/emptystate/), no lugar das linhas. Nunca um cabeçalho sozinho, sem nada embaixo.
## Anatomia
1. **Título** (caption): o nome da tabela, dito pelo leitor de tela.
2. **Cabeçalho:** texto suave, com o traço de tinta embaixo.
3. **Linha:** separada da próxima por uma linha fina.
4. **Números** à direita, com algarismos de mesma largura.
5. **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
Editar
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
- `` com o nome e `` 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.
|