Mejores formas de incrustar tablas y hojas de cálculo en páginas web | Tecnología | estacion506cr.com

Mejores formas de incrustar tablas y hojas de cálculo en páginas web



Es fácil incrustar datos tabulares en páginas web. Usted puede utilizar el estándar

Etiqueta HTML o puede ingresar los datos tabulares en una hoja de cálculo, como Excel Online o Hojas de cálculo de Google - e incrusta la hoja en tus páginas web.

Las tablas HTML son sencillas, mientras que las tablas basadas en hojas de cálculo permiten un mejor formato y diseños complejos, como tablas anidadas dentro de una tabla, sin necesidad de manipular el código. Aquí están las diferentes formas en que puede insertar tablas en su sitio web y sus pros y sus contras.

Cómo crear una tabla HTML

Si tiene acceso a un editor WYSIWYG como Dreamweaver, puede crear fácilmente una tabla HTML utilizando los asistentes incorporados, pero prefiero usar Markdown para crear tablas, ya que no requiere etiquetas. Vaya a gist.github.com (ni siquiera necesita una cuenta aquí) e ingrese la tabla en el siguiente formato:

Columna A | Columna B -------- | ------- Celda A1 | Cell B1 Cell A2 | Celda B2

Cada columna está separada por una tubería (|) mientras que los guiones (-) indican los encabezados de la tabla. Asigne un nombre a gist table.md (.md indica el lenguaje de reducción de precio) y haga clic en el botón "Crear secreto Gist" para representar el descuento como una tabla.

Una vez que haga clic en el Salvar Botón, la esencia le mostrará la tabla visual que puede copiar y pegar en cualquier editor de texto enriquecido como la ventana de composición de Gmail. Alternativamente, puede hacer clic derecho en la tabla en Github y elegir Inspeccionar elemento para ver las etiquetas HTML reales para esa tabla.



Tableizer es otra herramienta simple para convertir datos de hoja de cálculo en código de tabla HTML. Cree una tabla dentro de Excel o la aplicación Números en su escritorio, copie las celdas y péguelas dentro de Tableizer. Generará el código HTML que se puede utilizar en su blog o sitio web.

Insertar hojas de Google en su sitio web

Una opción popular para incrustar datos tabulares en una página web es a través de Google Docs (Hojas de cálculo). La ventaja de este enfoque es que puede modificar los datos en la hoja de cálculo y la tabla incrustada se actualizará para reflejar las ediciones. No es necesario editar la página web que contiene la tabla.

Vaya a spreadsheets.google.com, ingrese algunos datos en la hoja y seleccione el Publicar en la web Opción desde el menú Archivo. Escoger Empezar a publicar y Google Drive le ofrecerá el código de incrustación IFRAME para esa hoja en particular.

La hoja incrustada (ver versión en vivo) conservará el formato original de las celdas, pero seguirá siendo un documento HTML estático: no hay opción para clasificar o filtrar datos en la tabla HTML.

Incrustar hojas de Excel en páginas web

Este es mi método favorito para incrustar datos de hojas de cálculo en una página web y pronto explicaré por qué.

Vaya a office.live.com y cree un nuevo libro en blanco. Ingrese los datos tabulares dentro de la hoja de Excel y luego elija Archivo -> Compartir -> Insertar -> Generar HTML.

Excel, a diferencia de Google Docs, le permite incrustar un rango seleccionado de celdas y no la hoja de cálculo completa. También puede incluir un enlace de descarga en las celdas incrustadas para facilitar la descarga y apertura de la tabla en su aplicación de hoja de cálculo local para el visitante de su sitio web. La hoja de cálculo incrustada también ofrece una mejor opción de copiar y pegar que Google Docs.

Aquí hay una versión en vivo de una tabla HTML incrustada usando la aplicación web de Excel.

Relacionados: capturar tablas web en Excel

Hacer tablas HTML estáticas interactivas

Si desea utilizar tablas HTML estáticas, en lugar de tablas basadas en hojas de cálculo interactivas, puede considerar agregar el botón Excel que hará que sus tablas HTML sean interactivas.

Tienes el código HTML regular para tu

y todo lo que tiene que hacer es agregar otra etiqueta HTML a su página web que convertirá la tabla estática incrustada en una hoja interactiva - vea esta versión en vivo.

Columna A Columna B
Celda A1 Celda b1
Celda A2 Celda B2

Este código agregará un pequeño botón de Excel junto a su tabla HTML y cuando alguien haga clic en ese botón, creará una vista hermosa e interactiva de la tabla con soporte para clasificar y filtrar. Incluso puede visualizar la tabla HTML como gráficos sin salir de la página.

¿Tablas HTML o Hojas de cálculo?

La ventaja de las tablas HTML estáticas es que son compatibles con SEO (los motores de búsqueda pueden leer su tabla HTML), mientras que las tablas basadas en hojas de cálculo no lo son. Sin embargo, estos últimos permiten mejores opciones de formato y son relativamente fáciles de actualizar.

Si desea tener lo mejor de ambos mundos, vaya con una tabla HTML y use la vista interactiva de Excel que permitirá a los espectadores interactuar con la tabla a pedido.

Guía relacionada: Cómo incrustar cualquier cosa en un sitio web

Artículo Anterior

¿Cómo limpio mi monitor de pantalla plana?

Artículo Siguiente

Cómo compartir velocidad