Creating and Populating an HTML Template

You can use XSL to merge simple regular XML data with an HTML template for display. Consider the following example:

<?xml version="1.0"?>
<portfolio xmlns:dt="urn:schemas-microsoft-com:datatypes">
  <stock exchange="nyse">
    <name>zacx corp</name>
    <symbol>ZCXM</symbol>
    <price dt:dt="number">28.875</price>
  </stock>
  <stock exchange="nasdaq">
    <name>zaffymat inc</name>
    <symbol>ZFFX</symbol>
    <price dt:dt="number">92.250</price>
  </stock>
  <stock exchange="nasdaq">
    <name>zysmergy inc</name>
    <symbol>ZYSZ</symbol>
    <price dt:dt="number">20.313</price>
  </stock>
</portfolio>

The structure of this sample data is repetitive and regular—the stock element structure is repeated several times with the same subelements. For this example the stock information will be displayed in a table with a stock in each row, and cells containing the name, symbol, and price. First create a template of HTML elements to display such a table.

<HTML>
  <BODY>
    <TABLE BORDER="2">
      <TR>
        <TD>Symbol</TD>
        <TD>Name</TD>
        <TD>Price</TD>
      </TR>
      <!-- repeat the following row for each stock -->
      <TR>
        <TD><!-- symbol goes here --></TD>
        <TD><!-- name goes here --></TD>
        <TD><!-- price goes here --></TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

To populate this template with data from the XSL file, you could manually replace the comments with data from the XML file. This is essentially the process the XSL performs. Elements from the XSL namespace are used to locate data in the XML file, and insert it into the HTML template.

<HTML>
  <BODY>
    <TABLE BORDER="2">
      <TR>
        <TD>Symbol</TD>
        <TD>Name</TD>
        <TD>Price</TD>
      </TR>
      <xsl:for-each select="portfolio/stock">
        <TR>
          <TD><xsl:value-of select="symbol"/></TD>
          <TD><xsl:value-of select="name"/></TD>
          <TD><xsl:value-of select="price"/></TD>
        </TR>
      </xsl:for-each>
    </TABLE>
  </BODY>
</HTML>

The <xsl:for-each> element locates a set of elements in the XML data ("stock" elements inside the "portfolio" element) and repeats a portion of the template for each one. Since this sample contains three stock elements, three rows will be created.

The select attribute describes how to find a set of elements in the source document. The syntax for this attribute is called an XSL Pattern, and works much like navigating a file system hierarchy where a forward slash (/) selects subdirectories relative to the current directory. In an XSL style sheet, the navigation starts at the current node and drills down into the XML data hierarchy, selecting all the nodes that match the pattern. In this case the pattern "portfolio/stock" starts at the document root and drills down through the "portfolio" element to select the three "stock" children.

For many style sheets, the use of element names and the / operator is sufficiently powerful to perform the desired transformation. Details of other XSL Pattern operations are described in Introduction to the Syntax of XSL Patterns.

Within the <xsl:for-each> element, you can further drill down to select children of each "stock" element. The <xsl:value-of> element selects a specific child and then inserts the text content of that child into the template. The patterns inside the <xsl:value-of> element's select attribute do not require starting at the document root again but are relative to the element selected in the <xsl:for-each> element.

The preceding template can be made into a complete XSL style sheet by placing it in an XML file and enclosing it within the <xsl:stylesheet> element.

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
  <xsl:template match="/">
    <HTML>
      <BODY>
        <TABLE BORDER="2">
          <TR>
            <TD>Symbol</TD>
            <TD>Name</TD>
            <TD>Price</TD>
          </TR>
          <xsl:for-each select="portfolio/stock">
            <TR>
              <TD><xsl:value-of select="symbol"/></TD>
              <TD><xsl:value-of select="name"/></TD>
              <TD><xsl:value-of select="price"/></TD>
            </TR>
          </xsl:for-each>
        </TABLE>
      </BODY>
    </HTML>
  </xsl:template>
</xsl:stylesheet>

Since an XSL style sheet is an XML file itself, the file begins with the recommended xml declaration. The <xsl:stylesheet> element indicates that this document is a style sheet file, and provides a location for declaring the XSL namespace. The XSL namespace URL supported by Microsoft® Internet Explorer 5 is http://www.w3.org/TR/WD-xsl.

You also must wrap the template with <xsl:template match="/"> to indicate that this template corresponds to the root (/) of the XML source document. For details, see Advanced XSL Features.

The entire file must be well-formed to comply with XML rules, including the HTML that comprises the template. For assistance in authoring or converting to well-formed HTML, see Authoring Well-Formed HTML.

The end result of running the portfolio document through the XSL style sheet is this:

<HTML>
  <BODY>
    <TABLE BORDER="2">
      <TR>
        <TD>Symbol</TD>
        <TD>Name</TD>
        <TD>Price</TD>
      </TR>
      <TR>
        <TD>ZCXM</TD>
        <TD>zacx corp</TD>
        <TD>28.875</TD>
      </TR>
      <TR>
        <TD>ZFFX</TD>
        <TD>zaffymat inc</TD>
        <TD>92.250</TD>
      </TR>
      <TR>
        <TD>ZYSZ</TD>
        <TD>zysmergy inc</TD>
        <TD>20.313</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

This result illustrates how the basic transformation mechanism in XSL combines a template (defined in the style sheet) with data from the source document to create a final result.

Try it! See the above example at work in the Portfolio Sample.

Download this sample.

Note To browse directly to this XML file, the sample file also contains a style sheet processing instruction pointing to the style sheet. For details, see Browsing XML Documents in Internet Explorer 5.