Guía · CSV → tabla
De CSV a una tabla HTML, incluidos los grandes
Un CSV es un archivo de texto con una convención de puntuación, y hay varias convenciones. La mayoría de los problemas de conversión son en realidad desacuerdos sobre cuál está usando un archivo.
Esto cubre cómo se elige el delimitador, qué hacen las comillas, y dónde están de verdad los límites de tamaño.
El delimitador se detecta, no se supone
Comas, puntos y comas, tabuladores y barras verticales: todos se usan. Los puntos y comas sobre todo: exporta una hoja de cálculo en una región donde la coma es el separador decimal y te salen puntos y comas, porque la coma ya está ocupada.
La detección lee las diez primeras filas, prueba cada candidato, y elige el que da un número de columnas consistente. Un archivo cuyas primeras filas sean raras — una línea de título encima del encabezado, por ejemplo — puede leerse mal, así que el delimitador detectado se indica en la salida. Si está mal, cámbialo a mano.
- 01Suelta el archivo y mira la nota que hay encima de la tabla diciendo qué delimitador se usó.
- 02Si la tabla tiene una columna cuando debería tener seis, fija el delimitador a mano desde el desplegable.
- 03Comprueba que la primera fila cayó en el encabezado. Si el archivo no tiene encabezado, desactiva esa opción y todas las filas pasan al cuerpo.
Campos entrecomillados, y la coma dentro de una celda
Un campo entre comillas dobles puede contener el delimitador, y una comilla duplicada dentro significa una comilla literal. Eso es RFC 4180 y está bien resuelto.
Un campo entrecomillado también puede contener un salto de línea. En el HTML esos se vuelven <br> dentro de la celda, así que una dirección de dos líneas se queda en dos líneas en vez de romper la fila.
name,note
Bolt,"M6, 40mm"
<tr>
<td>Bolt</td>
<td>M6, 40mm</td>
</tr>El aviso del archivo de una columna
Un CSV de una sola columna avisa de un problema de delimitador. Vale la pena explicarlo porque el archivo suele estar bien.
La detección funciona buscando qué carácter parte las filas de forma consistente. Con una columna no hay nada por donde partir, así que nada parece un delimitador y lo dice. La salida sigue siendo correcta: una columna, todas las filas presentes.
Si prefieres no verlo, fija el delimitador explícitamente en lugar de dejarlo en automático.
Qué significa «grande» aquí
Dos techos distintos. 25 MB por archivo, y 100.000 celdas — o sea filas por columnas, así que un archivo de seis columnas te llega hasta unas 16.000 filas y uno de cien columnas se detiene alrededor de mil.
El límite de celdas es el que vas a alcanzar primero, y es cosa del navegador más que del analizador. Cada celda se vuelve nodos del DOM en la vista previa, y una tabla de unos cientos de miles de celdas bloquea la pestaña. Negarse es mejor que congelarse.
Para algo realmente más grande, pártelo por filas y convierte cada trozo — la fila de encabezado puede repetirse en cada uno. Las filas vacías se descartan automáticamente, incluidas las que son solo delimitadores, que es lo que suele ser un bloque final de «,,,».
Cómo queda la tabla
La fila de encabezado se vuelve un <thead> con celdas <th scope="col">; todo lo demás va en <tbody>. Las filas desiguales se rellenan hasta la más ancha para que la tabla siga siendo rectangular, y la salida dice cuántas filas lo necesitaron — normalmente señal de que algo está roto más arriba.
No se convierte ningún tipo. 007 se queda en 007, y un valor como 1-2 no se vuelve una fecha. Excel te hace eso; esto no.
Con la opción responsiva activada, la tabla se envuelve en un <div class="table-wrap"> que se desplaza de lado. Una tabla de doce columnas no cabe en un móvil, y dejarla desbordarse estira la página entera en vez de solo a ella.
Suelta el CSV o pega las filas directamente. Los archivos se analizan en tu navegador, así que los datos de clientes nunca salen de la máquina.
CSV → tabla