Se quisermos entender melhor as tabelas responsivas, primeiro precisamos saber o que significa quando dizemos que um design \u00e9 responsivo.<\/p>\n
O design responsivo \u00e9 o design que se ajusta a telas de diferentes tamanhos. Quando falamos de uma imagem ou tabela HTML, trata-se do que acontece quando a tela \u00e9 mais estreita que a largura m\u00ednima de uma tabela de dados.<\/p>\n
Tabelas responsivas como parte de um design responsivo<\/strong><\/h3>\nTornar as tabelas responsivas tem sido um grande desafio desde a introdu\u00e7\u00e3o do web design responsivo<\/a>.<\/p>\nAs tabelas de dados geralmente s\u00e3o bastante amplas e uma \u00fanica linha de dados geralmente precisa ser mantida junta se quisermos que realmente fa\u00e7a sentido. \u00c9 claro que as tabelas podem ser flex\u00edveis em largura, mas isso \u00e9 realmente uma solu\u00e7\u00e3o? Bem, pode ser at\u00e9 o ponto em que eles come\u00e7am a agrupar o conte\u00fado das c\u00e9lulas de uma maneira que n\u00e3o queremos. H\u00e1 tamb\u00e9m um ponto em que eles simplesmente n\u00e3o podem ser mais estreitos.<\/p>\n
Felizmente, existem 3 padr\u00f5es que podem nos ajudar a resolver esse problema:<\/p>\n
\n- \n
O transbordamento horizontal<\/strong><\/h3>\n<\/li>\n<\/ol>\nA tabela de estouro horizontal em HTML pode ser facilmente vista inteira simplesmente rolando para a direita e para a esquerda. O primeiro campo geralmente \u00e9 fixo e os outros ficam vis\u00edveis \u00e0 medida que o usu\u00e1rio percorre o conte\u00fado.<\/p>\n
H\u00e1 uma desvantagem, no entanto. O usu\u00e1rio pode n\u00e3o saber ou perceber que a tabela \u00e9 rol\u00e1vel. Se isso acontecer, h\u00e1 uma chance de que eles percam a maior parte da mesa. Para evitar a possibilidade de o usu\u00e1rio n\u00e3o ver o conte\u00fado mais importante, os campos-chave devem estar nas 3 primeiras colunas.<\/p>\n
\n- \n
As Tabelas de Transi\u00e7\u00e3o<\/strong><\/h3>\n<\/li>\n<\/ol>\nUma tabela CSS de transi\u00e7\u00e3o \u00e9 uma boa solu\u00e7\u00e3o se voc\u00ea quiser evitar a rolagem, que \u00e9 a parte necess\u00e1ria da visualiza\u00e7\u00e3o das tabelas horizontais de estouro.<\/p>\n
O que acontece com esta tabela \u00e9 que os t\u00edtulos dos campos s\u00e3o formatados em pontos de interrup\u00e7\u00e3o CSS inferiores para um formato de linha em vez de uma estrutura de coluna.<\/p>\n
Infelizmente, tamb\u00e9m h\u00e1 uma desvantagem. Um CSS de tabela de transi\u00e7\u00e3o diminui a escaneabilidade e a compara\u00e7\u00e3o de campos.<\/p>\n
\n- \n
As tabelas de prioridade<\/strong><\/h3>\n<\/li>\n<\/ol>\nAs tabelas de prioridade simplesmente ocultam campos em tamanhos de tela menores. As tabelas formatadas assim geralmente ficam bonitas, mas os problemas ocorrem se os campos omitidos forem, de fato, os mais importantes.<\/p>\n
Abordagens de mesa responsivas<\/strong><\/h3>\nExistem v\u00e1rias maneiras de criar tabelas responsivas.<\/p>\n
\n- Squash<\/strong> \u2013 voc\u00ea pode comprimir o HTML da tabela horizontalmente movendo a borda da tabela HTML se n\u00e3o houver muito conte\u00fado nas colunas. Ao fazer isso, voc\u00ea pode evitar alterar todo o layout da sua tabela<\/li>\n
- Rolagem vertical<\/strong> \u2013 se voc\u00ea quiser evitar alterar o conte\u00fado e\/ou o layout de sua tabela, os usu\u00e1rios podem rolar para a esquerda e para a direita para ver a tabela completa<\/li>\n
- Recolher por linhas<\/strong> \u2013 voc\u00ea pode transformar sua tabela em v\u00e1rias tabelas menores dividindo cada linha em sua pr\u00f3pria coluna<\/li>\n
- \n
Recolher por colunas<\/strong> \u2013 voc\u00ea precisa aprender HTML para fazer isso porque essa parte \u00e9 um pouco complicada. Nas tabelas de estilo CSS, a ordem do c\u00f3digo \u00e9 pelas linhas da tabela e pelos
\nwrappers bloqueados. Se voc\u00ea deseja recolher sua tabela por colunas, voc\u00ea precisa manipular com JavaScript ou alterar a marca\u00e7\u00e3o.<\/p>\nCoisas a evitar ao construir uma tabela responsiva<\/strong><\/h3>\nAs pessoas tentaram muitos m\u00e9todos diferentes de construir tabelas responsivas e aqui est\u00e3o alguns que n\u00e3o s\u00e3o particularmente eficazes. Voc\u00ea provavelmente deve evit\u00e1-los completamente.<\/p>\n
\n- \n
\n- Usando JavaScript para gerar uma segunda tabela mais estreita e, em seguida, ocultar e mostrar alternadamente por ponto de interrup\u00e7\u00e3o. Esse m\u00e9todo dividir\u00e1 os IDs exclusivos nas tabelas.<\/li>\n
- Usando JavaScript e marca\u00e7\u00e3o de tabela normal em uma separa\u00e7\u00e3o para reorganizar a tabela. Tabelas horizontais e verticais exigem marca\u00e7\u00f5es diferentes, enquanto esse m\u00e9todo tamb\u00e9m requer manipula\u00e7\u00e3o de DOM e muitos ouvintes de eventos JS.<\/li>\n
- Mantendo a marca\u00e7\u00e3o da tabela e alternando para display:flex para conte\u00fado de tabela alinhado verticalmente.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
NOTA: Se todos os itens acima parecerem muito complicados para tentar \u2013 n\u00e3o desanime. Existem maneiras mais simples de criar tabelas responsivas. Voc\u00ea pode visitar w3schools.com para obter dicas mais \u00fateis (o HTML da w3schools oferece uma variedade de explica\u00e7\u00f5es e ajuda em HTML para os criadores de sites). Ent\u00e3o, vamos dar uma olhada em algumas das ferramentas que voc\u00ea pode achar \u00fateis.<\/p>\n
Como criar tabelas responsivas<\/strong><\/h2>\nPara WordPress<\/h3>\nwpDataTables<\/a><\/h4>\n
As tabelas de dados geralmente s\u00e3o bastante amplas e uma \u00fanica linha de dados geralmente precisa ser mantida junta se quisermos que realmente fa\u00e7a sentido. \u00c9 claro que as tabelas podem ser flex\u00edveis em largura, mas isso \u00e9 realmente uma solu\u00e7\u00e3o? Bem, pode ser at\u00e9 o ponto em que eles come\u00e7am a agrupar o conte\u00fado das c\u00e9lulas de uma maneira que n\u00e3o queremos. H\u00e1 tamb\u00e9m um ponto em que eles simplesmente n\u00e3o podem ser mais estreitos.<\/p>\n
Felizmente, existem 3 padr\u00f5es que podem nos ajudar a resolver esse problema:<\/p>\n
- \n
- \n
O transbordamento horizontal<\/strong><\/h3>\n<\/li>\n<\/ol>\n
A tabela de estouro horizontal em HTML pode ser facilmente vista inteira simplesmente rolando para a direita e para a esquerda. O primeiro campo geralmente \u00e9 fixo e os outros ficam vis\u00edveis \u00e0 medida que o usu\u00e1rio percorre o conte\u00fado.<\/p>\n
H\u00e1 uma desvantagem, no entanto. O usu\u00e1rio pode n\u00e3o saber ou perceber que a tabela \u00e9 rol\u00e1vel. Se isso acontecer, h\u00e1 uma chance de que eles percam a maior parte da mesa. Para evitar a possibilidade de o usu\u00e1rio n\u00e3o ver o conte\u00fado mais importante, os campos-chave devem estar nas 3 primeiras colunas.<\/p>\n
- \n
- \n
As Tabelas de Transi\u00e7\u00e3o<\/strong><\/h3>\n<\/li>\n<\/ol>\n
Uma tabela CSS de transi\u00e7\u00e3o \u00e9 uma boa solu\u00e7\u00e3o se voc\u00ea quiser evitar a rolagem, que \u00e9 a parte necess\u00e1ria da visualiza\u00e7\u00e3o das tabelas horizontais de estouro.<\/p>\n
O que acontece com esta tabela \u00e9 que os t\u00edtulos dos campos s\u00e3o formatados em pontos de interrup\u00e7\u00e3o CSS inferiores para um formato de linha em vez de uma estrutura de coluna.<\/p>\n
Infelizmente, tamb\u00e9m h\u00e1 uma desvantagem. Um CSS de tabela de transi\u00e7\u00e3o diminui a escaneabilidade e a compara\u00e7\u00e3o de campos.<\/p>\n
- \n
- \n
As tabelas de prioridade<\/strong><\/h3>\n<\/li>\n<\/ol>\n
As tabelas de prioridade simplesmente ocultam campos em tamanhos de tela menores. As tabelas formatadas assim geralmente ficam bonitas, mas os problemas ocorrem se os campos omitidos forem, de fato, os mais importantes.<\/p>\n
Abordagens de mesa responsivas<\/strong><\/h3>\n
Existem v\u00e1rias maneiras de criar tabelas responsivas.<\/p>\n
- \n
- Squash<\/strong> \u2013 voc\u00ea pode comprimir o HTML da tabela horizontalmente movendo a borda da tabela HTML se n\u00e3o houver muito conte\u00fado nas colunas. Ao fazer isso, voc\u00ea pode evitar alterar todo o layout da sua tabela<\/li>\n
- Rolagem vertical<\/strong> \u2013 se voc\u00ea quiser evitar alterar o conte\u00fado e\/ou o layout de sua tabela, os usu\u00e1rios podem rolar para a esquerda e para a direita para ver a tabela completa<\/li>\n
- Recolher por linhas<\/strong> \u2013 voc\u00ea pode transformar sua tabela em v\u00e1rias tabelas menores dividindo cada linha em sua pr\u00f3pria coluna<\/li>\n
- \n
Recolher por colunas<\/strong> \u2013 voc\u00ea precisa aprender HTML para fazer isso porque essa parte \u00e9 um pouco complicada. Nas tabelas de estilo CSS, a ordem do c\u00f3digo \u00e9 pelas linhas da tabela e pelos
\nwrappers bloqueados. Se voc\u00ea deseja recolher sua tabela por colunas, voc\u00ea precisa manipular com JavaScript ou alterar a marca\u00e7\u00e3o.<\/p>\nCoisas a evitar ao construir uma tabela responsiva<\/strong><\/h3>\n
As pessoas tentaram muitos m\u00e9todos diferentes de construir tabelas responsivas e aqui est\u00e3o alguns que n\u00e3o s\u00e3o particularmente eficazes. Voc\u00ea provavelmente deve evit\u00e1-los completamente.<\/p>\n
- \n
- \n
- \n
- Usando JavaScript para gerar uma segunda tabela mais estreita e, em seguida, ocultar e mostrar alternadamente por ponto de interrup\u00e7\u00e3o. Esse m\u00e9todo dividir\u00e1 os IDs exclusivos nas tabelas.<\/li>\n
- Usando JavaScript e marca\u00e7\u00e3o de tabela normal em uma separa\u00e7\u00e3o para reorganizar a tabela. Tabelas horizontais e verticais exigem marca\u00e7\u00f5es diferentes, enquanto esse m\u00e9todo tamb\u00e9m requer manipula\u00e7\u00e3o de DOM e muitos ouvintes de eventos JS.<\/li>\n
- Mantendo a marca\u00e7\u00e3o da tabela e alternando para display:flex para conte\u00fado de tabela alinhado verticalmente.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
NOTA: Se todos os itens acima parecerem muito complicados para tentar \u2013 n\u00e3o desanime. Existem maneiras mais simples de criar tabelas responsivas. Voc\u00ea pode visitar w3schools.com para obter dicas mais \u00fateis (o HTML da w3schools oferece uma variedade de explica\u00e7\u00f5es e ajuda em HTML para os criadores de sites). Ent\u00e3o, vamos dar uma olhada em algumas das ferramentas que voc\u00ea pode achar \u00fateis.<\/p>\n
Como criar tabelas responsivas<\/strong><\/h2>\n
Para WordPress<\/h3>\n
wpDataTables<\/a><\/h4>\n
- Rolagem vertical<\/strong> \u2013 se voc\u00ea quiser evitar alterar o conte\u00fado e\/ou o layout de sua tabela, os usu\u00e1rios podem rolar para a esquerda e para a direita para ver a tabela completa<\/li>\n
- Squash<\/strong> \u2013 voc\u00ea pode comprimir o HTML da tabela horizontalmente movendo a borda da tabela HTML se n\u00e3o houver muito conte\u00fado nas colunas. Ao fazer isso, voc\u00ea pode evitar alterar todo o layout da sua tabela<\/li>\n
- \n
- \n
![\"Tabelas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-200973-61e8bd6a5ae22.jpg\")
<\/a><\/p>\n