Page 4 of 28

XSLT Tutorial

Worksheet 1: XSLT - Simple HTML Table 

In this example we will convert a simple XML file to HTML:

<?xml version="1.0"?>
          <!-- *********** Resumes for People *********** -->
<PEOPLE>
  <PERSON PERSONID="p1">
    <NAME>Mark Wilson</NAME>
    <ADDRESS>911 Somewhere Circle, Canberra, Australia</ADDRESS>
    <TEL>(++612) 12345</TEL>
    <FAX>(++612) 12345</FAX>
    <EMAIL>markwilson@example.com</EMAIL>
  </PERSON>          

  <PERSON PERSONID="p2">
    <NAME>Tracey Wilson</NAME>
    <ADDRESS>121 Zootle Road, Cape Town, South Africa</ADDRESS>
    <TEL>(++2721) 531 9090</TEL>
    <FAX>(++2721) 531 9090</FAX>
    <EMAIL>Tracey Wilson@example.com</EMAIL>
  </PERSON>          

  <PERSON PERSONID="p3">
    <NAME>Jodie Foster</NAME>
    <ADDRESS>30 Animal Road, New York, USA</ADDRESS>
    <TEL>(++1) 3000 12345</TEL>
    <FAX>(++1) 3000 12345</FAX>
    <EMAIL>Jodie Foster@example.com</EMAIL>
  </PERSON>          

  <PERSON PERSONID="p4">
    <NAME>Lorrin Maughan</NAME>
    <ADDRESS>1143 Winners Lane, London, UK</ADDRESS>
    <TEL>(++94) 17 12345</TEL>
    <FAX>(++94) 17 12345</FAX>
    <EMAIL>Lorrin Maughan@example.com</EMAIL>
  </PERSON>         

  <PERSON PERSONID="p5">
    <NAME>Steve Rachel</NAME>
    <ADDRESS>90210 Beverly Hills, California, USA</ADDRESS>
    <TEL>(++1) 2000 12345</TEL>
    <FAX>(++1) 2000 12345</FAX>
    <EMAIL>Steve Rachel@example.com</EMAIL>
  </PERSON>
</PEOPLE>
         

The HTML that we want to generate looks as follows:

The HTML output

The goal is to generate the HTML output shown below using the XML document as the source of the information.

<TABLE BORDER="2">
        <TR>
            <!-- the header -->
            <TD>Name</TD>
            <TD>Address</TD>
            <TD>Tel</TD>
            <TD>Fax</TD>
            <TD>Email</TD>
        </TR>
        <!-- Now process each row -->
        <TR>
            <TD>Mark Wilson</TD>
            <TD>911 Somewhere Circle, Canberra, Australia</TD>
            <TD>(++612) 12345</TD>
            <TD>(++612) 12345</TD>
            <TD>Mark.Wilson@example.com</TD>
        </TR>
        ...
<TABLE>

XSLT will help us to do this.

How the people stylesheet works

Double click below to open the the peoplexsl.xml document in IE.

View People XML Document

Select the option to view the source in IE.  In addition to the XML elements, notice that there is a processing instruction that references the stylesheet, people.xsl: 

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

Now look at the people.xsl stylesheet by double clicking below:

View XSL Source

XSLT Namespace

Every XSL file needs to specify the XSL namespace so that the parser knows which version of XSLT to use. The most current namespace is:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

Versions of the Microsoft parser MSXML before version 3.0 used the temporary namespace http://www.w3.org/TR/WD-xsl" version="1.0". This is now outdated and doesn't conform to the latest W3C recommendation. See our Microsoft MSXML Parsers page for more information.

The namespace prefix xsl: is used in the rest of the XSL file to identify XSL processing statements. If a statement isn't prefixed with xsl:, then it's simply copied to the output without being processed. This is the way to add HTML statements to the output.

<xsl:template match=" ... ">

Before processing can begin, the part of the XML document with the information to be copied to the output must be selected with a XPath expression. The selected section of the document is called a node and is normally selected with the match operator. If the entire document is to be selected, match the root node using match="/". Another approach is to match the document element (the element that includes the entire document). In our example, the document element can be selected using match="PEOPLE". (If you use this alternative approach, don't include PEOPLE in the 'for-each' selection below.)

<xsl:for-each select="PEOPLE/PERSON">

The expression xsl:for-each finds all 'PERSON' elements in the 'PEOPLE' element context using the XPath expression 'PEOPLE/PERSON'. If the selected node contains all elements in the root, all of the 'PEOPLE' elements will be selected. Since we want to include all 'PERSON' elements in our output document, we have used this expression.

The 'for-each' expression is a loop that processes the same instructions for these elements.

<xsl:value-of select="NAME"/>

When the xsl:for-each expression has selected a 'PERSON' element, the xsl:value-of expression extracts and copies to the output file the value stored in the selected element. In this case, the value stored in the 'NAME' element is copied to the output.

Page 4 of 28