Doing Tables With XML

Doing Tables with XML

Displaying groups of data with HTML tables can be messy and result in complicated code on a web page. XML can provide a method to simplify this kind of web page by binding an XML data source to the html table. This technique is referred to as a 'data island' and is one of the simplest uses of XML on a web page. Although this in itself is useful, there are a number of limitations with the technique. The next and more powerful step is to utilize an extensible style sheet transform (XSLT) to actually generate the web page.

Extensible Markup Language (XML) - Introduction

XML got it's start in the XML working group (known as the SGML Editorial Review Board) formed under the auspices of the World Wide Web Consortium (W3C) in 1996. Standard Generalized Markup Language (SGML) is an international standard that describes the relationship between a document's context and its structure in an open and vendor-neutral format. Like HTML, XML is a subset of SGML. However, XML is not a single markup language: It is a meta-language to let users design their own markup language.

The purpose of XML is to specify a SGML subset that works well for delivering SGML information over the Web. XML was conceived as a means of regaining the power and flexibility of SGML without most of its complexity. XML retains many of the beneficial features of SGML, while removing many of the more complex features of SGML that make the authoring and design of suitable software both difficult and costly.

XML - Basics

A complete XML document system has three components: XML file containing a document's content - the "data" (or semantics); a DTD containing the documents structure (or grammar) of the content; an XLS (Style Sheet) that contains the rules to specify how each element is rendered.

It is not necessary to define a complete document system to use an XML data source in a table on a web page table. Instead, we only need a well formed XML document, i.e., an XML document that contains text and XML tags which conform with the XML syntax. Note: a complete xml document system can be used as well. If fact, there are some good reasons for doing so - but that is another topic.

The minimal XML syntax is straight forward and will appear familiar to html authors. The rules include:
- An XML document must contain at least one element
- The document must be enclosed in a pair of unique tags. These define the documents root element.
- The tags must be properly nested (see paragraph below)
- Tags are case sensitive

XML - An example data island

