Planilha para tabela HTML

Uma tabela lida uma célula por vez

Quando você olha para uma tabela, os seus olhos pulam para o topo da coluna para lembrar o que um número significa. Quem usa um leitor de tela ouve uma célula por vez e não pode dar essa olhada para cima. Por isso o código precisa carregar a ligação entre um valor e o seu cabeçalho.

<table>
  <caption>Sales by region, 2026</caption>
  <thead>
    <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">North</th><td>$4,200</td></tr>
  </tbody>
</table>

Com scope="col" e scope="row", a célula é anunciada como “North, Revenue, $4,200”. A caption é lida quando o usuário entra na tabela, para que ele decida se vale a pena explorá-la. Uma captura de tela de uma planilha não oferece nada disso. Ela também não pode ser pesquisada e fica borrada quando ampliada.

Como as suas células são lidas

Quando você copia do Excel, do Google Sheets ou do LibreOffice, uma versão HTML do intervalo vai para a área de transferência. A ferramenta lê essa versão primeiro, e é assim que as células mescladas sobrevivem como colspan e rowspan.

Para texto digitado ou um arquivo CSV (até 5 MB, lido como UTF-8, senão como Windows-1252), a ferramenta precisa descobrir o separador. Se houver um caractere de tabulação em qualquer lugar, a questão está resolvida. Caso contrário, ela testa o ponto e vírgula, a vírgula e a barra vertical nas primeiras 30 linhas e fica com o que dá a contagem de colunas mais regular. Linhas e colunas vazias em volta dos dados são removidas.

O cabeçalho é a primeira linha. Se uma célula dessa linha estiver mesclada para baixo, o cabeçalho cresce para cobri-la, até três linhas.

O que acontece com números e datas

Uma coluna conta como numérica quando pelo menos 80 por cento das células preenchidas podem ser lidas como números. As colunas numéricas são alinhadas à direita para que os algarismos fiquem alinhados.

Números inteiros sem símbolo ficam como estão, a menos que a coluna também tenha valores monetários, para que os seus anos e números de referência não ganhem separador de milhar. Um valor que começa com zero é um código e nunca é alterado. Para o ambíguo 1,234, a ferramenta observa como o resto da planilha escreve os decimais antes de decidir.

As datas são reescritas como YYYY-MM-DD, a única ordem que ninguém lê errado. Para descobrir se uma coluna põe o dia ou o mês primeiro, a ferramenta procura um valor acima de 12 em uma das posições. Quando nenhuma célula resolve a dúvida, as datas ficam como foram digitadas e as verificações dizem quantas são.

Como ler as verificações

• Sem linha de cabeçalho, ou a primeira linha parece conter dados (mais da metade são números ou datas): adicione uma linha de títulos na planilha.
• Colunas sem título: uma célula de cabeçalho vazia deixa o leitor de tela sem nada para anunciar.
• Sem legenda: uma frase curta basta.
• Células mescladas mantidas: é válido, mas dificulta a navegação. Desfazer a mesclagem e repetir o valor é mais gentil.
• Linhas ou colunas vazias: numa planilha elas servem de espaçamento, numa página web são só bagunça.
• Tabela larga: mais de cinco colunas com a rolagem lateral desativada.

Quando nenhum aviso se aplica, uma linha confirma que a estrutura é acessível.

Dois tipos de saída

Para WordPress

A tabela fica dentro de um <figure class="wp-block-table"> quase sem estilo, para que o seu tema a desenhe como qualquer outra tabela. Cole o código num bloco HTML personalizado.

Independente

O código vem com um pequeno bloco <style> ligado a um nome de classe único, para qualquer outro site ou uma página própria. Você também pode baixá-lo como um arquivo .html completo.

Com a rolagem ativada, o contêiner recebe role="region", tabindex="0" e um rótulo tirado da legenda. Assim, quem usa o teclado pode focar a área e rolá-la com as setas.

Só os valores das células fazem a viagem. Fórmulas, cores das células, negrito, larguras de coluna e formatos de número que existem apenas nas configurações de exibição da planilha ficam para trás.