Criando tabelas HTML melhores

Estranhamente, uma das tecnologias da Web mais difíceis de dominar é uma das mais antigas disponíveis para o navegador após texto simples e imagens. O problema é ainda maior hoje com tantos tipos diferentes de dispositivos que precisam ser pensados.

Tabelas perfeitas são quase impossíveis de criar, a menos que contenham tão poucos itens que nenhum problema seja provocado. Os tipos de erros que podem surgir incluem:

  • Envoltura de texto incorretamente
  • Erros de justificação
  • Renderização de tabela fora da tela
  • Problemas de rolagem
  • Erros de altura de linha
  • Erros de largura de coluna
  • Fealdade geral ou desleixo

Neste artigo, vamos dar uma olhada em como evitar problemas como esse, então suas tabelas têm a melhor chance de criar uma boa impressão.

Estratégias de prevenção para evitar

Como as tabelas são tão difíceis de acertar, algumas pessoas tentam evitar usá-las. Algumas estratégias comuns estão usando o CSS para criar uma tabela falsa e usar uma imagem da tabela de dados sem implementá-la no código.

Ambas as estratégias de prevenção têm falhas e devem ser evitadas. Usar CSS para imitar uma tabela não possui a estrutura semântica inerente a uma tabela, o que pode criar problemas de usabilidade e acessibilidade.

Uma imagem de uma tabela não sofrerá os problemas listados na introdução, mas degrada seu potencial de SEO e não pode ser facilmente modificada se seus dados precisarem ser atualizados. Também introduz problemas de usabilidade e acessibilidade.

Frameworks são seus amigos

Estruturas comuns, como Bootstrap e Foundation, contêm muitas ferramentas que economizam tempo, e as tabelas não são exceção. Construir uma tabela de aparência elegante no Bootstrap não é difícil, mas vem com algumas limitações, se você simplesmente construir o rack sem adicionar alguma sob medida para seus esforços.

Olha não é tudo

Como o conteúdo e o estilo sempre devem ser independentes, pode fazer sentido criar sua tabela em HTML simples primeiro, apenas para garantir que fique com boa aparência antes que qualquer estilo especial de tabela seja aplicado.

Isso também pode ser útil para lembrá-lo de que uma boa construção de mesa requer mais do que apenas fazer a tabela parecer boa. Também deve ser um sistema de entrega de informações útil. Se o objetivo da tabela não é transmitir informações, então você não deveria estar usando uma tabela para o que quer que esteja fazendo.

Apontar para acessibilidade

Algumas pessoas têm dificuldade em ver e ler o texto impresso, por isso é uma boa ideia disponibilizar tabelas para elas. Você pode descobrir tudo o que precisa saber para tornar suas mesas mais acessíveis WebAIM.

Considere dar valores de ID aos componentes da tabela

Para obter o máximo controle sobre cada parte da tabela (linhas, células), você pode considerar atribuir valores de ID individuais. Adicionando valores de classe também lhe dará ainda mais flexibilidade.

Fazer essas coisas cria muito mais trabalho para você, por isso só é prático quando você precisa ajustar qualquer item por referência. Se você decidir fazer isso, poderá manipular diretamente qualquer item da tabela usando JavaScript e CSS.

Uma das complexidades da criação de tabelas é que declaramos linhas, mas não colunas. As colunas são criadas dinamicamente, calculadas de acordo com quantos itens de dados você coloca em cada linha. É por isso que as tabelas são adicionadas ao tempo de carregamento de sua página.

Efetivamente, isso significa que as colunas existem apenas em um sentido abstrato antes de a página ser renderizada, portanto, você não pode fornecer nenhum tipo de referência. Ao dar ao primeiro item de TD em uma linha uma classe de, por exemplo, “firstCol”, você fornece uma maneira de referenciar diretamente uma coluna.

Mesas compactas são melhores

Tornou-se moda construir tudo com componentes grandes e de alta visibilidade. De um ponto de vista de acessibilidade, isso é maravilhoso. Em termos de usabilidade, no entanto, nem sempre é o melhor caminho, porque pode levar a problemas.

Os desenvolvedores do Bootstrap experimentaram tabelas responsivas, mas as tabelas e a capacidade de resposta não combinam bem. Projetar suas tabelas desde o início para que elas caibam em uma tela móvel no modo retrato é uma jogada inteligente.

Tabelas devem sempre ser roláveis

É uma boa prática sempre definir o valor de estouro de uma tabela como automático, mas não na própria tabela. Em vez disso, embrulhe a mesa dentro de uma div, algo assim:

Então há muito código PHP que constrói o corpo da tabela, fechando com isto:

A parte que faz o trabalho de tornar a tabela rolável está na primeira linha, onde a div de envolvimento de tabela recebe uma altura fixa e seu valor de estouro é definido como automático. Se você fizer isso na própria tabela, em vez de em um wrapper ao redor da tabela, isso poderá ter efeitos indesejados.

Ligue para os pesos pesados ​​se você precisar

Para tabelas simples, isso é um exagero, mas quando você tem uma tabela que realmente precisa de vantagens como larguras de colunas ajustáveis ​​e classificação de colunas, existem alguns aplicativos poderosos do jQuery que foram criados para ajudar na tarefa de construir tabelas complexas.

O maior e mais provável é o melhor Flexigrid. Isso tem uma aparência semelhante a uma tabela Java Swing e funciona de maneira semelhante.

Os recursos do Flexigrid podem até ser demais para o que você precisa, então neste caso você poderia considerar TableSorter, o que é um pouco mais simples.

Embora os recursos desses tipos de ferramentas possam ser empolgantes, é importante que eles adicionem ainda mais ao tempo de carregamento da sua página. É melhor salvar esse tipo de coisa para quando você realmente deve tê-lo.

Ferramentas de conversão automatizadas normalmente não oferecem os melhores resultados

Existem plug-ins do CMS disponíveis que permitem converter tabelas de documentos em tabelas HTML. Estes não são tão bons quanto construir a mesa manualmente, então se você quer resultados superiores, a automação deste tipo não é o caminho a percorrer.

Sua própria automação doméstica é boa, no entanto

Usar o PHP para construir suas tabelas a partir de informações de banco de dados é sempre uma boa idéia, e definitivamente preferível digitar tudo manualmente. A diferença aqui é que você tem controle total sobre como a automação funciona.

Quando você usa a automação de terceiros, o autor de terceiros precisa fazer suposições sobre sua tabela. Isso significa que você vai acabar com uma tabela genérica que pode não ter muitos recursos em comparação com a criação da tabela.

Use tabelas apropriadamente e elas te recompensarão

Boas mesas são projetadas, elas não acontecem. Quando você projeta um sistema de entrega de informações, você quer que ele seja eficiente e eficaz. Certifique-se de que suas tabelas sejam projetadas para serem apenas isso, e seu site obterá o máximo benefício de sua inclusão.

imagem de cabeçalho cortesia de

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.