Creating an HTML Table | XSLT for Dummies

Chapter 10 - To HTML and Beyond!
XSLT For Dummies
by Richard Wagner
Hungry Minds 2002

Because of their well- formed structure, many XML documents naturally can be represented as a table. No, not the kind you eat off of in your kitchen, but the kind that has columns and rows. To show you how this process works, look again at the quotes.xml source document shown in Listing 10-1. Id like to show these quotes inside an HTML table.

To start, I create a template rule that sets up the document container elements as I do in the example earlier in this chapter. That part is easy, because you always know that, for a given HTML document, there is always one html element and one body element. However, the number of rows in my table is based on the number of quote elements in my source document. Therefore, the common method of creating an HTML table lies in using an xsl:for-each instruction to create each of the tables rows. Consider the following stylesheet:

 <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html"/> <!-- Wrap html and body elements around rest of document --> <xsl:template match="/"> <html> <body bgcolor="#FFFFFF"> <xsl:apply-templates/> </body> </html> </xsl:template> <!-- Create HTML table for quote elements --> <xsl:template match="filmquotes"> <table width="95%" border="1" cellspacing="2" cellpadding="2"> <tr bgcolor="#FFCCCC"> <th>Source</th> <th>Spoken By</th> <th width="60%">Quote</th> </tr> <xsl:for-each select="quote"> <tr> <td><i><xsl:value-of select="source"/></i></td> <td><xsl:value-of select="spokenby"/></td> <td width="60%"><xsl:value-of select="text"/></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet>

In the filmquotes template rule, I use literal text to define the table element and the header row. I then add xsl:for-each to loop through each quote element in the source document. For each instance, a row is created, and the values of its source , spokenby , and text child elements are inserted as columns.

The result is shown here:

 <html> <body bgcolor="#FFFFFF"> <table width="95%" border="1" cellspacing="2" cellpadding="2"> <tr bgcolor="#FFCCCC"> <th>Source</th> <th>Spoken By</th> <th width="60%">Quote</th> </tr> <tr> <td><i>Toy Story</i></td> <td>Buzz Lightyear</td> <td width="60%">To infinity, and beyond!</td> </tr> <tr> <td><i>Bennie and Joon</i></td> <td>Sam</td> <td width="60%">It seems to me that, aside from being a little mentally ill, she's pretty normal.</td> </tr> <tr> <td><i>Sabrina</i></td> <td>Sabrina</td> <td width="60%">More isn't always better, Linus. Sometimes it's just more.</td> </tr> <tr> <td><i>Casablanca</i></td> <td>Rick Blaine</td> <td width="60%">Who are you really, and what were you before? What did you do, and what did you think, huh?</td> </tr> <tr> <td><i>Groundhog Day</i></td> <td>Phil Connors</td> <td width="60%">Well, it's Groundhog Day again</td> </tr> <tr> <td><i>Princess Bride</i></td> <td>Wesley</td> <td width="60%">To the pain</td> </tr> <tr> <td><i>O Brother, Where Art Thou</i></td> <td>Delmar</td> <td width="60%">We thought you was a toad.</td> </tr> <tr> <td><i>Princess Bride</i></td> <td>Inigo Montoya</td> <td width="60%">Hello. My name is Inigo Montoya. You killed my father. Prepare to die.</td> </tr> </table> </body> </html>

Figure 10-2 shows the table when you view it with a Web browser.

Figure 10-2: HTML table created from XML document.




2000-2002 Feedback