November 2003 Technical Tip – HTML Table Tricks With XML
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.
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 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 email@example.com .