Tables
Tabelas com estilo brutalista: cabecalho preto com texto branco uppercase, bordas solidas e variantes striped, hoverable, compact e bordered.
Tabela Basica
Preview
| Nome | Cargo | Status |
|---|---|---|
| Ana Costa | Designer | Ativo |
| Bruno Lima | Desenvolvedor | Ativo |
| Carla Dias | Gerente | Inativo |
| Diego Souza | Analista | Ativo |
HTML
<table class="canta-table">
<thead>
<tr>
<th>Nome</th>
<th>Cargo</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana Costa</td>
<td>Designer</td>
<td>Ativo</td>
</tr>
<!-- ... -->
</tbody>
</table>Striped (Listrada)
Linhas alternadas
| ID | Produto | Preco | Estoque |
|---|---|---|---|
| 001 | Notebook Pro | R$ 4.500,00 | 23 |
| 002 | Monitor 27" | R$ 1.800,00 | 45 |
| 003 | Teclado Mecanico | R$ 450,00 | 120 |
| 004 | Mouse Ergonomico | R$ 280,00 | 87 |
| 005 | Webcam HD | R$ 350,00 | 56 |
HTML
<table class="canta-table canta-table--striped">
<!-- ... -->
</table>Hoverable
Passe o mouse sobre as linhas
| Nome | Departamento | |
|---|---|---|
| Maria Santos | maria@canta.com | Marketing |
| Pedro Alves | pedro@canta.com | Engenharia |
| Julia Ferreira | julia@canta.com | Financeiro |
HTML
<table class="canta-table canta-table--hoverable">
<!-- ... -->
</table>Compact
Padding e fonte reduzidos
| Data | Descricao | Valor | Tipo |
|---|---|---|---|
| 01/04/2026 | Pagamento fornecedor | R$ 2.300,00 | Saida |
| 03/04/2026 | Recebimento cliente | R$ 5.800,00 | Entrada |
| 05/04/2026 | Aluguel escritorio | R$ 3.200,00 | Saida |
| 07/04/2026 | Venda servico | R$ 12.000,00 | Entrada |
| 10/04/2026 | Folha de pagamento | R$ 45.000,00 | Saida |
HTML
<table class="canta-table canta-table--compact">
<!-- ... -->
</table>Bordered (Todas as Bordas)
Bordas em todas as celulas
| Seg | Ter | Qua | Qui | Sex |
|---|---|---|---|---|
| 09:00 | 10:00 | 09:00 | 10:00 | 09:00 |
| 18:00 | 18:00 | 17:00 | 18:00 | 17:00 |
HTML
<table class="canta-table canta-table--bordered">
<!-- ... -->
</table>Combinando Variantes
Striped + Hoverable + Compact
| # | Nome | Acoes | |
|---|---|---|---|
| 1 | Ana Costa | ana@canta.com | Editar |
| 2 | Bruno Lima | bruno@canta.com | Editar |
| 3 | Carla Dias | carla@canta.com | Editar |
| 4 | Diego Souza | diego@canta.com | Editar |
HTML
<table class="canta-table canta-table--striped canta-table--hoverable canta-table--compact">
<!-- As variantes podem ser combinadas livremente -->
</table>API
| Classe | Descricao |
|---|---|
.canta-table | Classe base da tabela (width 100%, border-collapse, borda 2px preta) |
.canta-table th | Cabecalho: fundo preto, texto branco, Montserrat bold uppercase |
.canta-table td | Celulas: padding 12px 16px, borda inferior 1px cinza |
.canta-table--striped | Linhas impares com fundo #F5F5F5 |
.canta-table--hoverable | Hover nas linhas com fundo #F5F5F5 |
.canta-table--compact | Padding reduzido (8px 12px), font-size 0.875rem |
.canta-table--bordered | Todas as celulas com borda 2px preta |