Question

I have a table and inside of it two another tables.
The problem is that they not aligned horizontally. I want the headers to start at the same line .

<TABLE  CELLPADDING="10" >
    <tr>
    <td>
     <!--This is Process Info Table-->
    <table border="1" >
        <tr bgcolor="#006699">
            <th colspan="2" ALIGN="LEFT">Process Info:</th>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Product Name:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/ProductName"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Process Window Name:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/ProcessWindowName"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Oven Recipe Name:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/OvenRecipeName"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Conveyor Speed Units:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/ConveyorSpeedUnits"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Temperature Scale:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/TemperatureScale"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Number of TCs:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/NumberOfTCs"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Number of Statistics:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/NumberOfStatistics"/></td>
        </tr>
    </table>
    </td>
    <td>
    <!--This is Statistics Limits Table-->
    <table border="1" >
        <tr bgcolor="#006699">
            <th ALIGN="LEFT">Statistics Limits:</th>
            <th ALIGN="LEFT">Low</th>
            <th ALIGN="LEFT">Target</th>
            <th ALIGN="LEFT">High</th>
        </tr>
        <xsl:for-each select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/StatisticsLimits/Statistics/StatsticsEntries">
            <tr>
                <td style='padding:2px 100px 2px 2px'><xsl:value-of select="StatisticsLimitsName"/></td>
                <td style='padding:2px 20px 2px 2px'><xsl:value-of select="Low"/></td>
                <td style='padding:2px 20px 2px 2px'><xsl:value-of select="Target"/></td>
                <td style='padding:2px 20px 2px 2px'><xsl:value-of select="High"/></td>
            </tr>
        </xsl:for-each>
    </table>

        </td>
    </tr>
    </TABLE>

Thanks.

Answer 1

Just add valign="top" to your <td> elements containing your tables.

See: http://jsfiddle.net/Wexcode/z8Q5W/