Um guia abrangente para criar tabelas HTML melhores em 2024

Se você assinar um serviço de um link nesta página, a Reeves and Sons Limited pode ganhar uma comissão. Veja nosso Declaração de ética.

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

In this article we’ll take a look at how to avoid problems like that, so your tables have the best chance of creating a good impression.

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.

An image of a table won’t suffer the problems that are listed in the introduction, but degrades your SEO potential and can’t be easily modified if your data needs updating. It also introduces usability and accessibility problems.

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.

A aparência 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 mesa parecer boa. Também deve ser útil emformatsistema de entrega de íons. Se o objetivo da tabela não é transmitir emformation, then you shouldn’t be using a table for whatever it is you are doing.

Apontar para acessibilidade

Some people have difficulty seeing and reading printed text, so it’s a good idea to make tables accessible for them. You can find out everything you need to know about making your tables more accessible from WebAIM.

Considere dar valores de ID aos componentes da tabela

Para obter o máximo de controle sobre cada parte da tabela (linhas, células), você pode considerar fornecê-los emdivivalores de ID duplos. Adicionar valores de classe também lhe dará ainda mais flexibilidade.

Doing these things creates a lot more work for you, so it’s only practical when you need to be able to fine tune any item by reference. If you do decide to do this, you will be able to directly manipulate any table item using JavaScript and 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.

Effectively it means columns exist only in an abstract sense before the page is rendered, so you can’t give them any kind of reference. By giving the first TD item on a row a class of, for example, “firstCol”, you provide a way to directly reference a column.

Mesas compactas são melhores

It has become fashionable to build everything with big, high visibility components. From an accessibility point-of-view, this is wonderful. In terms of usability, however, it isn’t always the best way, because it can lead to problems.

Os desenvolvedores do Bootstrap experimentaram responsive mesas, mas mesas e responsiveness don’t go well together. Designing your tables from the start so they’ll fit on a mobile screen in portrait mode is a smart move.

Tabelas devem sempre ser roláveis

It’s a good practice to always set the overflow value of a table to auto, but not on the table itself. Instead, wrap the table inside a div, something like this:

Then there’s a lot of PHP code that constructs the table body, closing with this:

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.

The most impressive option you’d want for a WordPress site is wpDataTables, uma tabela do WordPress plugin que facilita seu trabalho com tabelas, gráficos e gerenciamento de dados. Com ele, você pode criar responsive Tabelas e gráficos do WordPress.

wpdatatable plugin

A plugin works really quick with large tables, up to millions of rows, but you can also do a lot of customizations and filtering on the tables almost as if you’d be in Excel or Google Spreadsheets.

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.

While the features of these kinds of tools can be exciting, it’s important to that they’re going to add even more to your page loading time. It’s best to save this kind of thing for when you really must have it.

Automated conversion tools won’t normally give best results

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

Usando PHP para construir suas tabelas do banco de dados emformation é sempre uma boa ideia, e definitivamente preferível a digitar tudo manualmente. A diferença aqui é que você tem controle total sobre como a automação funciona.

When you use third party automation, the third party author has to make assumptions about your table. This means you’ll end up with a generic table that may lack many features compared to creating the table yourself.

Use tabelas apropriadamente e elas te recompensarão

Good tables are designed, they don’t just happen. When you design an informatsistema de entrega de íons, você quer que ele seja eficiente e eficaz. Certifique-se de que suas tabelas sejam projetadas para ser exatamente 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á.

Comentários Respostas 0

Deixe um comentário

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *

NOTA *

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.