As tabelas de dados não lidam muito bem com design responsivo. Infelizmente, esse momento existe. O design responsivo consiste em personalizar seu design para acomodar diferentes tamanhos de tela. Então, o que acontece quando a tela é mais estreita que a largura mínima da tabela de dados? Você pode diminuir o zoom e ver a tabela inteira, mas o tamanho do texto será muito pequeno para ser lido. Ou você pode ampliar o ponto de leitura, mas precisará rolar verticalmente e horizontalmente e (infelizmente) visualizar a tabela. As tabelas de dados podem ser bastante amplas e certamente são. As tabelas podem ser flexíveis em largura (peso = 100%), mas o conteúdo das células pode se tornar tão estreito que simplesmente não pode ser visto.

Para evitar esse momento desagradável, são utilizadas tabelas adaptativas. Essa tabela exibirá uma barra de rolagem horizontal se a tela for muito pequena para exibir o conteúdo completo.

Para criar uma tabela responsiva, adicione um elemento contêiner overflow-x:auto em volta

Observação. No OS X Lion (no Mac), as barras de rolagem ficam ocultas por padrão e só aparecem quando em uso (mesmo se definidas como "overflow:scroll" ou auto).

Os sites adaptativos há muito deixaram de ser uma curiosidade e estão se tornando cada vez mais comuns. Considerando as últimas notícias sobre os rankings dos motores de busca (se alguém não sabe, a prioridade é dada aos sites responsivos nas pesquisas a partir de um dispositivo móvel), o número desses sites continuará a crescer. Você pode ser contra ou a favor da adaptação para dispositivos móveis, mas o fato é que cada vez mais os clientes exigem que seu site seja adaptável e os webmasters têm que fazê-lo.

Um dos principais problemas na hora de adaptar um site para diferentes resoluções são as tabelas. Especialmente se contiverem muitos dados. Vejamos duas maneiras de fazer o layout de uma tabela responsiva.

Primeiro, vamos ver como fica a tabela:

Sejamos honestos: tal tabela não pode ser considerada verdadeiramente adaptativa. Parece bom no celular, nada se destaca e o layout do site não “flui”. Este método é adequado se as tabelas são raras em seu site e não faz sentido conectar algum plugin e escrever estilos adicionais por causa delas. Este método é usado pelo Bootstrap. Então, como isso funciona?

É simples: a tabela é envolvida em um div, que tem largura máxima de 100% e overflow: auto.

Se a mesa for longa, você também pode definir a altura máxima e fixar o cabeçalho da mesa.

O resultado, assim como o exemplo a seguir, pode ser visualizado nesta página.

Se você costuma ter tabelas em seu site, faz sentido usar o plugin Footable.

Primeiro você precisa conectar o plugin (baixá-lo no GitHub ou conectá-lo de um CDN) e também inicializá-lo:

$(função() ( $(".tabela").footable(); ));

Aqui precisamos esclarecer uma coisa: por algum motivo o script não conta a largura da viewport, mas sim a largura da tabela. Para corrigir isso, você precisa “modernizar” um pouco o script:

JQuery(function () ( jQuery(".table").footable(( calculWidthOverride: function() ( return (width: jQuery(window).width()); ) )); ))

Na inicialização, especificamos a classe da tabela ou apenas a tag da tabela se quisermos que todas as tabelas do site sejam adaptativas.

O que tudo isso significa? Nos tablets, as colunas “RAM”, “Diagonal”, “PPI” e “Bateria” ficarão ocultas. Quando reduzida aos telefones, a coluna “Preço” também se juntará a eles.

Os pontos de verificação podem ser especificados na inicialização:

JQuery(function () ( jQuery(".table").footable(( calculWidthOverride: function() ( return (width: jQuery(window).width()); ), pontos de interrupção: ( celular: 0, tablet: 720, área de trabalho: 1024 ) ));

Isso significa que no intervalo de 0 a 720 a regra se aplica para dispositivos móveis, de 720 a 1024 para tablets e acima de 1024 para computadores. Não há nada que o impeça de criar ainda mais regras, se necessário.

Você também pode garantir que alguma coluna seja expandida por padrão. Para fazer isso, especifique o atributo de dados data-expanded="true"

As capacidades do plugin não param por aí, mas é suficiente para criar tabelas adaptáveis. Veremos outras possibilidades na próxima vez.

janelas: Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.5+, Google Chrome/Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].

Se uma tabela HTML contiver muitos dados, ela se tornará maior que o espaço disponível na página e começará a transbordar. Para remediar a situação, você pode adicionar rolagem horizontal à tabela. Exemplo:

HTML/XHTML. Código:

1

2

3

4

5

6

7

8

9

10

Tabela_dados_1

Tabela_dados_2

Tabela_dados_3

Tabela_dados_4

Tabela_dados_5

Tabela_dados_6

Tabela_dados_7

Tabela_dados_8

Tabela_dados_9

Tabela_dados_10

tabela (exibição: bloco; overflow-x: auto;)

/* CSS adicional, apenas para dar uma aparência ao exemplo: */

tabela (colapso de borda: colapso;)

tabela td,th (preenchimento: 10px; borda: 1px #000 sólido;)

Nota: A propriedade CSS display: block faz com que a tabela ocupe apenas a largura necessária para acomodar os dados sem distorção visual. Não mais, sem esticar toda a largura do espaço disponível na página. Mesmo que width: 100% seja adicionado ao código CSS. Exemplo:

Aliosque subditos e tema

Existem muitos serviços online para a criação de sitemap.xml. No entanto, você pode fazer isso sozinho em seu computador usando o navegador lynx e vários utilitários de linha de comando do Linux. A seguir está um exemplo de um script bash chamado “sitemap.sh” que os utiliza. Script Bash que cria o arquivo sitemap.xml: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e "s/\\.//g" | classificar | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/ \&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i " s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/