October 27, 2016
Hot Topics:

From XML Data to HTML Tables

  • September 15, 2000
  • By Richard G. Baldwin
  • Send Email »
  • More Articles »

The XSLT File

This file is named XSL003.xsl. It shows how to use XSLT to transform the contents of a simple XML database into an HTML table.

I will also discuss this XSLT file in fragments. A complete listing of the file is presented near the end of the lesson.

The following code shows the preliminary material at the beginning of the file. I discussed this material in detail in a previous lesson, and won't repeat that discussion here.




Create an HTML table

You will recall, any literal text that is not inside a processing element is simply passed through and inserted into the output. This code shows some of the literal text necessary to create an HTML table. If you don't know the purpose of these attributes of an HTML table element, I'm sure that you can find that information at dozens of places on the web.

Go visit Joe Burns

A good place to start looking for HTML information would be at Joe Burns' HTML Goodies web site.

Create and populate a table row with literal text

Similarly, this code creates a table row and deposits the words Title, Author, and Price in three cells in that row.

These words become the headers for three columns of data in the HTML table. Again, if you don't recognize <td> and <b>, go visit Joe Burns and learn about HTML.

Implement a processing loop for each XML data element

Now we get to see some XSLT mixed in with literal HTML text. Here we use an

Title Author Price
processing element to loop through each of the elements named theData in the XML file:


At the beginning of each iteration, the code creates a new row in the table using an HTML <tr> element. For each row, it uses three successive xsl:value-of processing elements to extract the contents of the three elements named title, author, and price.

Insert each content value into a table cell

The contents of each XML element are inserted into a cell in the HTML row by wrapping them in an HTML table data element indicated by <td>. Then the entire populated row of HTML text is inserted into the output text stream.

Cleanup time again

Finally, here are the ending tags for the HTML elements that are being created as well as the ending tags for the XSLT template and stylesheet elements:



Now let's look at some output.

Page 2 of 3

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel