Flexible Tables Previous | Top | Next

 

Simple variations

 

Multiple flexible columns:

 

I'm flexible!
(50%)

 Me too!
(20%)		 Me three!
(30%)		 

<TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
  <TR>
    <TD width="50" bgcolor="#FF6666"><IMG src="img/spacer.gif" width="50" height="1" alt=""></TD>
    <TD width="120" bgcolor="#66FF66"><IMG src="img/spacer.gif" width="120" height="1" alt=""></TD>
    <TD width="50%" align=left valign=top bgcolor="#CCCCFF">I'm flexible!<BR>(50%)</TD>
    <TD width="20%" align=left valign=top bgcolor="#FF99CC">Me too!<BR>(20%)</TD>
    <TD width="30%" align=left valign=top bgcolor="#FFCCCC">Me three!<BR>(30%)</TD>
    <TD width="40" bgcolor="#666666"><IMG src="img/spacer.gif" width="40" height="1" alt=""></TD>
  </TR>
</TABLE>

 

Multiple row table:
(note that only one row needs cell widths or spacer images)

 

I'm left-aligned!
   

I'm right-aligned!

  
    I'm centered!   

<TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
  <TR>
    <TD width="50" bgcolor="#FF6666"><IMG src="img/spacer.gif" width="50" height="1"></TD>
    <TD width="120" bgcolor="#66FF66"><IMG src="img/spacer.gif" width="120" height="1"></TD>
    <TD width="100%" align=left valign=top bgcolor="#CCCCFF">I'm left-aligned!</TD>
    <TD width="40" bgcolor="#666666"><IMG src="img/spacer.gif" width="40" height="1"></TD>
  </TR>
  <TR>
    <TD bgcolor="#66FF66">&nbsp;</TD>
    <TD bgcolor="#FF6666">&nbsp;</TD>
    <TD align=right valign=top bgcolor="#FFCCCC">I'm right-aligned!</TD>
    <TD bgcolor="#999999">&nbsp;</TD>
  </TR>
  <TR>
    <TD bgcolor="#FF6666">&nbsp;</TD>
    <TD bgcolor="#66FF66">&nbsp;</TD>
    <TD align=center valign=top bgcolor="#CCCCFF">I'm centered!</TD>
    <TD bgcolor="#666666">&nbsp;</TD>
  </TR>
</TABLE>

 
  Previous | Top | Next