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:
Y se vería:
Adicionalmente se podrían añadir atributos a cada etiqueta; por ejemplo, incluir un borde a la tabla empleando el atributo 'border':
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:
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:
Listo... Recuerda el atributo 'border' si quieres añadir bordes a las 'celdas'.
Espero te sea útil!!
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:
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 Nacimiento | Nombre | Nota Media |
---|---|---|
11/04/1971 | Daniel Dominguez | 8 |
02/04/1978 | Ana Alonso | 9 |
11/06/1997 | Beatriz Bermudez | 7 |
Espero te sea útil!!
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.