Flexible Tables Previous | Top | Next

 

Colspan and rowspan

 

Colspan:

  • If a cell spans a flexible column, it will be flexible.
  • Make sure to include an alignment row, or that one of the rows of your table is without colspans and contains full-cell-width images in the fixed-width cells.

 

Rowspan:

  • Avoid if possible; use nested tables.
  • No other data at this time.

 

Example with colspan:
Without the alignment row, this table does not work as intended on some browsers.

 

Because of the graphic in the first row, the total table width can never go below 600. However, when you open the browser window wider, the header image stays at the left end of its cell, and this cell expands.


<TABLE width="100%" border="0" cellspacing="0" cellpadding="0"> <TR> <TD colspan=4 bgcolor="#FFCC00"><IMG src="img/great1.gif" width="600" height="50" alt="Flexible Tables are Great!"></TD> </TR> <TR> <TD bgcolor="#FF6666"><IMG src="img/spacer.gif" width="50" height="1" alt=""></TD> <TD bgcolor="#66FF66"><IMG src="img/spacer.gif" width="120" height="1" alt=""></TD> <TD align=left valign=top bgcolor="#CCCCFF"> <P>Because of the graphic in the first row, the total table width can never go below 600. However, when you open the browser window wider, the header image stays at the left end of its cell, and this cell expands.</P> </TD> <TD width="40" bgcolor="#666666"><IMG src="img/spacer.gif" width="40" height="1" alt=""></TD> </TR> <TR><!-- alignment row --> <TD width="50"><IMG src="img/spacer.gif" width="50" height="1" alt=""></TD> <TD width="120"><IMG src="img/spacer.gif" width="120" height="1" alt=""></TD> <TD width="100%"><IMG src="img/spacer.gif" width="390" height="1" alt=""></TD> <TD width="40"><IMG src="img/spacer.gif" width="40" height="1" alt=""></TD> </TR> </TABLE>

 

  Previous | Top | Next