Padrões de Design de Tabelas na Web

As tabelas são um padrão de design para exibir grandes quantidades de dados em linhas e colunas, tornando-as eficientes para fazer análises comparativas em objetos categóricos. As mesas têm sido utilizadas para este fim desde o século ^II e quando o mundo começou a digitalizar-se, as mesas vieram connosco.

Era inevitável que a web suportasse a exibição de dados em formato tabular. As tabelas HTML apresentam dados tabulares de maneira semântica e estruturalmente apropriada. No entanto, os estilos padrão nas tabelas HTML não são exatamente a coisa mais esteticamente agradável que você já viu. Dependendo do design visual desejado, foi necessário algum esforço na frente do CSS para embelezar essas tabelas. Há uma década, um artigo com o “Top 10 CSS Table Designs” foi publicado na Smashing Magazine, e ainda continua recebendo muito tráfego até hoje.

A web evoluiu muito na última década, e é mais conveniente do que nunca fazer com que seu site ou aplicativo se adapte à janela de visualização em que é visualizado. acessibilidade. Como as tabelas não parecem estar caindo em desuso tão cedo, vamos ver como as tabelas podem ser criadas na web em 2019.

Opções somente CSS

Se seu conjunto de dados não for tão grande e recursos como paginação e classificação não forem necessários, considere uma opção sem JavaScript. Você pode obter alguns resultados muito bons que funcionam bem em toda uma gama de tamanhos de tela sem o peso adicional de uma grande biblioteca.

Infelizmente, sem a ajuda do JavaScript para alguma manipulação do DOM na frente de acessibilidade, temos apenas algumas opções somente CSS. Mas para pequenos conjuntos de dados, eles geralmente são suficientes.

Opção 1: não fazer nada

Vamos começar com um cenário de baixo esforço. Se seus dados se encaixam em uma tabela com apenas algumas colunas e muitas linhas, essa tabela está praticamente pronta para dispositivos móveis para começar.

O problema que você teria provavelmente é ter muito espaço em telas mais largas, portanto, pode ser aconselhável “limitar” a largura máxima da mesa com uma max-width , deixando-a encolher conforme necessário em uma tela estreita.

Esse tipo de padrão funciona melhor se seus dados em si não forem linhas e linhas de texto. Se eles são numéricos ou frases curtas, você provavelmente pode se safar sem fazer muito.

Opção 2: estilizar o pergaminho

David Bushell escreveu sua técnica para tabelas responsivas em 2012, que envolvia invocar overflow e permitir que os usuários rolassem para ver mais dados. Pode-se argumentar que esta não é exatamente uma solução responsiva, mas tecnicamente, o contêiner está respondendo à largura da janela de visualização.

Vejamos primeiro o estouro “básico”. Imagine-me usando aspas no ar em torno do básico, porque o estilo das sombras de rolagem é tudo menos isso. Ainda assim, neste caso, “básico” refere-se ao fato de que a tabela não se transforma de forma alguma.

Esta técnica para fazer sombras de rolagem vem de Roma Komarov e Lea Verou riffing as idéias um do outro para criar magia. Ele depende do uso de vários gradientes (lineares e radiais) como imagens de fundo no elemento que o contém e do uso background-attachment: local para posicionar o fundo em relação ao seu conteúdo.

O legal dessa técnica é que, para navegadores que não suportam sombras de rolagem, você ainda pode rolar a tabela normalmente. Não quebra o layout em nada.

Outra opção de rolagem seria inverter os cabeçalhos da tabela de uma configuração de linha para uma configuração de coluna, enquanto aplica uma rolagem horizontal no conteúdo do elemento <tbody> . Essa técnica aproveita o comportamento do Flexbox para transformar as linhas da tabela em colunas.

Ao aplicar display: flex à tabela, ele torna <thead> e <tbody> ambos filhos flex, que por padrão são dispostos próximos um do outro na mesma linha flex.

Também tornamos o elemento <tbody> um contêiner flex, fazendo com que todos os elementos <tr> dentro dele sejam filhos flex dispostos em uma única linha flex também. Por fim, cada célula da tabela deve ter sua exibição definida para block em vez da table-cell padrão.

