November 2003 Technical Tip HTML Table Tricks With XML

In his August 2003 Technical Tip, Bill Qualls showed us a great way to improve the maintainability of HTML tables (see HTML Table Tricks With JavaScript). By moving the location of table values from the HTML markup section of the web page to a more readable section of JavaScript code, Bill showed us that we could make the table values easier to find, easier to understand and easier to change.  This month, we are taking the same example one step further.  By coding the table values in XML, we can achieve even greater improvements in maintainability while also getting a bunch of other benefits that come from a more modular systems design.

As Bill noted in his article, coding of tables directly into HTML markup can be a very tedious process. Since HTML markup tags are oriented toward formatting , they add clutter to the table data elements without giving us any hint as to their meaning.  The example below shows just how cluttered and meaningless this kind of code can appear even when the table is simple and all of the data elements for one table row are confined to one row of markup text.  As the table gets larger or more complex, the problem just gets worse.

<tr><td>CDT060</td><td>Data Representation</td><td>1</td></tr>
<tr><td>CDT020</td><td>Hands-on TSO/ISPF</td><td>2</td></tr>
<tr><td>CDT050</td><td>JCL by Example</td><td>3</td></tr>
<tr><td>CDT100</td><td>Business Programming Logic</td><td>2</td></tr>
<tr><td>CDT110</td><td>COBOL Fundamentals</td><td>5</td></tr>
<tr><td>CDT120</td><td>COBOL Intermediate</td><td>5</td></tr>
<tr><td>CDT030</td><td>Advanced JCL for COBOL Pgmrs</td><td>2</td></tr>
<tr><td>CDT180</td><td>VSAM for COBOL Programmers</td><td>2</td></tr>
<tr><td>CDT500</td><td>CICS Command Level Workshop</td><td>5</td></tr>

Instead of moving the table data to a JavaScript section of our web page, our approach this month is to code the table data using XML.  XML, the Extensible Markup Language, is actually a meta-language that allows us to create custom markup languages for each new application.  For this example, we have created the COURSES XML-based markup language.  An example of using the COURSES markup language to code some of our table data is shown below.  The full text of the XML coding of this example can be found at http://www.caliberdt.com/tips/Nov2003-XML.htm.

<courses>
   <course>
      <courseno>CDT060</courseno>
      <coursename>Data Representation</coursename>
      <duration>1</duration>
   </course>
...
</courses>

This XML approach provides several advantages over coding the table directly into HTML markup.  Since the COURSES markup language is made up of custom tags that we have created specifically for our application, each data element is surrounded by tags that describe that element.  Additionally, the <course> and </course> tags allow us to show explicitly how our data is structured as a course list.  This ability to use XML markup to show both the structure and meaning of the data has great advantages over coding directly into HTML markup.  And there is good news for those lazy or inexperienced typists who were hoping to get away from all of the typing work that markup languages require.  There are numerous affordable XML editing environments that allow the programmer to build a custom data entry application for each new XML application.  These tools include dedicated XML editors like XMetaL as well desktop productivity applications like Word, Excel and Access (new features with Microsoft Office 2003). Using these tools, it is easy to create a user interface for table maintenance that is appealing to both programmers and end users alike.

While the system design for the XML approach to this problem is a little more complex, its modularity creates a number of extra benefits.  In addition to the table source data that we have coded in the COURSES markup language, we must also create a transformation program that is used to generate our HTML table from the XML source.  Transformation programs are coded in XSLT (Extensible Stylesheet Language: Transformations).  An XSLT processor takes the XML file (data) and the XSLT transformation program (presentation) and generates the HTML file containing our COBOL Curriculum Table. The diagram below shows the system flow for this process:

The separation of data from presentation in this approach creates a number of advantages.  The XML data file is much more readable than its HTML counterpart.  Better yet, it can be maintained by easily-built editing applications that can be given directly to end users.  Further, the same transformation program might be used for a number of different tables in order to achieve a standard style for tables and the web pages that contain them.  A decision to revise that style would require only the revision of a single transformation program and the re-generation of all of the related web pages.  This modular approach gives benefits that just aren't possible in the HTML Only or HTML Plus JavaScript approaches.

Coding our presentation logic in XSLT is not much more challenging than coding it in JavaScript.  As you can see from the code snippet below, XSLT is an XML application itself.  As such, it has a tag language syntax that can seem worrisome to the uninitiated.  Nevertheless, simple things are fairly simple to do in XSLT.  The example below shows the code needed to shade every other row of our HTML table just as was done in the August 2003 Technical Tip example. The full text of the example XSLT transformation program can be found at http://www.caliberdt.com/tips/Nov2003-XSLT.htm.

<xsl:for-each select="/courses/course">
   <xsl:choose>
      <xsl:when test="position() mod 2 != 0">
         <tr bgcolor="#CCCCCC">
         <xsl:apply-templates />
         </tr>
      </xsl:when>
      <xsl:otherwise>
         <tr bgcolor="#FFFFFF">
         <xsl:apply-templates />
         </tr>
      </xsl:otherwise>
   </xsl:choose>
</xsl:for-each>

The final step, generating an HTML file using an XSLT Processor, is easy. A number of very good XSLT Processors are available for free. These can be used to generate an HTML page offline before placing it on a web server.  The most recent releases of the Microsoft and Netscape browsers have XSLT Processors built in.  So, if appropriate, you may generate the HTML directly from the XML each time the web page is accessed. 

The following graphic shows the rendered output for our example web page:

While the appearance of this page is exactly the same as that from the August 2003 Technical Tip example, the HTML source code is distinctly different.  The full text of the HTML source code for this example can be found at http://www.caliberdt.com/tips/Nov2003-HTML.htm.  To render this web page example with your browser, please point your browser to http://www.caliberdt.com/tips/Nov2003-EXAMPLE.htm.

If you have a question regarding this article, XML or XSLT, please feel free to write me, Kevin Trainor, at ktrainor@ligent.net .


Go to the articles index. Copyright 2003 by Caliber Data Training 800.938.1222