In this tutorial we are going to use XSLT to transform a simple XML document into an XHTML web page. \u00a0XSLT stands for eXtensible Style Sheet Transformations. With our XSL document we will pretty much grab the values we need from the source XML and display them nicely in XHTML. In order to complete this tutorial you should have a basic understanding of XML documents, HTML\/XHTML, and CSS.<\/p>\n
First off you need some sample XML. I made a quick list of cars I have owned.<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<autos>\r\n\t<car>\r\n\t\t<year>1995<\/year>\r\n\t\t<make>Eagle<\/make>\r\n\t\t<model>Talon<\/model>\r\n\t\t<trim>ESi<\/trim>\r\n\t<\/car>\r\n\t<car>\r\n\t\t<year>1998<\/year>\r\n\t\t<make>Mitsubishi<\/make>\r\n\t\t<model>Eclipse<\/model>\r\n\t\t<trim>GS-T Spyder<\/trim>\r\n\t<\/car>\r\n\t<car>\r\n\t\t<year>2004<\/year>\r\n\t\t<make>Cadillac<\/make>\r\n\t\t<model>CTS<\/model>\r\n\t\t<trim>Sport<\/trim>\r\n\t<\/car>\r\n<\/autos>\r\n<\/pre>\nWe are going to add an XML stylesheet to the document, similar to a CSS file with HTML. In order to add the file we need to add the xml-stylesheet tag to our root document.<\/p>\n
\r\n<?xml-stylesheet type="text\/xsl" href="output.xsl"?>\r\n<\/pre>\nWhich should give you this.<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<?xml-stylesheet type="text\/xsl" href="output.xsl"?>\r\n<autos>\r\n\t<car>\r\n\t\t<year>1995<\/year>\r\n\t\t<make>Eagle<\/make>\r\n\t\t<model>Talon<\/model>\r\n\t\t<trim>ESi<\/trim>\r\n\t<\/car>\r\n\t<car>\r\n\t\t<year>1998<\/year>\r\n\t\t<make>Mitsubishi<\/make>\r\n\t\t<model>Eclipse<\/model>\r\n\t\t<trim>GS-T Spyder<\/trim>\r\n\t<\/car>\r\n\t<car>\r\n\t\t<year>2004<\/year>\r\n\t\t<make>Cadillac<\/make>\r\n\t\t<model>CTS<\/model>\r\n\t\t<trim>Sport<\/trim>\r\n\t<\/car>\r\n<\/autos>\r\n<\/pre>\nNext you will need to create a new document that I called output.xsl. This file will be used to tell the browser how to display our XML. Here is a pretty standard starting template.<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<xsl:stylesheet version="1.0" xmlns:xsl="http:\/\/www.w3.org\/1999\/XSL\/Transform">\r\n <xsl:output method="html" encoding="utf-8" doctype-public="-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" doctype-system="http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"\/>\r\n \r\n <xsl:template match="\/">\r\n <html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n <head>\r\n <meta http-equiv="Content-Type" content="text\/html; charset=utf-8"\/>\r\n <title>My Cars<\/title>\r\n <\/head>\r\n \r\n <body>\r\n <\/body>\r\n <\/html> \r\n <\/xsl:template>\r\n<\/xsl:stylesheet>\r\n<\/pre>\nNow we need to create a typical HTML table to display our results in.<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<xsl:stylesheet version="1.0" xmlns:xsl="http:\/\/www.w3.org\/1999\/XSL\/Transform">\r\n <xsl:output method="html" encoding="utf-8" doctype-public="-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" doctype-system="http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"\/>\r\n \r\n <xsl:template match="\/">\r\n <html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n <head>\r\n <meta http-equiv="Content-Type" content="text\/html; charset=utf-8"\/>\r\n <title>My Cars<\/title>\r\n <\/head>\r\n \r\n <body>\r\n\t <table>\r\n \t<tr>\r\n\t\t\t<th>Year<\/th>\r\n <th>Make<\/th>\r\n <th>Model<\/th>\r\n <th>Trim<\/th>\r\n <\/tr>\r\n <\/table>\r\n <\/body>\r\n <\/html> \r\n <\/xsl:template>\r\n<\/xsl:stylesheet>\r\n<\/pre>\nNow we are going to determine which fields we want to display in the rest of the table rows. We will do this by using the xsl:for-each tag. This will pretty much create a for each loop and loop through which ever values you specify. We want whatever data is container withing the car tag within the autos tag. So you would do something like this:<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<xsl:stylesheet version="1.0" xmlns:xsl="http:\/\/www.w3.org\/1999\/XSL\/Transform">\r\n <xsl:output method="html" encoding="utf-8" doctype-public="-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" doctype-system="http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"\/>\r\n \r\n <xsl:template match="\/">\r\n <html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n <head>\r\n <meta http-equiv="Content-Type" content="text\/html; charset=utf-8"\/>\r\n <title>My Cars<\/title>\r\n <\/head>\r\n \r\n <body>\r\n\t <table>\r\n \t<tr>\r\n\t\t\t\t\t<th>Year<\/th>\r\n <th>Make<\/th>\r\n <th>Model<\/th>\r\n <th>Trim<\/th>\r\n <\/tr>\r\n <xsl:for-each select="autos\/car">\r\n\r\n <\/xsl:for-each>\r\n <\/table>\r\n <\/body>\r\n <\/html> \r\n <\/xsl:template>\r\n<\/xsl:stylesheet>\r\n<\/pre>\nThen we simple tell XSLT how to display the values (in tables and cells in this case) and what values we want.<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<xsl:stylesheet version="1.0" xmlns:xsl="http:\/\/www.w3.org\/1999\/XSL\/Transform">\r\n <xsl:output method="html" encoding="utf-8" doctype-public="-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" doctype-system="http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"\/>\r\n \r\n <xsl:template match="\/">\r\n <html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n <head>\r\n <meta http-equiv="Content-Type" content="text\/html; charset=utf-8"\/>\r\n <title>My Cars<\/title>\r\n <\/head>\r\n \r\n <body>\r\n\t <table>\r\n \t<tr>\r\n\t\t\t\t\t<th>Year<\/th>\r\n <th>Make<\/th>\r\n <th>Model<\/th>\r\n <th>Trim<\/th>\r\n <\/tr>\r\n <xsl:for-each select="autos\/car">\r\n <tr>\r\n <td><xsl:value-of select="year"\/><\/td>\r\n <td><xsl:value-of select="make"\/><\/td>\r\n <td><xsl:value-of select="model"\/><\/td>\r\n <td><xsl:value-of select="trim"\/><\/td>\r\n <\/tr>\r\n <\/xsl:for-each>\r\n <\/table>\r\n <\/body>\r\n <\/html> \r\n <\/xsl:template>\r\n<\/xsl:stylesheet>\r\n<\/pre>\nThen to finish it off you can style your table with some CSS.<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<xsl:stylesheet version="1.0" xmlns:xsl="http:\/\/www.w3.org\/1999\/XSL\/Transform">\r\n <xsl:output method="html" encoding="utf-8" doctype-public="-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" doctype-system="http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"\/>\r\n \r\n <xsl:template match="\/">\r\n <html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n <head>\r\n <meta http-equiv="Content-Type" content="text\/html; charset=utf-8"\/>\r\n <title>My Cars<\/title>\r\n \r\n <style>\r\n\t\t\t\ttd{\r\n\t\t\t\t\tborder-bottom:1px dashed #ccc;\r\n\t\t\t\t\tpadding-left:4px;\r\n\t\t\t\t}\r\n\t\t\t\tth{\r\n\t\t\t\t\tbackground: #bacfec;\r\n\t\t\t\t\ttext-align:center;\r\n\t\t\t\t\tpadding: 0 15px 0 15px;\r\n\t\t\t\t}\r\n\t\t\t<\/style>\r\n <\/head>\r\n \r\n <body>\r\n\t <table>\r\n \t<tr>\r\n\t\t\t\t\t<th>Year<\/th>\r\n <th>Make<\/th>\r\n <th>Model<\/th>\r\n <th>Trim<\/th>\r\n <\/tr>\r\n <xsl:for-each select="autos\/car">\r\n <tr>\r\n <td><xsl:value-of select="year"\/><\/td>\r\n <td><xsl:value-of select="make"\/><\/td>\r\n <td><xsl:value-of select="model"\/><\/td>\r\n <td><xsl:value-of select="trim"\/><\/td>\r\n <\/tr>\r\n <\/xsl:for-each>\r\n <\/table>\r\n <\/body>\r\n <\/html> \r\n <\/xsl:template>\r\n<\/xsl:stylesheet>\r\n<\/pre>\nIts that simple. We started a simple XSL file and output an XHTML page using XSL.<\/p>\n
Download the Source Code<\/h3>\n
[tweet2download file=”source.zip” tweet=”Simple XML to XHTML Transformation http:\/\/su.pr\/1ci3ZU @teamtutorials” follow=”@teamtutorials” \/]<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial we are going to use XSLT to transform a simple XML document into an XHTML web page. \u00a0XSLT stands for eXtensible Style Sheet Transformations. With our XSL document we will pretty much grab the values we need from the source XML and display them nicely in XHTML.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30,17],"tags":[57,165,120],"yoast_head":"\n
Simple XML to XHTML Transformation<\/title>\n<meta name=\"description\" content=\"In this tutorial we are going to use XSLT to transform a simple XML document into an XHTML web page. \u00a0XSLT stands for eXtensible Style Sheet Transformations. With our XSL document we will pretty much grab the values we need from the source XML and display them nicely in XHTML.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnathan Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation#webpage\",\"url\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation\",\"name\":\"Simple XML to XHTML Transformation\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"datePublished\":\"2010-05-03T21:38:37+00:00\",\"dateModified\":\"2011-07-29T23:36:40+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\"},\"description\":\"In this tutorial we are going to use XSLT to transform a simple XML document into an XHTML web page. \\u00a0XSLT stands for eXtensible Style Sheet Transformations. With our XSL document we will pretty much grab the values we need from the source XML and display them nicely in XHTML.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teamtutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple XML to XHTML Transformation\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\",\"name\":\"Johnathan Ward\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"caption\":\"Johnathan Ward\"},\"description\":\"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.\",\"sameAs\":[\"http:\/\/johnathanward.com\",\"https:\/\/twitter.com\/spyderman4g63\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple XML to XHTML Transformation","description":"In this tutorial we are going to use XSLT to transform a simple XML document into an XHTML web page. \u00a0XSLT stands for eXtensible Style Sheet Transformations. With our XSL document we will pretty much grab the values we need from the source XML and display them nicely in XHTML.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation","twitter_misc":{"Written by":"Johnathan Ward","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation#webpage","url":"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation","name":"Simple XML to XHTML Transformation","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"datePublished":"2010-05-03T21:38:37+00:00","dateModified":"2011-07-29T23:36:40+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9"},"description":"In this tutorial we are going to use XSLT to transform a simple XML document into an XHTML web page. \u00a0XSLT stands for eXtensible Style Sheet Transformations. With our XSL document we will pretty much grab the values we need from the source XML and display them nicely in XHTML.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/simple-xml-to-xhtml-transformation#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teamtutorials.com\/"},{"@type":"ListItem","position":2,"name":"Simple XML to XHTML Transformation"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9","name":"Johnathan Ward","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","caption":"Johnathan Ward"},"description":"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.","sameAs":["http:\/\/johnathanward.com","https:\/\/twitter.com\/spyderman4g63"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/2581"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=2581"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/2581\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=2581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=2581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=2581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}