martes, 26 de enero de 2021

Crear tabla en HTML desde rango de celdas de Excel

Hoy mostraré una forma sencilla de convertir un rango de celdas de Excel a formato de tabla en HTML.
Muy frecuentemente, cuando escribo artículos o post como este, me veo en la necesidad de mostrar información en formato tabla en HTML; lo que suele ser una tarea tediosa...

Veremos como una sencilla fórmula me permite generar el código HTML necesario para poder pasar de Excel a la web o blog en cuestión...
Sin entrar en detalles del lenguaje, es necesario que reconozcamos cuáles son las etiqueta HTML necesarias para crear nuestra tabla:
- En primer lugar la etiqueta <table> es la que define una tabla en HTML.
- Cada fila de una tabla se define por la etiqueta <tr>
- Adicionalmente, si queremos incluir encabezados, emplearemos la etiqueta <th>
- Cada 'celda' o dato de la tabla la incluiremos dentro de una etiqueta <td>

Saber además que el texto de los encabezados, dentro de <th> aparecerán centrados y en negrita
Y que, de otro lado, el texto de cada celda o dato dentro de <td> aparecerá alineada a la izquierda y sin formato de fuente.
Por ejemplo, un código sencillo para una tabla en HTML sería:
    
Nombre Apellido Edad
Juan González 25
Isabel Romero 19

Y se vería:
Nombre Apellido Edad
Juan González 25
Isabel Romero 19

Adicionalmente se podrían añadir atributos a cada etiqueta; por ejemplo, incluir un borde a la tabla empleando el atributo 'border':
    
Nombre Apellido Edad
Juan González 25
Nombre Apellido Edad
Juan González 25

Pues este es nuestro objetivo... generar ese código HTML con fórmulas a partir de nuestro rango de celdas...
Veamos el ejemplo a partir de nuestro rango de celdas B2:D5:
Crear tabla en HTML desde rango de celdas de Excel

En la celda B8 insertamos la fórmula:
="<table>"& UNIRCADENAS("";FALSO;ELEGIR({1\2\3\4\5\6\7};"<tr><th>";B2;"</th><th>";C2;"</th><th>";D2;"</th></tr>"))& UNIRCADENAS("";FALSO;ELEGIR({1\2\3\4\5\6\7};"<tr><td>";TEXTO(B3:B5;"dd/mm/aaaa");"</td><td>";C3:C5;"</td><td>";D3:D5;"</td></tr>"))& "</table>"
Quizá algo larga, pero es porque he decidido separar Encabezados y Datos, de ahí las dos líneas de la función UNIRCADENAS.
La primera línea:
UNIRCADENAS("";FALSO;ELEGIR({1\2\3\4\5\6\7};"<tr><th>";B2;"</th><th>";C2;"</th><th>";D2;"</th></tr>"))
concatena la celdas del encabezado B2,C2,D2 alternando las etiquetas necesarias tr - th.
Esta primera se puede simplificar con un simple CONCAT, ya que el encabezado son solo tres celdas...
La segunda función UNIRCADENAS permite generar el 'cuerpo' de la tabla independientemente de cuantas filas existan!!
UNIRCADENAS("";FALSO;ELEGIR({1\2\3\4\5\6\7};"<tr><td>";TEXTO(B3:B5;"dd/mm/aaaa");"</td><td>";C3:C5;"</td><td>";D3:D5;"</td></tr>"))
Esta fórmula nos permite concatenar en el orden adecuado las etiquetas de filas y datos tr - td cada una de las filas de nuestro rango!!.
La matriz de constantes {1\2\3\4\5\6\7} sirve para 'unir' los siete tramos de textos involucrados en la fórmula..

Finalmente completamos la cadena de código HTML entre el inicio y fin de la etiqueta table.
La función ELEGIR se encarga de gestionar adecuadamente el orden de unión de las distintas columnas de nuestro rango.

Si copiamos y pegamos el resultado de nuestra fórmula en nuestro blog o web veríamos:
Fecha NacimientoNombreNota Media
11/04/1971Daniel Dominguez8
02/04/1978Ana Alonso9
11/06/1997Beatriz Bermudez7
Listo... Recuerda el atributo 'border' si quieres añadir bordes a las 'celdas'.
Espero te sea útil!!

No hay comentarios:

Publicar un comentario

Nota: solo los miembros de este blog pueden publicar comentarios.