A vantagem dessa técnica é que os cabeçalhos estão sempre à vista, como um efeito de cabeçalho fixo, para que os usuários não percam o contexto enquanto percorrem as colunas de dados. Uma coisa a ser observada é que essa técnica resulta em uma discrepância da ordem visual e da fonte, e isso torna as coisas um pouco não intuitivas.

Polvilhe em algum JavaScript

Conforme mencionado anteriormente, as opções de layout que envolvem a transformação da tabela modificando os valores de display às vezes têm implicações negativas para a acessibilidade, que exigem alguma manipulação menor do DOM para corrigir.

Além disso, há várias dicas de experiência do usuário quando se trata de projetar tabelas de dados de Andrew Coyle, incluindo recursos como paginação, classificação, filtragem e assim por diante (recursos que exigem algum JavaScript para habilitar).

Se você estiver trabalhando com um conjunto de dados relativamente mais simples, talvez queira escrever suas próprias funções para alguns desses recursos.

Linhas para blocos, com correção de acessibilidade

Até onde eu sei, essa técnica de tabela de dados responsiva surgiu do artigo CSS-Tricks “Responsive Data Tables” de Chris Coyier em 2011. Desde então, ela foi adaptada e expandida por muitos outros.

A essência dessa técnica é fazer uso de uma consulta de mídia para alternar a propriedade de exibição do elemento de tabela e seus filhos para block em uma janela de visualização estreita.

Em uma tela estreita, os cabeçalhos da tabela ficam ocultos visualmente, mas ainda existem na árvore de acessibilidade. Ao aplicar atributos de dados às células da tabela, podemos exibir rótulos para os dados via CSS, mantendo o conteúdo do rótulo no HTML. Consulte o CodePen abaixo para saber como são as marcações e os estilos:

O método original aplica uma largura no pseudoelemento que exibe o texto do rótulo, mas isso significa que você precisa saber a quantidade de espaço que seu rótulo precisa para começar. O exemplo acima usa uma abordagem ligeiramente diferente, em que o rótulo e os dados estão em lados opostos do bloco que o contém.

Podemos obter esse efeito por meio de margens automáticas em um contexto de formatação flexível. Se definirmos a propriedade display para cada elemento <td> como flex, porque os pseudo-elementos geram caixas como se fossem filhos imediatos de seu elemento de origem, eles se tornam filhos flex do <td> .

Depois disso, é uma questão de configurar margin-right: auto no pseudo-elemento para empurrar o conteúdo da célula para a extremidade mais distante da célula.

Outra abordagem para fazer o layout da janela de visualização estreita é usar uma combinação de Grid e display: contents . Observe que display: contents em navegadores de suporte tem problemas de acessibilidade no momento, e esse método não deve ser usado em produção até que esses bugs sejam corrigidos.

Mas talvez você esteja lendo isso depois que esses bugs foram resolvidos, nesse caso, aqui está uma opção de layout alternativo.

Cada elemento <tr> é configurado para display: grid e cada elemento <td> é configurado para display: contents . Somente os filhos imediatos de um contêiner de grade participam de um contexto de formatação de grade; neste caso, é o elemento <td> .

Quando display: contents é aplicado ao <td> , ele é “substituído” por seu conteúdo, neste caso, o pseudoelemento e o <span> dentro do <td> se tornam os filhos da grade.

O que eu gosto nessa abordagem é a capacidade de usar max-content para dimensionar a coluna de pseudo-elementos, garantindo que a coluna seja sempre a largura do rótulo mais longo, sem que tenhamos que atribuir manualmente um valor de largura para ela.

No futuro, quando os valores de dimensionamento de min-content , max-content e fit-content (cobertos pelo CSS Intrinsic & Extrinsic Sizing Module Nível 3) forem suportados como valores gerais de width e height , teremos ainda mais opções para colocar coisas.

A desvantagem dessa abordagem é que você precisa desse <span> ou <p> adicional ao redor do conteúdo da célula da tabela, se ainda não tiver um, caso contrário, não haverá como aplicar estilos a ele.

