XSLT Transformation

Case Study: How to use XSLT to transform XML to XHTML.

We will explain the details of this example in the next section.

Correct stylesheet declaration

The root element of the XSL stylesheet is <xsl:stylesheet> or <xsl:transform>.

Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and can be used interchangeably!

According to the W3C XSLT standard, the correct way to declare an XSL stylesheet is:

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

Or:

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

To access the elements, attributes, and properties of XSLT, we must declare the XSLT namespace at the top of the document.

xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT namespace. If you use this namespace, you must include the attribute version="1.0".

Start from an original XML document

我们现在要把下面这个 XML 文档（"cdcatalog.xml"）转换为 XHTML：

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
.
</catalog>

View the XML file in Internet Explorer and Firefox:

Open the XML file (usually by clicking on a link) - the XML document will be displayed in a colored code format, showing the root element and child elements. Clicking on the plus or minus sign on the left of an element can expand or collapse the structure of the element. To view the original XML source file (without plus and minus signs), select "View Page Source" from the browser menu.

View the XML file in Netscape 6:

Open the XML file, right-click in the XML file, and select "View Page Source". The XML document will be displayed in a colored code format, showing the root element and child elements.

View the XML file in Opera 7:

Open the XML file, right-click in the XML file, and select "Frames"/"View Source". The XML document will be displayed as plain text.

View "cdcatalog.xml".

Create an XSL style sheet

Then create an XSL style sheet with a transformation template ("cdcatalog.xsl"):

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
    <h2>My CD Collection</h2>
    <table border="1">
    <tr bgcolor="#9acd32">
      <th align="left">Title</th>
      <th align="left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

View "cdcatalog.xsl"

Link the XSL style sheet to the XML document

Add a reference to the XSL style sheet to the XML document ("cdcatalog.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
.
</catalog>

If the browser you are using is compatible with XSLT, it will smoothly transform your XML Convert To XHTML.

View Results.

We will explain the details of the above example in the next section.