Convertidor de CSV a Tabla HTML

¿Qué es la conversión de CSV a tabla HTML?

La conversión de CSV a tabla HTML toma valores separados por comas y los transforma en marcado HTML estructurado que los navegadores pueden renderizar como una tabla visual. La salida utiliza los elementos de tabla HTML estándar definidos en el HTML Living Standard: table, thead, tbody, tr, th y td. Este proceso mapea cada fila CSV a un elemento tr y cada campo a una celda td o th.

Los archivos CSV almacenan datos como texto plano con filas separadas por saltos de línea y campos separados por delimitadores (típicamente comas). Aunque CSV funciona bien para el almacenamiento de datos y la transferencia entre aplicaciones como Excel, Google Sheets y bases de datos, no tiene capa de presentación. Las tablas HTML añaden esa capa envolviendo los datos en marcado semántico que admite estilos con CSS, ordenación con JavaScript y accesibilidad mediante atributos como scope y aria-label.

La conversión debe gestionar varios casos especiales definidos en RFC 4180: campos entre comillas que contienen comas o saltos de línea, comillas dobles escapadas dentro de campos, y delimitadores variables (punto y coma, tabuladores, tuberías). Un conversor correcto también escapa las entidades HTML en el contenido de las celdas, reemplazando <, >, & y comillas con sus equivalentes de entidad para evitar marcado roto o vulnerabilidades XSS.

¿Por qué usar un conversor de CSV a tabla HTML?

Construir tablas HTML a mano es tedioso y propenso a errores, especialmente para conjuntos de datos con decenas de columnas o cientos de filas. Este conversor gestiona el análisis, el escape y el formateo en un solo paso.

Casos de uso de CSV a tabla HTML

Referencia de elementos de tabla HTML

Una tabla HTML bien estructurada usa elementos semánticos que separan encabezados, cuerpo y pie. Los lectores de pantalla y los motores de búsqueda utilizan estos elementos para comprender la estructura de la tabla. Agrupar filas con thead, tbody y tfoot permite a los navegadores aplicar desplazamiento independiente y repetir las filas de encabezado en diseños de impresión.

CSV vs tabla HTML

CSV es un formato de transporte optimizado para la simplicidad, mientras que HTML es un formato de presentación optimizado para el renderizado, la accesibilidad y la interactividad en los navegadores.

Ejemplos de código

Así se convierte CSV a tablas HTML mediante programación en distintos lenguajes. Cada ejemplo gestiona la fila de encabezado por separado y escapa las entidades HTML en el contenido de las celdas. Estos fragmentos están listos para insertarse en un script, una cadena de compilación o un endpoint de API que genere informes HTML a partir de exportaciones de datos.

// 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

Preguntas frecuentes