Many ASP members are familiar with the ASP member list GuySoftware so thoughtfully provides (http://www.guysoftware.com/asplinks.shtml) to enable ASP members to link their web pages to each other. (This ASP member's efforts are greatly appreciated!) Using that list as an example, an xml definition might be:

<?xml version="1.0"?>
<ASPMEMBERS>
<MEMBER>
<NAME> </NAME>
<DESCRIPTION> </DESCRIPTION>
</MEMBER>
</ASPMEMBERS>

The first line in the xml file is xml declaration required to identify the file for the xml parser. The next line <ASPMEMBERS> is the root element of our document. The 3rd line begins the definition of our member record - it has 2 sub-elements representing the fields of the record. Each field has a starting and closing tag. At the end of the field list, the record definition is completed with the record's closing tag </MEMBER>. The document root closing tag is placed after the last member record. The root document can contain multiple "records". It can also contain fields at the root level. E.g. the date the file was generated or the authors name.

The rules for "proper nesting" as the same as for html tags: tags must be closed in reverse of the order they are opened. In other words, if a tag, call it <A> has a tag inside it, call it <B>, tag "B" must be closed before "A" is close. Schematically:
<A> <B> </B> </A> - correct
<A> <B> </A> </B> - incorrect
The same logic applies for multiple levels of nesting.

To create our XML data file, create a record for each member with their "name" filled in between the <NAME> & </NAME> tags & likewise for the description and save the file with an .xml extension. I've saved a small member list as asp1.xml for the example.

It's a good idea to validate the xml structure at this point. It can save you some grief. If there is an error, often it just plain doesn't work - no error or warning messages are supplied - and you see only a blank page. There are a number of online parsers available to do this. One is located at: http://www.javacommerce.com/tutorial/xmlj/parser.htm

XML - Using the XML data (IE 5 & 6 only)

IE has an private html tag, <xml> that allows simple access to xml from a web page. This simple data island uses that tag and will not work in Netscape 6. Read through this example though as it leads into a technique that works for both IE5+ & Netscape 6.

To bind the XML data file to the table, we need to do a couple things on our web page. Also, for all the examples, make sure the xml file (scr) is in the same folder as your html page.

The first is to create a reference to the data file on the web page. This is done using html's xml tag. This tag has an id attribute that is used to reference the data and a src attribute that references the location of the file.
E.g.:
<xml id="asp" src="asp1.xml"></xml>

The next step is to bind the data to the table. To do this, add a datascr attribute to the <table> tag and provide the id used in the xml tag. In this e.g.:
<table datasrc="#asp" >

THe last step is to build the table to the desired appearance and bind individual fields to the desired cells. In this example, I set the table up so each field occupies a row in the table and add a dummy row at the end as a spacer between each member. The <tr> & <td> tags do not accept a datafld attribute, so a <span> tag is used to hold the data field.

<table datasrc="#asp" >
<tr>
<td><span datafld="NAME"></span></td>
</tr>
<tr>
<td><span datafld="DESCRIPTION"></span></td>
</tr>
<tr>
<td> </td>
</tr>
</table>

That is all that's need to display the data - an entire set of N records populating a web page table with just a few lines of code (see aspmember.htm in the download zip file). The sample data contain 3 ASP members: Guy Software, WaverlyStreet Software, & Software by Dalesplace. The data can be changed without having to modify the web page at all. In fact, you can even modify the data source, say by adding a new field to the member record and it would not affect the display of this table.

XML - some limitations

There are a few things missing here - there is no link to the member's web site and we've done no formatting of the page. It sure doesn't look anywhere near as pretty nor is as functional as what Ed has provided.

XML includes a specification (XLINK) that provides powerful linking of elements of an XML document to internal and external resources. It seemed like a straight forward way to add the site link portion of our ASP Member list. I spent several hours reading & testing trying to get a simple xml href link to work - to no avail. I finally stumbled on a little 'by the way' - XLINK isn't implemented in IE version 5. Being unable to include a link or embed an image (or other resource) in a cell is a major limitation for our simple data island. The documentation suggests XLINK does work with version 6 browsers.

In fact, browsers before IE version 5, Netscape version 6 or equivalent do not support XML at all. The bad news doesn't stop there. The MS XML parser strongly favors using XLS (Extensible Language Style Sheet) while Netscape leans more toward CSS. Both will support CSS formatting of XML documents but do not implement the standard in the same manner.

Bare this in mind as we move on to the next section describing formatting XML in web pages.

XML - Formatting the data island table

Formatting can be accomplished with html attributes, in line CSS or an external CSS. A more powerful technique uses XLS which I'll discuss later in this article. XLS also can provide our "missing link" & works in IE & Netscape.

Formatting with HTML attributes is straight forward (sample: aspmember1.htm + asp1.xml). To reproduce the look on Ed's ASP page, an example is:

<table border="0" datasrc="#asp" cellspacing="0" cellpadding="2" width=100%>
<tr>
<td bgcolor="#0000A0" align=middle><font color="#FFFFFF"><span datafld="NAME"></span></font></td>
</tr>
<tr>
<td bgcolor="#0000A0"align=middle><font color=#ffff00><span datafld="DESCRIPTION"></span></font></td>
</tr>
<tr>
<td> </td>
</tr>
</table>

CSS can also be used to accomplish the formatting. (Sample: aspmember2.htm + asp.xml) One way of doing this is to build a CSS class for each of the table cells that specify the background color, text color and text alignment. There are other ways of doing the style sheet - I decided to define a <td> class because it was a simple substitution instance of the HTML tag version of the formatting. The style sheet can be internal or external bound to the web page with the <LINK> tag.
An example style sheet:
<style type="text/css" >
td.aspname {color: #FFFFFF; text-align: center; background: #000080}
td.aspdesc {color: #FFFF00; text-align: center; background: #000080}
</style>

To use the style sheet, simply add the class attribute to the <td> tags specifing the class names:
<table border="0" datasrc="#asp" cellspacing="0" cellpadding="2" width=100%>
<tr>
<td class="aspname"> <span datafld="NAME"></span></td>
</tr>
<tr>
<td class="aspdesc"><span datafld="DESCRIPTION"></span></td>
</tr>
<tr>
<td> </td>
</tr>
</table>

XML - A data island with Style (IE5+ and Netscape 6)

For this example, I've made another xml file (asp2.xml + asp.xsl) that includes the web link (WEBLINK) for ASP members.

In some ways, XSL (eXtensible Style Language) is to XML as CSS is to HTML. Like CSS, XSL provides a mechanism to specify how to render the elements of a page. XSL goes beyond CSS in that it also provides mechanisms to choose & manipulate XML data and to transform the results of the application of the XSL to the XML data to another file format (html among others).

schematically: XML + XSL > html.
This means the data island web page can be displayed without writing a separate web page. We can include all the layout & style information need to display our data in a XSL file.

XSL is comprehensive and powerful - and I make no claim to any expertise with the language. Indeed, my first exposure and programs stemmed from the research for this article. I found it to be a curious mixture of straight forward and frustrating. A lot of the web & MSDN documentation assumed information I didn't have and so I spent a fair amount of time backtracking. If you are considering learning XML/XSL a quality reference book is a must.

The style sheet begins with an XML declaration and stylesheet namespace declaration. Since the XSL will do a transform, we also specify that information. And we specify that our template data searches will begin at the XML document root ( / == document root ).

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
* page code here *
</xsl:template>
</xsl:stylesheet>

Since all tags need to be closed, the template and stylesheet close tags are at the end of the XSL document. The xsl:output Element is a processor command rather than a tag - so has no close tag.

What is the 'template'? It's the page layout - it is what will be placed in the * page code here * section. The template can include both fixed data and data obtain from the XML file. The template for the data island will consist of much of the same html code the web page used with the addition of xsl commands to populate the table.
The basic template is:
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr >
<td style="color: #FFFFFF; text-align: center; background: #000080">
* asp member name & link goes here *
</td>
</tr>
<tr>
<td style="color: #FFFF00; text-align: center; background: #000080">
* asp member description goes here *
</td>
</tr>
<tr>
<td height="15em"> </td>
</tr>
</table>

As you can see, this is the same html code used on the web page except I've move the style sheet information to inline style tags.

Now the fun part. How do we populate the table with the name, link & description data? This is a little more involved than our html data island. We need to build a loop to browse through the xml data. This is done with:
<xsl:for-each select="//ASPMEMBERS/MEMBER">
* extract data *
</xsl:for-each>

The code above loops through each of the "MEMBER" records so data can be extracted from them. To return a particular member data item, the following code is used:
<xsl:value-of select = "tag_name"/>
where tag_name is the name of each 'field', I.e., NAME, WEBLINK & DESCRIPTION.

To insert an asp member description field into the table:
<td style="color: #FFFF00; text-align: center; background: #000080">
<xsl:value-of select = "DESCRIPTION"/>
</td>

The name & link are more complex because the link is an html tag attribute. I chased this around for some time before getting it to work correctly. Here the code to set an html tag attribute with data from an XML file:

<td style="color: #FFFFFF; text-align: center; background: #000080">
<a> 
<xsl:attribute name="href"> 
<xsl:value-of select = "WEBLINK"/> 
</xsl:attribute> 
<xsl:value-of select="NAME"/> 
</a> 
</td>

This code will populate the table including the member's link and format the table.

The web page attributes and formatting can also be defined in the XSL file. The code is the same html code that would be used on a web page. Other elements on the web page can also be populated from the XML file. For example, the page title, the date the XML file was last modified and so forth could be included. This would enable the entire web page to be updated just by updating the XML file.

The download for this example (asp2.xml + asp.xsl) includes the code to dynamically load the page title, the "about ASP" paragraph and the date the file was updated.

XML - Ready for the web?

Sadly, the answer is no. If you can trust your web visitors will use IE5+, Netscape 6 or equivalent browsers it is possible to build basic data islands that correctly render. There are still enough users of older browsers to make this a questionable choice unless you are doing browser version detection & supply alternate pages. Most of us are too busy writing software to spend this kind of time & effort on our web pages.

If you want to take advantage of the more powerful formatting features using CSS, building pages that consistently render across browsers can get very tedious.

We've been hearing for years now how XML & XHTML are the web's "future". XML V1.0 was finalized in February 1998. The final draft of XSL has been around since November of 1999. Here we are 3-4 years later, and cannot build a page that conforms to these standards and have them correctly render across the major browser brands. It makes me wonder - what are the point of The World Wide Web Consortium standards when the "major players" continue to whistle their own tunes anyway? The XML "vision" for the web is nice, but it's still more dream than actual. XML is playing some important roles with intranet and server-side presentation of web pages but it's still a long way from prime time for typical client side web pages.

The examples in the article can be downloaded at http://www.dalesplace.net/xml_eg.zip

Web references:
http://www.javacommerce.com/tutorial/xmlj/intro.htm
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk30/htm/xmcongettingstartedwithxslttutorial.asp
http://www.w3.org/XML/
http://www.w3schools.com/xml/xml_browsers.asp
http://devedge.netscape.com/library/manuals/2001/xslt/1.0/