Multiple Columns in XSLT

I am trying to figure out how to produce 3 columns wide and however many rows that are needed until the end of the data is reached. Right now it is producing a single column but I would like the results to span 3 columns wide. Any help? Here's my XSL.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<div align="center"><img src="../PublishingImages/Birthday_banner.jpg" align="top"></img><br /><br />
<table width="100%" bgcolor="#ffffff">
<tr>
        <!-- Need to repeat this column three times across --><td align="center">
<NewDataSet>
      <Data>
      <xsl:for-each select="NewDataSet/Data">
        
      <table width="350" border="0" cellpadding="1" cellspacing="0" bgcolor="#BDD154">
              <tr>
                <td valign="top">
                        <table width="100%" border="0" cellpadding="8" cellspacing="4" bgcolor="#FFFFFF">
                                <tr>
                                  <td valign="top"><xsl:text disable-output-escaping="yes"><![CDATA[ <img src="]]></xsl:text><xsl:value-of select="EmpImage"/><xsl:text disable-output-escaping="yes"><![CDATA["></img> ]]></xsl:text><br /></td>
                                    <td width="20" valign="top"></td>
                                    <td valign="top" nowrap="nowrap"><p><font face="Arial, Helvetica, sans-serif" color="#8A9B2B"><strong><font size="3"><xsl:value-of select="FirstName"/><xsl:text disable-output-escaping="yes"><![CDATA[ ]]></xsl:text><xsl:value-of select="LastName"/></font><br /><font face="Arial, Helvetica, sans-serif" color="#000000"><xsl:value-of select="Birthdate"/></font></strong></font><br />
                                    <br />
                                    <font size="2">Team: <xsl:value-of select="TeamName"/><br />
                                    Shift: <xsl:value-of select="Shift"/></font></p></td>
                                </tr>
                        </table>
                  </td>
            </tr>
            </table><br /><br />
                  </xsl:for-each>
                  </Data>
                  </NewDataSet>
                  </td>
            </tr>
            </table>
                  </div>
</xsl:template>
</xsl:stylesheet>
Chris24Asked:
Who is Participating?
 
Geert BormansInformation ArchitectCommented:
Here is the new stylesheet

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
        <div align="center"><img src="../PublishingImages/Birthday_banner.jpg" align="top"></img><br /><br />
            <table width="100%" bgcolor="#ffffff">
                <xsl:for-each select="NewDataSet/Data[position() mod 3 = 1]">
                    <tr>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="." />
                            </xsl:call-template>
                        </td>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[1]" />
                            </xsl:call-template>
                        </td>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[2]" />
                            </xsl:call-template>
                        </td>
                    </tr>
                </xsl:for-each>
            </table>
        </div>
    </xsl:template>
   
    <xsl:template name="processCell">
        <xsl:param name="thisData"/>
        <table width="350" border="0" cellpadding="1" cellspacing="0" bgcolor="#BDD154">
            <tr>
                <td valign="top">
                    <table width="100%" border="0" cellpadding="8" cellspacing="4" bgcolor="#FFFFFF">
                        <tr>
                            <td valign="top"><img src="{$thisData/EmpImage}"></img><br /></td>
                            <td width="20" valign="top"></td>
                            <td valign="top" nowrap="nowrap"><p><font face="Arial, Helvetica, sans-serif" color="#8A9B2B">
                                <strong><font size="3">
                                    <xsl:value-of select="$thisData/FirstName"/>
                                    <xsl:text> </xsl:text><xsl:value-of select="$thisData/LastName"/></font>
                                    <br /><font face="Arial, Helvetica, sans-serif" color="#000000"><xsl:value-of select="$thisData/Birthdate"/></font></strong></font><br />
                                <br />
                                <font size="2">Team: <xsl:value-of select="$thisData/TeamName"/><br />
                                    Shift: <xsl:value-of select="$thisData/Shift"/></font></p></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </xsl:template>
</xsl:stylesheet>
0
 
