<div align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td> <td width="35"> </td></tr> <tr align="center"> <td colspan="5" height="50"></td> <th colspan="2" bgcolor="yellow">Yellow</th> <th colspan="2" bgcolor="red"><font color="white">Red</font></th> <th colspan="2" bgcolor="brown"><font color="white">Brown</th></tr> <tr align="center"> <td colspan="4" height="50"></td> <th colspan="2" bgcolor="green"><font color="white">Green</font></th> <th colspan="2" bgcolor="yellow">Yellow</th> <th colspan="2" bgcolor="red"><font color="white">Red</font></th> <th colspan="2" bgcolor="brown"><font color="white">Brown</th></tr> <tr align="center"> <td colspan="3" height="50"></td> <th colspan="2" bgcolor="purple"><font color="white">Purple</font></th> <th colspan="2" bgcolor="green"><font color="white">Green</font></th> <th colspan="2" bgcolor="yellow">Yellow</th> <th colspan="2" bgcolor="red"><font color="white">Red</font></th> <th colspan="2" bgcolor="brown"><font color="white">Brown</th></tr> <tr align="center"> <td colspan="2" height="50"></td> <th colspan="2" bgcolor="blue"><font color="white">Blue</th> <th colspan="2" bgcolor="purple"><font color="white">Purple</font></th> <th colspan="2" bgcolor="green"><font color="white">Green</font></th> <th colspan="2" bgcolor="yellow">Yellow</th> <th colspan="2" bgcolor="red"><font color="white">Red</font></th> <th colspan="2" bgcolor="brown"><font color="white">Brown</th></tr></table></div>

Count only the cells in the top row!
They have width but not height,
so they don't show up on the page.
Why this table works is due to the <tr align="center">
in the 2nd row on down.
Also, pay attention to the colspan numbers.

Back to Confusing Table