Contexto
Tabelas e cards organizam informações de formas diferentes. A tabela evidencia relações entre linhas e colunas para consultar, comparar e operar dados. O card agrupa um resumo autônomo e conduz a pessoa para mais detalhes. A escolha deve partir da tarefa, do conteúdo e do dispositivo — não apenas da preferência visual.
Escolha o formato de acordo com a tarefa principal.
Use tabela para comparar. Prefira linhas e colunas quando as pessoas precisam cruzar os mesmos atributos entre vários itens.
Use tabela para consultar e operar. Tabelas funcionam bem para procurar registros, ordenar, filtrar, selecionar linhas e executar ações repetidas.
Use cards para explorar. Prefira cards quando cada item for uma unidade independente, com resumo, imagem ou chamada para ver detalhes.
Use cards para conteúdo heterogêneo. Cards acomodam itens com diferentes combinações de mídia, texto, metadados e ações.
Considere uma lista simples. Para itens homogêneos que não exigem relações entre atributos, uma lista pode ser mais escaneável e ocupar menos espaço que cards.
Adapte sem perder a tarefa. No mobile, transforme a apresentação somente se a pessoa ainda puder comparar, localizar e operar os dados com o mesmo entendimento.
Teste com conteúdo real. Verifique o tempo para encontrar, comparar e abrir itens; não escolha o formato com dados fictícios ou apenas pela aparência.
Regra prática
Se a pessoa precisa comparar atributos entre itens, comece por uma tabela. Se precisa explorar resumos independentes ou conteúdos diferentes, considere cards. Se nenhum dos dois ajuda, use uma lista ou outra estrutura mais simples.
Não é uma regra de aparência
Uma tabela não é “menos moderna” e um card não é automaticamente mais amigável. São modelos de organização com objetivos diferentes; o melhor formato é o que reduz o esforço da tarefa principal.
Porque isso importa?
O formato altera o que a pessoa consegue perceber rapidamente. A pesquisa da Nielsen Norman Group mostra que cards são úteis para agrupar resumos e incentivar a exploração, mas tendem a ser menos escaneáveis e menos adequados para busca e comparação quando os itens precisam ser confrontados entre si.
A pesquisa da Baymard sobre listas de produtos reforça que o layout — incluindo visualizações em grade e lista — precisa acompanhar o tipo de item, a informação necessária para avaliá-lo e a tarefa de encontrar ou escolher. Não existe uma apresentação única que funcione para todos os catálogos.
Para dados realmente tabulares, a estrutura de cabeçalhos, linhas e células também carrega significado. O W3C orienta preservar essas relações no código e nas versões responsivas, para que a informação continue compreensível com leitor de tela, zoom, estilos personalizados e telas menores.
Quando usar?
- Tabela: dados com os mesmos atributos em todos os itens.
- Tabela: comparação de preços, estados, datas, quantidades ou métricas.
- Tabela: busca, ordenação, filtros, seleção e ações em massa.
- Cards: artigos, produtos ou recursos apresentados como unidades independentes.
- Cards: conteúdo com imagem, resumo e ação para abrir detalhes.
- Cards: coleções heterogêneas, como painéis e agregadores.
Quando evitar?
- Cards para substituir dados tabulares.
- Tabelas para narrativas, artigos ou conteúdos sem relação entre colunas.
- Cards quando a pessoa precisa localizar um item específico rapidamente.
- Cards quando a comparação exige alinhar muitos atributos.
- Tabelas quando cada item tem estrutura e conteúdo muito diferentes.
- Escolher o formato apenas por tendência visual.
- Transformar tabela em cards no mobile sem preservar contexto e ações.
Recomendações
Faça
- Parta da tarefa principal.
- Use tabela para comparar atributos.
- Use cards para resumos independentes.
- Considere lista para conteúdo homogêneo.
- Teste com dados reais.
- Preserve a tarefa no mobile.
Evite
- Usar cards como tabela.
- Forçar uma única estrutura.
- Priorizar aparência.
- Esconder atributos importantes.
- Quebrar relações no mobile.
- Testar só com conteúdo fictício.