Geert BormansInformation ArchitectCommented:
In order to get you started
Instead of catching all the cell elements, you need to catch those with a position() mod 3 = 1
(so you take every 3rd cell)
you use this cell to create the row and add to that row the following-sibling [1] and [2]

I will translate that into code now
0
 
Geert BormansInformation ArchitectCommented:
I have put the individual cell processing in a named template
(In the mean time I got rid of the disable-output-escaping constructs that are simply awfull,
by using {} attribute value templates in the attribute values)

You could make this even nicer by having an inner for-each to get rid of the three cell repetitions,
but try this first
Some XML for me to test would have been nice, but I think I got it

cheers

Geert
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
Chris24Author Commented:
Wow! That is great! Worked first time. Thank you VERY much!!
0
 
Chris24Author Commented:
Even though the space between First and Last name is not showing....
0
 
Geert BormansInformation ArchitectCommented:
you are welcome

the space is a browser issue
if you replace the space with &#160; (the non breaking space)
the space will show

cheers

Geert
0
 
Chris24Author Commented:
A small issue. What if the final row has only one more set of data? It adds null data to the 2nd and 3rd cell in the last row. In this current project, it is an employee table sorted by last name. The very last person in the list (begins with Z of course) falls into the very last row in cell #1. Cell #2 and #3 display my label text but no data because there is no more data to place.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
<style type="text/css" media="screen">
@import url("../Source%20XML%20Files/Files/stone.css");
</style>
        <div align="center"><br />
            <table width="100%" bgcolor="#ffffff">
                <xsl:for-each select="NewDataSet/Data[position() mod 3 = 1]">
                    <tr>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="." />
                            </xsl:call-template>
                        </td>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[1]" />
                            </xsl:call-template>
                        </td>
                        <td align="center">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[2]" />
                            </xsl:call-template>
                        </td>
                    </tr>
                </xsl:for-each>
            </table>
        </div>
    </xsl:template>
   
    <xsl:template name="processCell">
        <xsl:param name="thisData"/>
        <table width="350" border="0" cellpadding="1" cellspacing="0" bgcolor="#BDD154">
            <tr>
                <td valign="top">
                    <table width="100%" border="0" cellpadding="8" cellspacing="4" bgcolor="#FFFFFF">
                        <tr>
                            <td valign="top"><img src="{$thisData/EmpImage}"></img><br /></td>
                            <td width="20" valign="top"></td>
                            <td valign="top" nowrap="nowrap" class="cellText"><p>
                                <strong>
                                    <span class="tblHeadmed"><font color="#8A9B2B"><xsl:value-of select="$thisData/FirstName"/>&#160;<xsl:value-of select="$thisData/LastName"/></font></span>
                                    <br />
                                                      <font color="#000000">Birthday: <xsl:value-of select="$thisData/Birthdate"/><br />Hire Date: <xsl:value-of select="$thisData/HireDate"/></font></strong><br />
                                <br />
                                <xsl:value-of select="$thisData/Address"/><br />
                                    <xsl:value-of select="$thisData/City"/>,&#160;<xsl:value-of select="$thisData/State"/>,&#160;<xsl:value-of select="$thisData/ZipCode"/><br />
                                    <xsl:value-of select="$thisData/PhoneHome"/><br />
                                    Mgr: <xsl:value-of select="$thisData/MgrFirstName"/>&#160;<xsl:value-of select="$thisData/MgrLastName"/><br />
                                    Dept: <xsl:value-of select="$thisData/Department"/><br />
                                    Team: <xsl:value-of select="$thisData/TeamName"/><br />
                                    Shift: <xsl:value-of select="$thisData/Shift"/></p></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </xsl:template>
</xsl:stylesheet>
0
 
Geert BormansInformation ArchitectCommented:
you could add a test

                      <td align="center">
                          <xsl:if test="following-sibling::Data[1]">
                            <xsl:call-template name="processCell">
                                <xsl:with-param name="thisData" select="following-sibling::Data[1]" />
                            </xsl:call-template>
                           </xsl:if>
                        </td>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.