CSV a Tabla HTML

Insertar una tabla de datos en una publicación de blog, wiki interno o boletín de correo electrónico generalmente significa pelear con el editor de tablas de tu CMS. Pega el CSV aquí en su lugar: la primera fila se convierte en celdas <th>, cada fila posterior se convierte en <td>, y todo está envuelto en un elemento <table> mínimo sin estilos en línea. Marcado limpio que toma cualquier CSS que tu sitio proporcione.

Cómo se realiza la conversión

  1. 1

    Pega el CSV

    Los saltos de línea dividen las filas; `str_getcsv` analiza cada línea para que las comas entre comillas y las comillas escapadas se manejen correctamente.

  2. 2

    Alternar modo de encabezado

    Cuando está activado, la primera fila se emite con celdas `<th>`; cuando está desactivado, cada fila es un `<td>` simple.

  3. 3

    Los valores están escapados en HTML

    El convertidor llama al helper e() de Laravel para que `<`, `>` y `&` se escapen de forma segura en la salida.

  4. 4

    Copia el marcado

    El HTML está indentado con dos espacios para facilitar la lectura; pégalo directamente en un archivo Blade, una publicación de Markdown o una vista de fuente WYSIWYG.

Estilos y accesibilidad para la salida

El convertidor emite HTML estructuralmente simple, sin clases, sin estilos en línea, sin envolturas <thead> o <tbody>. Eso mantiene la salida portátil, pero puede que quieras adornarla.

Una hoja de estilos mínima

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
th { background: #f9fafb; font-weight: 600; }
tr:nth-child(even) td { background: #fafafa; }

Ganancias rápidas de accesibilidad

  • Envuelve la primera fila en un <thead> si tienes tablas largas; los lectores de pantalla anunciarán las columnas de encabezado a medida que los usuarios se muevan a través de las filas. El convertidor no hace esto automáticamente para mantener la salida mínima.
  • Añade un elemento <caption> encima de la tabla con una descripción en lenguaje sencillo de lo que representan los datos.
  • Usa scope="col" en celdas <th> si tu fila de encabezado describe columnas, scope="row" si la primera columna identifica filas.

Cuando HTML no es el formato adecuado

Si el consumidor es Markdown, usa el Convertidor de CSV a Markdown en su lugar. Si el consumidor es una base de datos, el Convertidor de CSV a SQL produce declaraciones INSERT que puedes ejecutar directamente. Las tablas HTML son excelentes para renderizar en páginas, mediocres para cualquier cosa que necesite ser consultada o reordenada.

Preguntas frecuentes

Sí. Los valores se escapan con el helper e() de Laravel, por lo que < se convierte en &lt; y el contenido proporcionado por el usuario no puede inyectar etiquetas de script o cerrar la tabla prematuramente.

No por defecto, la salida es una única <table> con hijos <tr> directos. Envuelve el <tr> de encabezado en <thead> y el resto en <tbody> si tu CSS objetivo lo requiere.

Las celdas que contienen saltos de línea incrustados se renderizan tal cual. Si deseas que los saltos de línea se muestren en el navegador, reemplázalos con <br> antes de la conversión o establece white-space: pre-wrap; en el CSS de <td>.

Sí. El CSV se envía a nuestro servidor para que el convertidor pueda construir la tabla. No se almacena y no se añade al enlace de la página.

Herramientas relacionadas

Herramienta disponible en otros idiomas