LanguagesXMLFrom XML Data to HTML Tables

From XML Data to HTML Tables

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

  • Preface
  • Introduction
  • A Sample Program
  • The XML File
  • The XSLT File
  • The Output
  • Complete Program Listings

Preface

I have authored numerous online articles on XML. These articles cover the range from introductory to advanced topics. I maintain a consolidated index of hyperlinks to all of my XML articles at my personal website so that you can access earlier articles from there.

Rendering XML documents

As of this writing, Microsoft IE5 is the only widely-used web browser that has the ability to render XML documents. IE5 can render XML documents using either CSS (see my personal website) or XSL.

This is one in a series of articles that discuss the use of XSL for the rendering of XML documents, with particular emphasis on the use of IE5 for that purpose.

Introduction

In a previous article, I showed you how to use the

xsl:for-each 
processing element to loop through and display the contents of a series of XML elements of the same type. I also showed you how to use a couple of other processing elements as well:

xsl:value-of
and

xsl:template

The program was simple. In order to keep the program as simple as possible, I minimized the use of HTML code. As a result, the program didn’t do anything useful.

Make it useful

Now I am going to go back and upgrade that program into one that could be useful. In particular, I am going to loop through a series of XML elements and cause the contents of those elements to be deposited in an HTML table.

A Sample Program

In this lesson, I will develop the XML code representing a small database of information on books. In addition, I will develop the corresponding XSLT code required to process that database.

I will also show you how to use IE5 to transform the data in the XML database to HTML according to the XSLT. When you load the XML file into IE5, the XML will be converted into an HTML table and displayed in the browser window. Alternately, you can load the XML file and the XSLT file into the XSL Debugger discussed in an earlier lesson and get essentially the same result.

This example is based on XSLT information available at the W3C and on IE5 information available at Microsoft.

The XML File

The XML file is named XSL003.xml. I am purposely skipping the preliminary material at the top, such as the xml version tag and the xml-stylesheet tag. You have seen that code before, and there is nothing new there.

The first element is simply:

Following that element are the data elements:


      <br />
       Java<br />
      

R.Baldwin
$9.95

The XML file shows the first of several elements named

theData</font>
. This is where the interesting data about books is actually stored in the XML file.

As you can see, the contents of an element named

theData</font>
consists of three other elements:


  •  title </font>

  •  author </font>

  •  price </font>

What are the contents of these elements? The actual data value associated with that element. Here’s some more of the XML file:


XML
R.Baldwin $19.60

This shows two another element named

theData</font>
. A simple database like this could potentially contain hundreds, or even thousands of such entries. This code also shows the end tag for the

top</font>
element we saw earlier. Now let’s take a look at the XSLT file.


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.



M

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
xsl:for-each
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.


The Output

If you load this XML file into your IE5 browser, you should see something very similar to the following in the browser window:

 

Title Author Price
Java R.Baldwin $9.95
Python R.Baldwin $15.42
XML R.Baldwin $19.60

So there you have it. The use of an XSLT file to transform the contents of a simple XML database into an HTML table.

Complete Program Listings

A complete listing of the XML file is shown below, followed by a complete listing of the XSLT file. Copyright 2000, Richard G. Baldwin. Reproduction in whole or in part in any form or medium without express written permission from Richard Baldwin is prohibited.

XML




Java
R.Baldwin $9.95
Python
R.Baldwin $15.42
XML
R.Baldwin $19.60


XSLT





Title Author Price




About the author: Richard Baldwin is a college professor and private consultant whose primary focus is a combination of Java and XML. In addition to the many platform-independent benefits of Java applications, he believes that a combination of Java and XML will become the primary driving force in the delivery of structured information on the Web.

Richard has participated in numerous consulting projects involving Java, XML, or a combination of the two. He frequently provides onsite Java and/or XML training at the high-tech companies located in and around Austin, Texas. He is the author of Baldwin’s Java Programming Tutorials, which has gained a worldwide following among experienced and aspiring Java programmers. He has also published articles on Java Programming in Java Pro magazine.

Richard holds an MSEE degree from Southern Methodist University and has many years of experience in the application of computer technology to real-world problems.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories