Tech Support Forum - View Single Post - Problem with rendering a HTML Multi Rowspan/Colspan Table

CraigCooke · 03-05-2009, 02:49 AM

Hi There,

I am currently working on developing an application that allows users to create an email without knowledge of html, using blocks.

each cell is a block, so when they are moved around, their rowspan, colspan, position in the table etc will change.

I think it's best if i show you the problem than explain after, so heres the code

HTML Code:

<TABLE border=0 cellSpacing=0 cellPadding=0>
  <TBODY>
    <TR>
      <TD rowSpan=2 colSpan=3>
        <TABLE border=1 cellPadding=0 width=300 height=400>
          <TBODY>
            <TR>
              <TD style="COLOR: #000"><H4>Block 1</H4>
                <BR>
                Row: 1, RowSpan: 2, Col: 1 </TD>
            </TR>
          </TBODY>
        </TABLE></TD>
      <TD colSpan=3>
        <TABLE border=1 cellPadding=0 width=300 height=200>
          <TBODY>
            <TR>
              <TD style="COLOR: #000"><H4>Block 3</H4>
                <BR>
                Row: 1, RowSpan: 0, Col: 2 </TD>
            </TR>
          </TBODY>
        </TABLE></TD>
    </TR>
    <TR>
      <TD rowSpan=2 colSpan=3>
        <TABLE border=1 cellPadding=0 width=300 height=400>
          <TBODY>
            <TR>
              <TD style="COLOR: #000"><H4>Block 2</H4>
                <BR>
                Row: 2, RowSpan: 2, Col: 2 </TD>
            </TR>
          </TBODY>
        </TABLE>
        </TD>
    </TR>
    <TR>
      <TD rowSpan=2 colSpan=3>
        <TABLE border=1 cellPadding=0 width=300 height=400>
          <TBODY>
            <TR>
              <TD style="COLOR: #000"><H4>Block 5</H4>
                <BR>
                Row: 3, RowSpan: 2, Col: 1 </TD>
            </TR>
          </TBODY>
        </TABLE>
        <!--</div>--></TD>
    </TR>
    <TR>
      <TD colSpan=3>
        <TABLE border=1 cellPadding=0 width=300 height=200>
          <TBODY>
            <TR>
              <TD style="COLOR: #000"><H4>Block 4</H4>
                Row: 4, RowSpan: 0, Col: 2 </TD>
            </TR>
          </TBODY>
        </TABLE>
        </TD>
    </TR>
  </TBODY>
</TABLE>
</body>
</html>

Using this doctype

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

it renders just as we would like,

but in any other there are spaces between rows, spent quite a long time yesterday trying to solve this issue,

however we have just cracked it, put as im most of the way through the post I may as well submit it,

to solve the isse your see above,

we had to set the height of each row,

so if your unlucky enough to pull your hair out over this! theres my problem and solution

Many thanks,

Craig
Craig