Paginação Simples

Este exemplo mostra uma implementação de paginação básica que foi modificada neste CodePen por Gjore Milevski para paginar em linhas de tabela em vez de divs. É uma extensão do exemplo “estilizar o pergaminho” discutido na seção anterior.

Do ponto de vista do layout, o Flexbox é muito útil para posicionar os elementos de paginação em vários tamanhos de viewport. Diferentes designs de projeto terão requisitos diferentes, mas a versatilidade do Flexbox deve permitir que você atenda a essas diferenças de acordo.

Neste caso, a paginação é centralizada na página e acima da tabela. Os controles para navegar para trás e para frente são colocados em ambos os lados dos indicadores de página em telas mais amplas, mas todos os quatro aparecem acima dos indicadores de página em telas estreitas.

Podemos fazer isso alavancando a propriedade order . A reordenação visual do conteúdo deve sempre ser feita com consideração porque essa propriedade não altera a ordem da fonte — apenas como ela aparece nas telas.

Classificação simples

Este exemplo mostra uma implementação de classificação básica modificada neste trecho de código por Peter Noble para atender tanto ao texto quanto aos numerais:

Seria útil ter algum tipo de indicador de qual coluna está sendo classificada e em que ordem. Podemos fazer isso com a adição de classes CSS que podem ser estilizadas como você quiser. Nesse caso, os símbolos indicadores são pseudoelementos que são alternados quando o cabeçalho de destino é clicado.

Pesquisa simples

Este exemplo é uma funcionalidade de filtragem básica que itera por todo o conteúdo textual de cada célula da tabela e aplica uma classe CSS para ocultar todas as linhas que não correspondem ao campo de entrada de pesquisa.

Essa implementação é relativamente ingênua e, se o seu caso de uso exigir, pode fazer sentido pesquisar por coluna. Nesse cenário, pode ser uma boa ideia ter cada campo de entrada como parte da tabela em suas respectivas colunas.

Deixe uma biblioteca cuidar disso

Os trechos de JavaScript acima servem para demonstrar como tabelas com grandes quantidades de dados podem ser aprimoradas para facilitar a vida dos usuários dessas tabelas. Mas com conjuntos de dados realmente grandes, provavelmente faz sentido usar uma biblioteca existente para gerenciar suas tabelas grandes.

O padrão de alternância de coluna é aquele em que as colunas não essenciais ficam ocultas em telas menores. Normalmente, não sou fã de ocultar conteúdo simplesmente porque a janela de visualização é estreita, mas essa abordagem de Maggie Costello Wachs do Filament Group resolve esse meu problema fornecendo um menu suspenso que permite aos usuários alternar as colunas ocultas de volta para visualizar.

O artigo acima foi publicado em 2011, mas o Filament Group desenvolveu desde então um conjunto completo de plugins de tabela responsivos conhecidos como Tablesaw, que inclui recursos como classificação, seleção de linhas, internacionalização e assim por diante.

O recurso de alternância de colunas no TableSaw também não depende mais do jQuery, ao contrário dos exemplos do artigo original. Tablesaw é uma das únicas bibliotecas que encontrei que não tem dependência do jQuery no momento.

Empacotando

Há uma infinidade de padrões de design de tabela por aí, e qual abordagem você escolhe depende muito do tipo de dados que você possui e do público-alvo desses dados. No final das contas, as tabelas são um método para a organização e apresentação dos dados. É importante descobrir quais informações são mais importantes para seus usuários e decidir sobre uma abordagem que melhor atenda às suas necessidades.

Leitura adicional

• “Tabelas responsivas somente CSS”, David Bushell
• “Tabelas Acessíveis, Simples e Responsivas”, Davide Rizzo, CSS-Tricks
• “Layout de mesa responsivo”, Matt Smith
• “Padrões Responsivos: Tabelas”, Brad Frost
• “Ei, ainda não há problema em usar tabelas”, Adrian Roselli
• “Tabelas, propriedades de exibição CSS e ARIA”, Adrian Roselli
• “Tabelas de Dados”, Heydon Pickering