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
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.
In a previous article, I showed you how to use the
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:
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.
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.
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 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:
The XML file shows the first of several elements named
As you can see, the contents of an element named
What are the contents of these elements? The actual data value associated with that element. Here’s some more of the XML file:
This shows two another element named
. A simple database like this could potentially contain hundreds, or even thousands of such entries. This code also shows the end tag for the
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.
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.
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.
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
Insert each content value into a table cell
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.
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.
R.Baldwin $9.95 R.Baldwin $15.42 R.Baldwin $19.60
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.
Convert XML to HTML Table
Do you find this tool useful? Then share it with your friends or colleagues. This will help us to make our free web tools better.
This form allows you convert XML data to HTML table, paste or upload your XML file below:
Result of XML conversion to HTML
Preview of HTML table
About XML conversion to HTML
About XML data conversion to HTML table
The XML to HTML Converter was created for online transform XML(Extensible Markup Language) data into HTML table. It’s very simple and easy way to transform and share XML to HTML code.
How it Works?
Just paste or upload your XML data to the textarea above and click to the button «Convert» and you will instantly get HTML code.
Example of XML conversion to HTML
1 Dwayne Johnson 47 2 Jessica Alba 38 3 Peter Pan 120
| id | firstName | lastName | age |
| 1 | Dwayne | Johnson | 47 |
| 2 | Jessica | Alba | 38 |
| 3 | Peter | Pan | 120 |
Did you like this tool? You can donate to us. This will help us improve our free web tools.