Eu sei disso! Já passou o tempo das tabelas aninhadas que se usava para criar layout! Ufa! Só que também devemos ter cuidado com as informações tabulares que disponibilizamos na web, sejam elas consultas de bancos de dados, dados armazenados em planilhas eletrônicas ou uma tabela simples que o secretária da empresa criou no editor de texto (broffice ou word).

Vamos ver o seguinte cenário: Você acaba de receber uma planilha eletrônica (excel ou calc) com a tabela abaixo e tem que disponibilizar em uma página web o mais rápido possível. A imagem a seguir é fictícia e representa a programação de algum evento no formato de uma tabela, representando uma agenda mensal.

Como a divulgação precisa ser imediata, o primeiro pensamento é utilizar a opção salvar como HTML do Excel. Só que isso é muito inapropriado, pois vai gerar um arquivo com absurdas 311 linhas de código. Se olharmos para o código vamos perceber que a maior parte dele é desnecessário e na parte 2 desse post, vamos ver como eliminar todo o código desnecessário, de um jeito que façamos o mínimo esforço possível.

Parte 2: Gerando uma tabela HTML enxuta com o mínimo esforço possível:

Nesse experimento utilizei o notepad++ que é gratuito e simples de usar. O primeiro passo é selecionar a tabela da planilha do excel e colar em um novo documento criado no notepad++. Nosso objetivo aqui é transformar esses dados no formato Textyle, um padrão simples de estruturação de texto. Para isso devemos identificar agora os padrões de estruturação do código e em seguida modificar para o padrão de tabela no formato Textyle.

O código acima segue o seguinte padrão:

• as células estão separadas por tabulações
• vamos focar nos comandos de início de linha “^”, fim de linha “$” e tabulação “t”

Com Ctrl+H abrimos a janela substituir no notepad++ e digitamos o caractere “^” no campo localizar. No campo substituir por digitamos o caractere | (pipe) que é, no padrão textyle, o delimitador das células de uma tabela.  Mais abaixo devemos marcar a opção Expressão regular, que vai fazer com que a busca encontre o início de cada linha do código. Para finalizar devemos clicar no botão substituir para cada linha da tabela. O Resultado é o código iniciado pelo caractere | em cada linha.

Seguindo o mesmo padrão anterior vamos fazer as alterações de final de linha utilizando agora o caractere “$” no campo localizar:

Finalmente vamos preencher os espaços entre as células colocando o caractere de tabulação no campo localizar, “t”. Dessa vez podemos clicar em substituir todos:

Por útimos copiamos esse código e colamos no site http://www.textism.com/tools/textile/ para gerar a tabela final. Esse site possui uma ferramenta que transforma o código no formato textyle em HTML. Devemos lembrar de colocar qualquer caractere entre os pipes que estão vazios (|| célula vazia). Nesse caso estou colocando somente um ponto (|.|).

O resultado vocês podem ver abaixo. Ao invés das 311 linhas de código da opção salvar como HTML do Excel, agora nós temos somente 56 linhas de código, super enxuto e de forma produtiva (sem perder muito tempo e sem alterar código de forma manual):