HTML Tables Tips & Tricks

For all you HTML purists out there...



Table 1

Aligns contents at the top of cell one Cell Number Two
Cell Number Three
Cell Number Four

Table 1 Source

Table 2

Cell Number One Cell Two Cell Three
Cell Four
Cell Five Cell Six

Table 2 Source

Table 3

Cell One Cell Two
Cell Three Cell Four Cell Five
Cell Six Cell Seven
Cell Eight Cell Nine Cell Ten

Table 3 Source

Table 4

Cell One
Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven

Table 4 Source

More Table Tips n' Tricks:

Setting the height and width of a table:

Cell one contents

<TABLE BORDER="1">
<TR>
<TD WIDTH="100" HEIGHT="80">Cell one contents</TD>
<TR>
<TABLE>

Making your tables colorful (also using cellpadding attributes):

Cell contents 1 Cell contents 2
Cell contents 3 Cell contents 4

<TABLE BGCOLOR=CCFFFF BORDER=0 CELLSPACING=0 CELLPADDING=8>
<TR>
<TD>Cell contents 1</TD>
<TD>Cell contents 2</TD>
</TR>
<TR>
<TD>Cell contents 3</TD>
<TD>Cell contents 4</TD>
</TR>
</TABLE>

Placing elements within table cells (using align and valign):

Cell contents One

<TABLE BORDER="2">
<TR>
<TD WIDTH="120" HEIGHT="70" ALIGN="RIGHT" VALIGN="TOP">Cell contents One</TD>
</TR>
</TABLE>