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. Tabelas têm sido usadas para este propósito já no século II e quando o mundo começou a se tornar digital, tabelas vieram junto conosco.

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

A web evoluiu muito na última década, e é mais conveniente do que nunca fazer seu site ou aplicativo se adaptar ao viewport em que é visualizado. Dito isto, temos de continuar a fazer escolhas de design consideradas que não comprometam a 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.

CSS-Only Options

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

Felizmente, sem a ajuda do JavaScript para alguma manipulação de DOM na frente de acessibilidade, nós temos apenas algumas opções apenas CSS. Mas para conjuntos de dados pequenos, eles são frequentemente 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, então essa tabela está praticamente pronta para ser usada em ambientes móveis.

O problema que você teria é provavelmente ter muito espaço em telas mais largas, por isso pode ser aconselhável “tampar” a largura máxima da tabela com um max-width enquanto deixa encolher conforme necessário em uma tela estreita.

Este tipo de padrão funciona melhor se os seus dados em si não forem linhas e linhas de texto. Se elas forem numéricas, ou frases curtas, você provavelmente pode escapar sem fazer muito.

Opção 2: Estilo The Scroll

David Bushell escreveu sua técnica para tabelas responsivas em 2012, que envolvia invocar o overflow e permitir que os usuários rolarem para ver mais dados. Pode-se argumentar que esta não é exatamente uma solução responsiva, mas tecnicamente, o container está respondendo à largura do viewport.

Vejamos primeiro o transbordo “básico”. Imagine-me usando aspas de ar em torno do básico, porque o estilo para as 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 rifando as idéias um do outro para criar magia. Ela depende do uso de múltiplos gradientes (linear e radial) como imagens de fundo no elemento contendo, e usando background-attachment: local para posicionar o fundo em relação ao seu conteúdo.

O que é bom nesta técnica é que para navegadores que não suportam sombras de rolagem, você ainda pode rolar a tabela como de costume. Não quebra o layout de forma alguma.

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 sobre o conteúdo do elemento <tbody>. Esta técnica alavanca o comportamento do Flexbox para transformar as linhas da tabela em colunas.

Ao aplicar display: flex à tabela, faz com que os <thead> e <tbody> ambas as crianças flex, que são por padrão dispostas uma ao lado da outra na mesma linha flex.

Fazemos também com que o elemento <tbody> seja um recipiente flex, fazendo com que todos os elementos <tr> dentro dele flexionem as crianças dispostas em uma única linha flex também. Finalmente, cada célula da tabela tem que ter seu display definido para block ao invés do padrão table-cell.

A vantagem desta 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 ter em conta é que esta técnica resulta numa discrepância da ordem visual e fonte, o que torna as coisas ligeiramente pouco intuitivas.

Sprinkle On Some JavaScript

Como mencionado anteriormente, as opções de layout que envolvem o morphing da tabela modificando display valores por vezes têm implicações negativas na acessibilidade, o que requer alguma manipulação de DOM menor para rectificar.

Além disso, há uma série de 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 requerem algum JavaScript para habilitar).

Se você está trabalhando com um conjunto de dados relativamente mais simples, talvez você gostaria de 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 tabelas de dados responsiva surgiu do artigo “Tabelas de dados responsiva” do CSS-Tricks, de Chris Coyier, em 2011. Desde então foi adaptada e ampliada por muitos outros.

A essência desta técnica é fazer uso de uma consulta de mídia para mudar a propriedade de exibição do elemento da tabela e seus filhos para block em um viewport estreito.

Em uma tela estreita, os cabeçalhos das tabelas são visualmente ocultos, mas ainda existem na árvore de acessibilidade. Aplicando atributos de dados às células da tabela, podemos então exibir etiquetas para os dados via CSS, enquanto mantemos o conteúdo da etiqueta no HTML. Consulte a CodePen abaixo para saber como a marcação e estilos são:

O método original aplica uma largura no pseudo-elemento exibindo o texto da etiqueta, mas isso significa que você precisaria saber a quantidade de espaço que sua etiqueta precisava para começar. O exemplo acima usa uma abordagem ligeiramente diferente, onde a etiqueta e os dados estão cada um em lados opostos do bloco que os contém.

Podemos conseguir tal efeito através de margens automáticas em um contexto de formatação flexível. Se definirmos a propriedade de exibição de cada elemento <td> para flex, porque pseudo-elementos geram caixas como se fossem filhos imediatos de seu elemento de origem, eles se tornam filhos flex do elemento <td>.

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

Outra abordagem fazendo o layout estreito do viewport está usando uma combinação de Grid e display: contents. Note que display: contents nos navegadores de suporte tem problemas de acessibilidade no momento, e este método não deve ser usado na produção até que esses bugs sejam corrigidos.

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

Cada <tr> elemento está ajustado para display: grid, e cada <td> elemento está ajustado para display: contents. Apenas os filhos imediatos de um container de grid participam de um contexto de formatação de grid; neste caso, é o <td> element.

Quando display: contents é aplicado ao <td>, ele é “substituído” pelo seu conteúdo, neste caso, o pseudo-elemento e o <span> dentro do <td> tornam-se os filhos do grid.

O que eu gosto nesta abordagem é a capacidade de usar max-content para dimensionar a coluna de pseudo-elementos, assegurando que a coluna será sempre a largura da etiqueta mais longa, sem que tenhamos que atribuir manualmente um valor de largura para ela.

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

O lado negativo desta abordagem é que você precisa daquele adicional <span> ou <p> em torno do conteúdo da sua célula da tabela se ela ainda não tivesse uma, caso contrário, não haveria como aplicar estilos a ela.

Paginação Simples

Este exemplo mostra uma implementação básica de paginação que foi modificada deste CodePen por Gjore Milevski para paginar nas linhas da tabela ao invés de divs. É uma extensão do exemplo “estilo o scroll” discutido na seção anterior.

De uma perspectiva de layout, o Flexbox vem muito a calhar para posicionar os elementos de paginação em vários tamanhos de viewport. Diferentes designs de projeto terão diferentes requisitos, mas a versatilidade do Flexbox deve permitir atender a essas diferenças de acordo.

Neste caso, a paginação é centrada 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 largas, mas todos os quatro aparecem acima dos indicadores de página em telas estreitas.

Podemos fazer isso levando-se a propriedade order. O reordenamento visual do conteúdo deve ser sempre feito com consideração porque esta propriedade não altera a ordem do código fonte – apenas como ela aparece nas telas.

Simple Sorting

Este exemplo mostra uma implementação de ordenação básica modificada a partir deste trecho de código por Peter Noble para atender a ambos texto e numerais:

Seria útil ter algum tipo de indicador de qual coluna está atualmente sendo ordenada e em que ordem. Podemos fazer isso com a adição de classes CSS que podem então ser estilizadas da forma que você quiser. Neste caso, os símbolos indicadores são pseudo-elementos que são alternados quando o cabeçalho de destino é clicado.

Simple Search

Este exemplo é uma funcionalidade de filtragem básica que itera 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 da pesquisa.

Tal implementação é relativamente ingênua, e se o seu caso de uso chamar por ela, pode fazer sentido procurar por coluna em vez disso. Nesse cenário, pode ser uma boa idéia ter cada campo de entrada como parte da tabela em suas respectivas colunas.

Let A Library Handle It

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

O padrão de alternância de colunas é um padrão no qual colunas não essenciais são ocultadas em telas menores. Normalmente, eu não sou fã de esconder conteúdo simplesmente porque a viewport é estreita, mas essa abordagem da Maggie Costello Wachs do Filament Group resolve esse meu problema fornecendo um menu drop-down que permite aos usuários alternar as colunas ocultas de volta para a view.

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

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

Wrapping Up

Existe uma miríade de padrões de design de tabelas por aí, e qual abordagem você escolhe depende muito do tipo de dados que você tem e do público alvo para esses dados. No final do dia, as tabelas são um método para a organização e apresentação dos dados. É importante descobrir que informação é mais importante para os seus utilizadores e decidir qual a abordagem que melhor serve as suas necessidades.

>

Outras Leituras

• “Tabelas somente CSS-Only Responsive Tables”, David Bushell
• “Tabelas Acessíveis, Simples, Responsivas”, Davide Rizzo, CSS-Tricks
• “Layout da Tabela Responsiva”, Matt Smith
• “Padrões Responsivos”: Tabelas”, Brad Frost
• “Hey, It’s Still OK To Use Tables”, Adrian Roselli
• “Tables, CSS Display Properties, And ARIA”, Adrian Roselli
• “Data Tables”, Heydon Pickering

(ra, il)