Display Lists in Columns Horizontally Using One Cell per Column
Page 1 of 2
Written by
Gregory Scot Collins
Tuesday, 19 September 2006, 7:25 AM
This article has been tested to work with the following products and versions. No guarantee of compatibility, with or without modification, is offered for products or versions other than those listed.
IN THIS ARTICLE:
When outputting lists it is often helpful to display the list items in multiple columns. This allows more items to fit on a single row, thus taking fewer rows to display the list. The example code in this article allows for an arbitrary number of columns to be rendered for a given list. The number of columns can either be hard-coded or passed in to the transform as a parameter. For this example we will hard-code the number into a variable.
There are a minimum of four techniques you can use to render your list items in multiple columns. This article covers displaying items left-to-right top-down with items combined in a single table cell per column. Links to three other articles, demonstrating different techniques, can be found in the See Also box.
Create the Items.xml file
We need a simple XML file to transform that contains our list of items that we can output in multiple columns. Copy the contents of Listing 1 into a text editor, and then save the file as Items.xml.
Create the Columns-Horizontal-Combined.xsl file
Now we need a transform to output our list items in an arbitrary number of columns. You will find the number of columns hard-coded to seven in the COLS variable. Feel free to adjust this number to whatever you choose; or, if you prefer, you can change it into a parameter, and then pass in the value when applying the transform.
Copy the contents of Listing 2 into a text editor, and then save the file as Columns-Horizontal-Combined.xsl. Be sure to save it in the same folder as the Items.xml file.
Stumble It!
Digg It!
del.icio.us
