Conversor CSV para Tabela HTML

O que é a Conversão de CSV para Tabela HTML?

A conversão de CSV para tabela HTML transforma valores separados por vírgula em marcação HTML estruturada que os navegadores podem renderizar como uma tabela visual. A saída utiliza os elementos padrão de tabela HTML definidos no HTML Living Standard: table, thead, tbody, tr, th e td. Esse processo mapeia cada linha do CSV para um elemento tr e cada campo para uma célula td ou th.

Arquivos CSV armazenam dados como texto simples, com linhas separadas por quebras de linha e campos separados por delimitadores (geralmente vírgulas). Embora o CSV funcione bem para armazenamento e transferência de dados entre aplicações como Excel, Google Sheets e bancos de dados, ele não possui camada de apresentação. As tabelas HTML adicionam essa camada envolvendo os dados em marcação semântica que suporta estilização com CSS, ordenação com JavaScript e acessibilidade por meio de atributos como scope e aria-label.

A conversão precisa tratar diversos casos especiais definidos pelo RFC 4180: campos entre aspas contendo vírgulas ou quebras de linha, aspas duplas escapadas dentro de campos e delimitadores variados (ponto e vírgula, tabulação, pipe). Um conversor correto também escapa entidades HTML no conteúdo das células, substituindo <, >, & e aspas pelos equivalentes em entidades, para evitar marcação corrompida ou vulnerabilidades XSS.

Por que usar um Conversor de CSV para Tabela HTML?

Construir tabelas HTML manualmente é tedioso e sujeito a erros, especialmente para conjuntos de dados com dezenas de colunas ou centenas de linhas. Este conversor resolve a análise, o escape e a formatação em uma única etapa.

Casos de Uso do Conversor CSV para Tabela HTML

Referência de Elementos de Tabela HTML

Uma tabela HTML bem estruturada usa elementos semânticos que separam cabeçalhos, corpo e rodapé. Leitores de tela e mecanismos de busca utilizam esses elementos para entender a estrutura da tabela. Agrupar linhas com thead, tbody e tfoot permite que os navegadores apliquem rolagem independente e repitam linhas de cabeçalho em layouts de impressão.

CSV vs Tabela HTML

CSV é um formato de transporte otimizado para simplicidade, enquanto HTML é um formato de apresentação otimizado para renderização, acessibilidade e interatividade nos navegadores.

Exemplos de Código

Veja como converter CSV para tabelas HTML de forma programática em diferentes linguagens. Cada exemplo trata a linha de cabeçalho separadamente e escapa entidades HTML no conteúdo das células. Esses trechos estão prontos para uso em um script, um pipeline de build ou um endpoint de API backend que gera relatórios HTML a partir de exportações de dados.

// CSV string → HTML table with thead/tbody
const csv = `name,age,city
Alice,30,Berlin
Bob,25,Tokyo`

function csvToHtmlTable(csv) {
  const rows = csv.trim().split('\n').map(r => r.split(','))
  const [headers, ...data] = rows
  const ths = headers.map(h => `<th>${h}</th>`).join('')
  const trs = data.map(row =>
    '    <tr>' + row.map(c => `<td>${c}</td>`).join('') + '</tr>'
  ).join('\n')
  return `<table>
  <thead><tr>${ths}</tr></thead>
  <tbody>
${trs}
  </tbody>
</table>`
}

console.log(csvToHtmlTable(csv))
// → <table><thead><tr><th>name</th>...</tr></thead><tbody>...</tbody></table>

import csv, io, html

csv_string = """name,age,city
Alice,30,Berlin
Bob,25,Tokyo"""

reader = csv.reader(io.StringIO(csv_string))
headers = next(reader)

lines = ['<table>', '  <thead>', '    <tr>']
for h in headers:
    lines.append(f'      <th>{html.escape(h)}</th>')
lines += ['    </tr>', '  </thead>', '  <tbody>']

for row in reader:
    lines.append('    <tr>')
    for cell in row:
        lines.append(f'      <td>{html.escape(cell)}</td>')
    lines.append('    </tr>')

lines += ['  </tbody>', '</table>']
print('\n'.join(lines))
# → well-formed HTML table with escaped special characters

<?php
$csv = "name,age,city\nAlice,30,Berlin\nBob,25,Tokyo";
$rows = array_map('str_getcsv', explode("\n", trim($csv)));
$headers = array_shift($rows);

echo "<table>\n  <thead>\n    <tr>\n";
foreach ($headers as $h) {
    echo "      <th>" . htmlspecialchars($h) . "</th>\n";
}
echo "    </tr>\n  </thead>\n  <tbody>\n";

foreach ($rows as $row) {
    echo "    <tr>\n";
    foreach ($row as $cell) {
        echo "      <td>" . htmlspecialchars($cell) . "</td>\n";
    }
    echo "    </tr>\n";
}
echo "  </tbody>\n</table>";
// → <table><thead>...<th>name</th>...</thead><tbody>...</tbody></table>

# Using awk — quick one-liner for simple CSV (no quoted fields)
awk -F, 'NR==1{print "<table><thead><tr>";for(i=1;i<=NF;i++)print "<th>"$i"</th>";print "</tr></thead><tbody>"}
NR>1{print "<tr>";for(i=1;i<=NF;i++)print "<td>"$i"</td>";print "</tr>"}
END{print "</tbody></table>"}' data.csv

# Using Python one-liner for RFC 4180-compliant parsing
python3 -c "
import csv, sys, html
r=csv.reader(sys.stdin); h=next(r)
print('<table><thead><tr>')
print(''.join(f'<th>{html.escape(c)}</th>' for c in h))
print('</tr></thead><tbody>')
for row in r:
    print('<tr>'+''.join(f'<td>{html.escape(c)}</td>' for c in row)+'</tr>')
print('</tbody></table>')
" < data.csv

Perguntas Frequentes