Other Views

How to Display Nested Elements in a HTML Table Using XSLT

How to display nested elements in a HTML table using XSLT?

Create the XML document.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="books05.xsl"?>
<books>
   <book>
	<title>OpenGL Programming Guide Fourth Edition</title>			<location>
		<department>Development</department>
		<room>107</room>
	</location>
	<publisher>Addison-Wesley</publisher>
	<year>2004</year>
   </book>
   <book>
	<title>Curves and Surfaces for CAGD: A Practical Guide</title>
	<location>
		<department>Development</department>
		<room>116</room>
	</location>
	<publisher>Academic Press</publisher>
	<year>2002</year>
   </book>
   <book>
	<title>An Introduction to NURBS: With Historical Perspective</title>
	<location>
		<department>Development</department>
		<room>120</room>
	</location>
	<publisher>Academic Press</publisher>
	<year>2001</year>
   </book>
   <book>
	<title>NURBS: From Projective Geometry to Practical Use</title>
	<location>
		<department>Development</department>
		<room>126</room>
	</location>
	<publisher>A K Peters</publisher>
	<year>1999</year>
   </book>
</books>

Create the XSL stylesheet.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:template match="/">
<html>
<head><title>Books</title>
</head>
<body>
<table width="100%" border="1">
  <THEAD>
    <TR>
       <TD width="35%"><B>Title</B></TD>
       <TD width="15%"><B>Location</B></TD>
       <TD width="10%"><B>Publisher</B></TD>
       <TD width="10%"><B>Year</B></TD>
    </TR>
  </THEAD> 
  <TBODY>
   <xsl:for-each select="books/book">
    <TR>	
       <TD width="35%"><xsl:value-of select="title" /></TD>  	
       <TD width="15%"><xsl:apply-templates select="location" /></TD> 
       <TD width="10%"><xsl:value-of select="publisher" /></TD>
       <TD width="10%"><xsl:value-of select="year" /></TD>
    </TR>
   </xsl:for-each>
  </TBODY>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="location">
<xsl:value-of select="department" /> <xsl:value-of select="room" />
</xsl:template>
</xsl:stylesheet>

To bind XML elements to a HTML table the <for-each> XSL template must appear before the table row tags. This ensures that a new row is created for each of the <book> elements.

To bind nested XML elements to a HTML table, use <apply-templates>, this creates a new template to process further elements starting from the element specified.

The <value-of> template will output the text from the selected child elements' in to a separate table.

Back to XML FAQ