Tabelas
As tabelas são recipientes para exibir informações.
Eles permitem que os usuários verifiquem, classifiquem, comparem e executem ações rapidamente em grandes quantidades de dados.
Opções
#Estilo padrão
- As listas possuem apenas um padrão;
- Para listagens mais complexas devemos usar cartões.
#Divisores de coluna
Os divisores de coluna são para organizar o conteúdo da tabela e ajudar o usuário a analisar os dados relacionados;
Estes são opcionais, use-os com cuidado para agrupar conteúdo relacionado.
#Seleção
Algumas tabelas devem permitir que um usuário selecione linhas nas quais ele pode executar uma ação;
Se uma tabela tiver linhas selecionáveis, ela deverá ter caixas de seleção à esquerda da tabela;
Todas as tabelas têm um estado de foco, independentemente de ações ou seleções poderem ser feitas. Isso ajuda o usuário a visualizar o conteúdo em uma única linha.
Diretrizes de uso
#Alinhar dados textuais à esquerda
- Semelhante a um parágrafo de texto, os dados textuais são sempre alinhados à esquerda em uma tabela;
- Nunca use o alinhamento central.
#Alinhar dados numéricos à direita
Os dados numéricos geralmente devem ser alinhados à direita para facilitar a digitalização e a comparação;
Os números só devem ser alinhados à esquerda quando são identificadores arbitrários, conhecidos como “números nominais”, o que significa que eles não podem ser comparados ou combinados aritmeticamente (por exemplo, códigos postais, endereços IP, números de telefone);
Os cabeçalhos das colunas seguem o alinhamento dos dados.
#Respeite o alinhamento vertical
- Todo o conteúdo deve ser centralizado verticalmente dentro da linha para oferecer o equilíbrio visual correto.
#Não use listras de zebra
Tanto as tabelas padrão quanto as silenciosas já possuem divisores de linha para auxiliar os usuários na análise de dados relacionados;
Não personalize a cor de fundo das linhas alternadas.
#Use divisores de coluna com moderação
Divisores de coluna são decorações opcionais que podem ajudar a organizar o conteúdo da tabela e criar grupos de dados;
Use-os apenas quando necessário e não os adicione a todas as colunas.
#Use traços (– –) para valores ausentes
Quando houver lacunas nos dados, use um traço (–) para representar valores nulos ou não aplicáveis (N/A).