XSLT Examples

Practical XSLT transformation examples

📚 XSLT in Action

Learn XSLT through practical examples. These real-world scenarios show how to transform XML data into HTML, create tables, format lists, and apply styling to your content.


<!-- Simple transformation -->
<xsl:template match="/">
    <h1>Welcome</h1>
</xsl:template>
                                    

Common XSLT Use Cases

XSLT transforms XML into various formats for different purposes. From creating web pages to generating reports, these examples demonstrate essential transformation patterns you'll use in real projects.

📄

XML to HTML

Create web pages from data

📊

Data Tables

Format data in tables

📋

Lists

Create ordered/unordered lists

🎨

Styled Output

Add CSS styling

🔹 Example 1: Simple Book List

Transform XML book data into an HTML list:

📄 books.xml:

<?xml version="1.0"?>
<library>
    <book>
        <title>Learning XML</title>
        <author>John Doe</author>
    </book>
    <book>
        <title>XSLT Basics</title>
        <author>Jane Smith</author>
    </book>
</library>

📄 books.xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <body>
                <h2>My Book Collection</h2>
                <ul>
                    <xsl:for-each select="library/book">
                        <li>
                            <xsl:value-of select="title"/>
                            by <xsl:value-of select="author"/>
                        </li>
                    </xsl:for-each>
                </ul>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Output:

My Book Collection

  • Learning XML by John Doe
  • XSLT Basics by Jane Smith

🔹 Example 2: Product Table

Create an HTML table from product data:

📄 products.xml:

<products>
    <product>
        <name>Laptop</name>
        <price>999</price>
    </product>
    <product>
        <name>Mouse</name>
        <price>25</price>
    </product>
</products>

📄 products.xsl:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <body>
                <h2>Product List</h2>
                <table border="1">
                    <tr>
                        <th>Product</th>
                        <th>Price</th>
                    </tr>
                    <xsl:for-each select="products/product">
                        <tr>
                            <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>

Output:

Product List

Product Price
Laptop $999
Mouse $25

🔹 Example 3: Conditional Formatting

Apply different styles based on data values:

📄 students.xml:

<students>
    <student>
        <name>Alice</name>
        <score>85</score>
    </student>
    <student>
        <name>Bob</name>
        <score>55</score>
    </student>
</students>

📄 students.xsl:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <body>
                <h2>Student Scores</h2>
                <xsl:for-each select="students/student">
                    <p>
                        <xsl:value-of select="name"/>: 
                        <xsl:choose>
                            <xsl:when test="score >= 60">
                                <span style="color: green;">
                                    <xsl:value-of select="score"/> - Pass
                                </span>
                            </xsl:when>
                            <xsl:otherwise>
                                <span style="color: red;">
                                    <xsl:value-of select="score"/> - Fail
                                </span>
                            </xsl:otherwise>
                        </xsl:choose>
                    </p>
                </xsl:for-each>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Output:

Student Scores

Alice: 85 - Pass

Bob: 55 - Fail

🔹 Example 4: Sorting Data

Sort XML data before displaying:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <body>
                <h2>Employees (Sorted by Name)</h2>
                <ul>
                    <xsl:for-each select="employees/employee">
                        <!-- Sort by name alphabetically -->
                        <xsl:sort select="name"/>
                        <li><xsl:value-of select="name"/></li>
                    </xsl:for-each>
                </ul>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

🔹 Example 5: Styled Page

Create a fully styled HTML page with CSS:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <style>
                    body { font-family: Arial; }
                    .card { 
                        border: 1px solid #ddd; 
                        padding: 15px; 
                        margin: 10px;
                        border-radius: 5px;
                    }
                    .title { color: #333; font-weight: bold; }
                </style>
            </head>
            <body>
                <h1>Articles</h1>
                <xsl:for-each select="articles/article">
                    <div class="card">
                        <div class="title"><xsl:value-of select="title"/></div>
                        <p><xsl:value-of select="content"/></p>
                    </div>
                </xsl:for-each>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

🔹 Key XSLT Elements Used

  • <xsl:for-each> - Loop through elements
  • <xsl:value-of> - Extract element values
  • <xsl:choose> - Conditional logic
  • <xsl:when> - Condition test
  • <xsl:otherwise> - Default case
  • <xsl:sort> - Sort data
  • <xsl:if> - Simple condition

🧠 Test Your Knowledge

Which XSLT element is used to loop through XML elements?