CODEWITHSUNDEEP
xmlxslt
Aditya Kaushik
Aditya Kaushik

Reputation: 211

Aligning table headers and table cells

I have the following sample XML :

<javancss>
    <packages>
        <package id="1">
            <name>Package 1</name>
            <File ID="1">
                <classes>3</classes>
                <functions>21</functions>
                <ncss>283</ncss>
                <javadocs>20</javadocs>
                <javadoc_lines>111</javadoc_lines>
                <single_comment_lines>11</single_comment_lines>
                <multi_comment_lines>221</multi_comment_lines>
            </File>
            <File ID="2">
                <classes>3</classes>
                <functions>21</functions>
                <ncss>285</ncss>
                <javadocs>20</javadocs>
                <javadoc_lines>111</javadoc_lines>
                <single_comment_lines>11</single_comment_lines>
                <multi_comment_lines>222</multi_comment_lines>
            </File>
        </package>
</packages>

 <objects>
        <object id="1">
            <name>Object 1</name>
            <File ID="1">
                <ncss>253</ncss>
                <functions>17</functions>
                <classes>2</classes>
                <javadocs>20</javadocs>
            </File>
            <File ID="2">
                <ncss>255</ncss>
                <functions>17</functions>
                <classes>2</classes>
                <javadocs>20</javadocs>
            </File>
        </object>
<objects>

<functions>
 <function id="10">
            <name>Function 1</name>
            <File ID="1">
                <ncss>61</ncss>
                <ccn>29</ccn>
                <javadocs>1</javadocs>
            </File>
            <File ID="2">
                <ncss>61</ncss>
                <ccn>29</ccn>
                <javadocs>1</javadocs>
            </File>
        </function>
</functions>
</javancss>

And the following XSLT to translate it to HTML :

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>

<head>
</head>

<body>

<center>  <h2>Package Summary</h2> </center>

<table border="1" >

  <tr>
    <th  > ID</th>
    <th  > Name</th>
    <th width="20"  >File</th>
    <th width="46"  >Classes</th>
    <th width="58"  >Functions</th>
    <th width="60"  >NCSS</th>
    <th width="82"  >Javadocs</th>
    <th width="130"  >Javadoc Lines </th>
    <th width="199"  >Single Comment Lines </th>
    <th width="126"  >Multi Comment Lines </th>
  </tr>

  <xsl:for-each select="/javancss/packages/package">

<tr>
    <td  > <xsl:value-of select="@id" /> </td>
    <td align="left" > <xsl:value-of select="name" /></td>
    <td  colspan="8"><td />
<table border="1">

    <xsl:for-each select="File">
<tr >
            <td width="20"  > <a href="#FileList"><xsl:value-of select="@ID" /> </a></td>
        <td width="46"  > <xsl:value-of select="classes" /></td>
            <td width="58"  > <xsl:value-of select="functions" /> </td>
            <td width="60"  ><xsl:value-of select="ncss" />      </td>
            <td width="82"  ><xsl:value-of select="javadocs" /></td>
            <td width="130"  ><xsl:value-of select="javadoc_lines" /> </td>
            <td width="199"  ><xsl:value-of select="single_comment_lines" /> </td>
            <td width="126"  ><xsl:value-of select="multi_comment_lines" /> </td>
    </tr></xsl:for-each>
    </table></td>
  </tr>
</xsl:for-each>
</table>

<center>  <h2>Object Summary</h2> </center>

<table border="1" >

  <tr>
    <th  > ID</th>
    <th  > Name</th>
    <th width="20"  >File</th>
    <th width="46"  >Classes</th>
    <th width="58"  >Functions</th>
    <th width="60"  >NCSS</th>
    <th width="82"  >Javadocs</th>
  </tr>

  <xsl:for-each select="/javancss/objects/object">

<tr>
    <td  > <xsl:value-of select="@id" /> </td>
    <td align="left" > <xsl:value-of select="name" /></td>
    <td  colspan="8"><table border="1">
    <xsl:for-each select="File">
<tr>
            <td width="20"  ><a href="#FileList"><xsl:value-of select="@ID" /> </a></td>
        <td width="46"  > <xsl:value-of select="classes" /></td>
            <td width="58"  > <xsl:value-of select="functions" /> </td>
            <td width="60"  ><xsl:value-of select="ncss" />      </td>
            <td width="82"  ><xsl:value-of select="javadocs" /></td>
    </tr></xsl:for-each>
    </table></td>
  </tr>
</xsl:for-each>
</table>

<center>  <h2>Functions Summary</h2> </center>

<table border="1">

  <tr>
    <th  > ID</th>
    <th  > Name</th>
    <th width="20"  >File</th>
    <th width="46"  >CCN</th>
    <th width="60"  >NCSS</th>
    <th width="82"  >Javadocs</th>
  </tr>

  <xsl:for-each select="/javancss/functions/function">

<tr>
    <td  > <xsl:value-of select="@id" /> </td>
    <td align="left" > <xsl:value-of select="name" /></td>
    <td  colspan="8"><table border="1">
    <xsl:for-each select="File"><tr>
            <td width="20"  ><a href="#FileList"><xsl:value-of select="@ID" /> </a></td>
        <td width="46"  > <xsl:value-of select="ccn" /></td>
            <td width="60"  ><xsl:value-of select="ncss" />      </td>
            <td width="82"  ><xsl:value-of select="javadocs" /></td>
    </tr></xsl:for-each>
    </table></td>
  </tr>
</xsl:for-each>
</table>

</body>
</html>
</xsl:template>
</xsl:stylesheet>

I am not able to align the table headers and the cells together. I would like to know how to go about doing it and if possible , how to make this behaviour cross compatible with all browsers out there.

All help would be appreciated

Upvotes: 0

Views: 725

Answers (1)

hr_117
hr_117

Reputation: 9627

You shouldn't use table in table for this. Try to use rowspan
For example for your first table (Package Summary) try something like this:

<center>
    <h2>Package Summary</h2>
</center>

<table border="1" >

    <tr>
        <th  > ID</th>
        <th  > Name</th>
        <th width="20"  >File</th>
        <th width="46"  >Classes</th>
        <th width="58"  >Functions</th>
        <th width="60"  >NCSS</th>
        <th width="82"  >Javadocs</th>
        <th width="130"  >Javadoc Lines </th>
        <th width="199"  >Single Comment Lines </th>
        <th width="126"  >Multi Comment Lines </th>
    </tr>

    <xsl:for-each select="/javancss/packages/package">
        <xsl:variable name="filescnt" select="count(File)" />
        <xsl:for-each select="File">
            <tr>
                <xsl:if test="position() =1" >
                    <td  rowspan="{$filescnt}">
                        <xsl:value-of select="../@id" />
                    </td>

                    <td align="left"  rowspan="{$filescnt}">
                        <xsl:value-of select="../name" />
                    </td>
                </xsl:if>
                <td width="20"  >
                    <a href="#FileList">
                        <xsl:value-of select="@ID" />
                    </a>
                </td>
                <td width="46"  >
                    <xsl:value-of select="classes" />
                </td>
                <td width="58"  >
                    <xsl:value-of select="functions" />
                </td>
                <td width="60"  >
                    <xsl:value-of select="ncss" />
                </td>
                <td width="82"  >
                    <xsl:value-of select="javadocs" />
                </td>
                <td width="130"  >
                    <xsl:value-of select="javadoc_lines" />
                </td>
                <td width="199"  >
                    <xsl:value-of select="single_comment_lines" />
                </td>
                <td width="126"  >
                    <xsl:value-of select="multi_comment_lines" />
                </td>

            </tr>
        </xsl:for-each>
    </xsl:for-each>
</table>

Upvotes: 1

Related Questions