Let’s suppose we have the following sample XML file, students.xml, which is required to be transformed into a well-formatted HTML document.
students.xml
<?xml version = "1.0"?> <class> <student rollno = "393"> <firstname>Dinkar</firstname> <lastname>Kad</lastname> <nickname>Dinkar</nickname> <marks>85</marks> </student> <student rollno = "493"> <firstname>Vaneet</firstname> <lastname>Gupta</lastname> <nickname>Vinni</nickname> <marks>95</marks> </student> <student rollno = "593"> <firstname>Jasvir</firstname> <lastname>Singh</lastname> <nickname>Jazz</nickname> <marks>90</marks> </student> </class>
We need to define an XSLT style sheet document for the above XML document to meet the following criteria −
Page should have a title Students.
Page should have a table of student details.
Columns should have following headers: Roll No, First Name, Last Name, Nick Name, Marks
Table must contain details of the students accordingly.
Create an XSLT document to meet the above requirements, name it as students.xsl and save it in the same location where students.xml lies.
students.xsl
<?xml version = "1.0" encoding = "UTF-8"?> <!-- xsl stylesheet declaration with xsl namespace: Namespace tells the xlst processor about which element is to be processed and which is used for output purpose only --> <xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"> <!-- xsl template declaration: template tells the xlst processor about the section of xml document which is to be formatted. It takes an XPath expression. In our case, it is matching document root element and will tell processor to process the entire document with this template. --> <xsl:template match = "/"> <!-- HTML tags Used for formatting purpose. Processor will skip them and browser will simply render them. --> <html> <body> <h2>Students</h2> <table border = "1"> <tr bgcolor = "#9acd32"> <th>Roll No</th> <th>First Name</th> <th>Last Name</th> <th>Nick Name</th> <th>Marks</th> </tr> <!-- for-each processing instruction Looks for each element matching the XPath expression --> <xsl:for-each select="class/student"> <tr> <td> <!-- value-of processing instruction process the value of the element matching the XPath expression --> <xsl:value-of select = "@rollno"/> </td> <td><xsl:value-of select = "firstname"/></td> <td><xsl:value-of select = "lastname"/></td> <td><xsl:value-of select = "nickname"/></td> <td><xsl:value-of select = "marks"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>
Update student.xml document with the following xml-stylesheet tag. Set href value to students.xsl
<?xml version = "1.0"?> <?xml-stylesheet type = "text/xsl" href = "students.xsl"?> <class> ... </class>
students.xml
<?xml version = "1.0"?> <?xml-stylesheet type = "text/xsl" href = "students.xsl"?> <class> <student rollno = "393"> <firstname>Dinkar</firstname> <lastname>Kad</lastname> <nickname>Dinkar</nickname> <marks>85</marks> </student> <student rollno = "493"> <firstname>Vaneet</firstname> <lastname>Gupta</lastname> <nickname>Vinni</nickname> <marks>95</marks> </student> <student rollno = "593"> <firstname>Jasvir</firstname> <lastname>Singh</lastname> <nickname>Jazz</nickname> <marks>90</marks> </student> </class>