Crear una tabla a partir de datos XML

05/Sep/2009 XSLT , , , , , , , 3 Comentarios

A la hora de presentar datos una de los artificios más usados son las tablas. Con el lenguaje HTML es muy sencillo el montar una de ellas. Nos basta con controlar las etiquetas TABLE, TR y TD.

En el siguiente ejemplo utilizaremos XSLT para montar una tabla XHTML. Los datos de dicha tabla serán los datos que vayan en el XML. Para ello, lo primero que haremos será crear nuestro documento XML con la información a mostrar. Usamos un XML que representa información de libros:

  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <libros>
  3. <libro>
  4. <titulo>Fuente Ovejuna</titulo>
  5. <autor>Lope de Vega</autor>
  6. <isbn>84-9815-002-7</isbn>
  7. </libro>
  8. <libro>
  9. <titulo>La Celestina</titulo>
  10. <autor>Fernando de Rojas</autor>
  11. <isbn>84-96390-96-9</isbn>
  12. </libro>
  13. ...
  14. </libros>

Básicamente, como descripción de nuestro ejemplo, lo que vamos a hacer es recorrer los elementos de un path determinado e ir creando filas de la tabla.

Pero vamos por partes. Lo primero que tenemos que hacer en nuestro documento XSL, dentro de la plantilla principal es declarar la cabecera de la tabla:

  1. <xsl:template match="/">
  2. <html>
  3. <body>
  4.  
  5. <h2>Mis Libros</h2>
  6. <table border="1">
  7. <tr bgcolor="skyblue">
  8. <th>Titulo</th>
  9. <th>Autor</th>
  10. </tr>

Una vez que tenemos la cabecera, tenemos que iterar por los elementos. Para cada fila hay que crear una etiqueta TR, que es una fila, y para cada elemento una etiqueta TD, que es una celda. Quedándonos el siguiente código:

  1. <xsl:for-each select="libros/libro">
  2. <tr>
  3. <td><xsl:value-of select="titulo"/></td>
  4. <td><xsl:value-of select="autor"/></td>
  5. </tr>
  6. </xsl:for-each>

Podemos comprobar que estamos mezclando el código XHTML con el código XSLT sin ningún problema. Para recorrer los elementos del documento XML utilizamos la etiqueta xsl:for-each, la cual, mediante el atributo select identifica un path en el árbol XML. En nuestro ejemplo, al mostrar los contenidos de los libros, el path será libros/libro.

Los valores de los elementos son recuperados mediante el xsl:value-of, que al igual que sucede con xsl:for-each, tiene un atributo select con el elemento XML a recuperar.

Solo nos quedará el cerrar la tabla dentro de la plantilla. El código más sencillo de todos:

  1.  
  2. </table>
  3. </body>
  4. </html>
  5. </xsl:template>

Aunque sea algo obvio, cabe recordar, que en el documento XML hay que crear un enlace al documento de transformación XSLT.

  1. <?xml-stylesheet type="text/xsl" href="tabla.xsl"?>

3 comentarios en “Crear una tabla a partir de datos XML”

Víctor Cuervo

Giovanni Luis

Gracias.

Víctor Cuervo

Trucker

el problema es que el XML viene de un WebService y nesecito poner en el HTML un solo valor que viene en ese XML directamente… todo desde el mismo HTML que llama al WebService

Víctor Cuervo

Rodrigo

Gracias por compartir esto, me es de mucha ayuda.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*