</division>
<division id='South'>
<revenue>4</revenue>
<growth>3</growth>
<bonus>4</bonus>
</division>
<division id='West'>
<revenue>6</revenue>
<growth>-1.5</growth>
<bonus>2</bonus>
</division>
</sales>
Далее приводится стиль, который, используя упрощенный синтаксис, описанный в главе [2.3 Фиксированный конечный элемент как стиль] , преобразует эти данные в формат HTML:
<html xsl:version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform' lang='en'>
<head>
<title>Sales Results By Division</title>
</head>
<body>
<table border='1'>
<tr>
<th>Division</th>
<th>Revenue</th>
<th>Growth</th>
<th>Bonus</th>
</tr>
<xsl:for-each select='sales/division'>
<!– order the result by revenue ->
<xsl:sort select='revenue' data-type='number' order='descending'/>
<tr>
<td>
<em><xsl:value-of select='@id'/></em>
</td>
<td>
<xsl:value-of select='revenue'/>
</td>
<td>
<!– highlight negative growth in red ->
<xsl:if test='growth < 0'>
<xsl:attribute name='style'>
<xsl:text>color:red</xsl:text>
</xsl:attribute>
</xsl:if>
<xsl:value-of select='growth'/>
</td>
<td>
<xsl:value-of select='bonus'/>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
Полученный HTML документ:
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<title>Sales Results By Division</title>
</head>
<body>
<table border='1'>
<tr>
<th>Division</th>
<th>Revenue</th>
<th>Growth</th>
<th>Bonus</th>
</tr>
<tr>
<td><em>North</em></td>
<td>10</td>
<td>9</td>
<td>7</td>
</tr>
<tr>
<td><em>West</em></td>
<td>6</td>
<td style='color:red'>-1.5</td>
<td>2</td>
</tr>
<tr>
<td><em>South</em></td>
<td>4</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Следующий стиль преобразует данные в SVG:
