Tabelas que todo mundo consegue ler

Cole os dados de uma planilha e leve a tabela com os cabeçalhos certos, a legenda e uma versão que funciona no celular, em HTML, LaTeX ou Markdown.

Régua das Tabelas · em teste

1. Os dados

A primeira linha tem os títulos das colunas. Pode colar várias células de uma planilha direto na tabela.

Colar de uma planilha

Selecione as células no Excel ou no Google Planilhas, com a linha de títulos, copie e cole aqui.

Subir um arquivo CSV

2. Legenda e cabeçalhos

Legenda (o nome da tabela)

Fonte (opcional)

A primeira coluna dá nome a cada linhaAssim o leitor de tela diz, junto com cada valor, de que linha e de que coluna ele é (ex.: “Telefone, Pedidos, 1.200”).

No celular

Virar cartõesCada linha vira um cartão, com o título da coluna antes de cada valor. Bom para tabelas com muitas colunas.Rolar para o ladoA tabela continua igual e rola dentro de uma área que também recebe o foco do teclado. Bom para comparar colunas.

3. A tabela pronta

No computadorNo celular

4. O código

HTMLPara sites e sistemas: a tabela, a legenda e o estilo com a versão para celular.LaTeXPara artigos: tabela com booktabs, legenda e rótulo para citar no texto.MarkdownPara wikis, GitHub e editores que aceitam Markdown.

Incluir o estilo (CSS), com a versão para celular

<div class="tabela-acessivel tabela-cartoes">
  <table role="table" aria-labelledby="tabela-1-legenda">
    <caption id="tabela-1-legenda">Prazo de resposta por canal de atendimento, 2026</caption>
    <thead role="rowgroup">
      <tr role="row"><th scope="col" role="columnheader">Canal</th><th scope="col" role="columnheader" class="numero">Pedidos</th><th scope="col" role="columnheader" class="numero">Respondidos no prazo</th><th scope="col" role="columnheader" class="numero">Prazo médio (dias)</th></tr>
    </thead>
    <tbody role="rowgroup">
      <tr role="row"><th scope="row" role="rowheader" data-label="Canal">Site</th><td role="cell" data-label="Pedidos" class="numero">3.450</td><td role="cell" data-label="Respondidos no prazo" class="numero">91%</td><td role="cell" data-label="Prazo médio (dias)" class="numero">2,4</td></tr>
      <tr role="row"><th scope="row" role="rowheader" data-label="Canal">Aplicativo</th><td role="cell" data-label="Pedidos" class="numero">2.780</td><td role="cell" data-label="Respondidos no prazo" class="numero">88%</td><td role="cell" data-label="Prazo médio (dias)" class="numero">2,9</td></tr>
      <tr role="row"><th scope="row" role="rowheader" data-label="Canal">Telefone</th><td role="cell" data-label="Pedidos" class="numero">1.200</td><td role="cell" data-label="Respondidos no prazo" class="numero">76%</td><td role="cell" data-label="Prazo médio (dias)" class="numero">4,1</td></tr>
      <tr role="row"><th scope="row" role="rowheader" data-label="Canal">Presencial</th><td role="cell" data-label="Pedidos" class="numero">960</td><td role="cell" data-label="Respondidos no prazo" class="numero">94%</td><td role="cell" data-label="Prazo médio (dias)" class="numero">1,2</td></tr>
    </tbody>
  </table>
  <p class="tabela-fonte">Fonte: Dados fictícios</p>
</div>
<style>
.tabela-acessivel table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.tabela-acessivel caption { text-align: start; font-weight: 700; padding-bottom: 0.5rem; }
.tabela-acessivel th, .tabela-acessivel td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #D0D5DD; text-align: start; vertical-align: top; }
.tabela-acessivel thead th { border-bottom: 2px solid #101828; }
.tabela-acessivel .numero { text-align: end; }
.tabela-acessivel .tabela-fonte { font-size: 0.875rem; margin-top: 0.5rem; }
.tabela-acessivel.tabela-rolar { overflow-x: auto; }
.tabela-acessivel.tabela-rolar:focus-visible { outline: 3px solid #3538CD; outline-offset: 2px; }
@media (max-width: 600px) {
  .tabela-acessivel.tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabela-acessivel.tabela-cartoes table, .tabela-acessivel.tabela-cartoes tbody, .tabela-acessivel.tabela-cartoes tr, .tabela-acessivel.tabela-cartoes th, .tabela-acessivel.tabela-cartoes td { display: block; }
  .tabela-acessivel.tabela-cartoes tr { border: 1px solid #D0D5DD; border-radius: 8px; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; }
  .tabela-acessivel.tabela-cartoes tbody th { border: 0; padding: 0.25rem 0; font-size: 1.05em; }
  .tabela-acessivel.tabela-cartoes td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.25rem 0; text-align: end; }
  /* O título da coluna aparece antes de cada valor; o "/ ''" evita que o leitor de tela o leia duas vezes */
  .tabela-acessivel.tabela-cartoes td::before { content: attr(data-label); content: attr(data-label) / ""; font-weight: 600; text-align: start; }
}
</style>

O que faz uma tabela acessível

Uma legenda que diga do que é a tabela, ligada a ela (no HTML, o <caption>).
Títulos de coluna marcados como cabeçalho, e a primeira coluna também quando ela dá nome às linhas.
Nada de células mescladas: leitores de tela se perdem nelas. Se precisar agrupar, divida em duas tabelas.
Números alinhados à direita e com o mesmo número de casas decimais, para comparar de olho.
Tabela só para dados: para arrumar a página, use o layout, não uma tabela.

Vai usar num artigo ou trabalho acadêmico?

As tabelas são suas, e não precisa pedir licença. Se o Ramplifica ajudou, fale da gente nos agradecimentos: assim mais pessoas chegam a ferramentas de inclusão. Uma sugestão de texto:

As tabelas foram feitas com a Régua das Tabelas, do Ramplifica (https://ramplifica.com.br/regua/tabelas).

O que faltou nesta ferramenta?

Ela está em teste. Uma ideia, uma dúvida ou algo que deu errado ajudam a melhorá-la. Enviar uma sugestão