Conversor de CSV a Tabla HTML
Convierte archivos CSV en un fragmento HTML con el marcado <table><tr><td>. Elige el delimitador, si se usa la primera línea como encabezado y si las filas se envuelven en <thead>/<tbody>. El resultado se previsualiza en vivo y se puede copiar o descargar. La conversión se realiza completamente en tu navegador; no se envían datos a ningún servidor.
| Delimitador |
|
|---|---|
| Usar la primera línea como encabezado | |
| Envolver en thead/tbody |
Vista previa
Código HTML
¡Copiado!Introduce datos CSV para ver aquí la tabla HTML generada.
Cómo se corresponde una fila de CSV con una tabla HTML
| Una fila de CSV | name,age,city |
|---|---|
| Marcado HTML resultante | <tr><td>name</td><td>age</td><td>city</td></tr> |
Cuando la primera línea se usa como encabezado, se convierte en una fila de etiquetas <th>; cada fila posterior se convierte en una fila de etiquetas <td>.
Qué es la conversión de CSV a tabla HTML
Escribir una tabla en HTML obliga a alinear un <tr> por fila y un <td> por celda, lo que resulta laborioso a mano. Esta herramienta lee un CSV y lo convierte en un fragmento HTML en forma de <table>. El resultado se previsualiza en el momento, así que ve antes de copiar cómo se presentará en su destino.
Los caracteres <, > y & que haya en las celdas se convierten automáticamente en entidades HTML, de modo que los datos con esos símbolos no rompen la presentación. Puede además elegir si envolver la tabla en thead y tbody. Semánticamente conviene incluirlos, pero en entornos de interpretación incierta —el correo HTML en primer lugar— la forma mínima sin ellos se sostiene mejor.
Cómo construir una tabla HTML
- Pegue el CSV Pegue el CSV en el campo de entrada. Si lo copió de una hoja de cálculo, cambie el separador a tabulación.
-
Decida sobre la fila de encabezado
Active la opción correspondiente y la primera fila se emitirá con etiquetas
<th>. - Decida sobre thead y tbody Por regla general puede dejarlos activados. Desactívelos para entornos de presentación incierta, como el correo HTML.
- Compruebe la previsualización y copie Mire la tabla tal como se representa realmente y, si le sirve, copie el código HTML y péguelo.
Consejos para aprovecharla mejor
- Al pegar en un correo HTML o en un CMS antiguo sin soporte para Markdown, la salida mínima sin thead/tbody suele ser más fácil de usar.
- Cualquier
<,>o&dentro de una celda se escapa automáticamente a entidades HTML, así que pegar el código generado no romperá el diseño. - La vista previa renderiza la tabla convertida tal como lo haría un navegador, para que puedas comprobar su aspecto antes de copiar el código.
- Combínalo con las herramientas hermanas CSV a Markdown y CSV a JSON para convertir un mismo CSV al formato que necesites.
Cuándo resulta útil convertir CSV a HTML
Poner una tabla en un blog o CMS
Incluso en un CMS sin Markdown, pegar en el modo de edición HTML permite publicar una tabla.
Insertar una tabla en un correo HTML
El correo no interpreta Markdown: una tabla exige HTML. La forma mínima, retirados thead y tbody, se sostiene mejor.
Fabricar una maqueta antes de la implementación
En la fase de diseño de pantallas, transforma en el acto en HTML una tabla cercana a los datos reales. Sirve también para comprobar la aplicación de los estilos.
Publicar sin riesgo datos con símbolos
Los valores que contienen ángulos o ampersands se escapan automáticamente, así que la maquetación no se rompe en el destino.
El vocabulario de las tablas HTML
- El elemento table
- La etiqueta HTML que representa una tabla. Para su uso propio —expresar datos reales con filas y columnas— sigue siendo hoy la etiqueta adecuada.
- th y td
<th>es una celda de encabezado y<td>una celda de datos. Distinguirlas permite a los lectores de pantalla transmitir su correspondencia.- thead y tbody
- Etiquetas que separan semánticamente la parte del encabezado de la del cuerpo. Influyen también en la repetición del encabezado al imprimir una tabla larga.
- Entidad HTML
- Una escritura que presenta los símbolos sin riesgo.
<se sustituye así por<. - Maquetación con tablas
- La antigua técnica de construir toda la estructura de columnas de una página con marcado de tabla. Hoy se tiene por un antipatrón declarado.
Preguntas Frecuentes
<table> estándar, así que se puede pegar directamente en el modo de edición HTML de WordPress o en el cuerpo de un correo HTML.
A propósito — Por qué la etiqueta <table> se resiste a desaparecer
A finales de los años 90, en los inicios de la Web, el "diseño con tablas" —construir toda la maquetación de una página con etiquetas <table>— era la norma. CSS tenía entonces muy poca capacidad de maquetación, y las tablas eran prácticamente el único recurso para lograr columnas múltiples, así que el código HTML de la época estaba lleno de elementos <table> que nada tenían que ver con datos tabulares.
Ahora que CSS ha madurado y Flexbox y Grid están muy extendidos, usar tablas para maquetar se considera un antipatrón conocido. Pero para su propósito original —representar datos reales organizados en filas y columnas— <table> sigue siendo la opción más adecuada y accesible, ya que los lectores de pantalla pueden anunciar la relación entre las celdas <th> y <td>.
La necesidad de pegar contenido CSV en una entrada de blog o en un boletín por correo sigue siendo habitual, ya que el correo HTML no puede renderizar Markdown y algunos CMS carecen de un complemento para ello. Una herramienta que convierte el resultado de una hoja de cálculo en una tabla HTML con un solo clic responde a esta necesidad práctica, sencilla pero persistente.