XQuery/Displaying data in HTML Tables

Motivation
You would like to display your XML data in an HTML tables and display alternate rows using a colored background.

Data File
Assume you have a data file such as the following XML file which is a sample glossary of terms and definitions:

terms.xml
The tags will repeat for each term in your glossary.

You would like to display these terms in an HTML table.

Screen Image


The following XQuery will perform the task.

Sorting before counting
There are two nested for loops. The outer loop has the additional at count parameter that increments a counter for each result returned. The inner loop has the loop that returns a generic sorted item to the outer loop. Note that the inner loop does the sorting first and the outer loop does the counting of each item so that alternate rows are shaded.

Note that if you know the original file is in the correct order the nested for loops are not necessary. A single for loop with the at $count is all that is needed.

Dynamic Element Construction
The following lines:

conditionally creates a light blue background color for odds rows, rows which evaluate true because modulus 2 of their $count is not zero. This is an example of dynamic element construction.

Odd rows:

Even rows:

It does this by conditionally adding an attribute bgcolor="Lavender" for odd rows in the table. If the test ($count mod 2) is zero, i.e. on even rows, an attribute will not be added.

It is recommended best practice that the style of shading alternate rows of a table be done in a central cascading style sheet. The most general way to keep the table formats standard throughout your site would be to add semantic class tags to each row to label them even or odd.

The CSS file would then contain the following: