norfipc.com
Códigos   Mapa del sitio   Informatica
NorfiPC » Códigos » Crear y escribir CSV

Como escribir tablas en HTML desde un archivo CSV


Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas
Insertar tablas en las páginas con los datos e información en un archivo externo en formato CSV, usando JavaScript y la librería D3. Mostrar el contenido de hojas de Excel en la web. Como crear los archivos CSV manualmente.
Como escribir tablas en HTML desde un archivo CSV
Una pequeña librería llamada D3 (Data-Driven Documents), creada originalmente para generar archivos SVG y disponible en Github, puede ayudarnos a crear fácilmente tablas en archivos HTML, si tenemos los datos necesarios en un archivo CSV.
Este método es de mucha utilidad para mostrar contenido en la web que debemos actualizar regularmente, si tenemos los datos originales en una tabla de Excel o en un documento en otro formato.
Para actualizar el contenido que mostramos en la web, solo necesitamos modificar el archivo CSV manualmente o sustituirlo, subiendo el original al servidor.
Lógicamente, el mismo sistema podemos emplearlo para generar tablas offline, de forma local.


Generar tablas con los datos en un archivo CSV


La siguiente tabla se escribe en esta página con la información en un archivo de nombre "datos-ejemplo.csv".



Código para escribir una tabla desde un CSV


Para poder usar la librería y generar una tabla similar en una página web, sigue los siguientes pasos:
1- Crea un contenedor DIV en el lugar de la página donde deseas mostrar la tabla.
2- Carga la librería desde Github.
3- Sube al servidor el archivo CSV con los datos.
4- Usa el siguiente código para escribir la tabla.

El estilo de la tabla se puede modificar de acuerdo a nuestro gusto o necesidad, mediante CSS.


Escribir y mostrar tablas usando un botón en las páginas


Una alternativa para mostrar una tabla en una página web, cuando el contenido es extenso, es insertarla en una sección de la página a petición del lector, usando un botón u otro evento que inicie la función correspondiente, para cargar el contenido del archivo CSV.




¿Cómo crear los archivos CSV?


CSV es un sencillo formato de texto abierto, usado para para representar datos en forma de tablas.
CSV son las siglas en ingles de: "Valores separados por comas".
Se puede guardar en este formato hojas creadas en Excel, en otros programas o crearlos manualmente.
Para crear un CSV manualmente solo debemos copiar la información a un archivo de texto plano (por ejemplo con el Bloc de Notas).
Las filas se definen usando saltos de líneas y las columnas usando comas.
Los campos que contengan una coma, un salto de línea o comillas dobles, debemos encerrarlos entre comillas dobles.
Por ejemplo:



Más información sobre el uso de D3

Más información sobre el uso de la librería, se puede encontrar en la página del proyecto en Github: https://github.com/d3/d3/

Páginas relacionadas



Sobre el autor:

Norfi Carrodeguas es el fundador y webmaster del sitio web Norfipc, creado en el año 2010. Norfi es un ingeniero informático y desarrollador web cubano. Con más de 14 años de experiencia en la publicación en internet, comparte su tiempo con su consultoría SEO. Más información sobre el autor.

Comparta esta página
Facebook
Twitter

Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí