Instead of designing graphic intensive web sites that take ages to load, you can use HTML tables creatively to get a professional looking web page that loads super fast. This article discusses many useful table tips and tricks on designing a great web page. Live examples and cut ‘n’ paste code are also provided for you to try out some great designs. You can also check out more handy tips ‘n’ tricks on designing a fast loading web site.
Let’s try out some cool designs using only tables
The key here is to use a transparent image(1×1 pixel) called a shim. The table is made of 3 rows and 3 columns. The width and height of the middle row is 1 pixel. The table will not take a height less than 5 pixels without you putting an image in it. Hence the magic shim. And there you have a striking table that can be used in your homepage to display your important navigation sections.
Cut ‘n’ Paste Code
<table width="401" border="0" cellspacing="0" cellpadding="1">
<tr valign="top">
<td bgcolor="#980000" height="100" width="200">
<p align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFE1E1">
Services</font></b></p>
<p align="center"> <font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF">Professional
and cost effective web development</font></p>
</td>
<td height="100" width="1"><img src="images/shim.gif" width="1" height="1"></td>
<td bgcolor="#CC9900" height="60" width="200">
<p align="center"><b> <font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFF7D6">Products</font></b></p>
<p align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">Interactive
Web Products - Flash Survey, Poll and more<br></font></p>
</td>
</tr>
<tr valign="top">
<td height="1" width="200"><img src="images/shim.gif" width="1" height="1"></td>
<td height="1" width="1"><img src="images/shim.gif" width="1" height="1"></td>
<td height="1" width="200"><img src="images/shim.gif" width="1" height="1"></td>
</tr>
<tr valign="top">
<td bgcolor="#D09C00" width="200" height="60">
<p align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFF4D0">
Resources</font></b></p>
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF">Free
web development resources<br>
</font></p>
</td>
<td width="1" height="100"><img src="images/shim.gif" width="1" height="1"></td>
<td bgcolor="#980000" width="200" height="100">
<p align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFE0E0">Contact
Us</font></b></p>
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF">Contact
us for more details.<br>
<img src="images/shim.gif" width="1" height="1">
</font></p>
</td>
</tr>
</table>
Have you ever wondered how to get a nice thin border instead of the thick border that is automatically generated using the ‘border’ property. Or have you ever wanted only the table to have a border and not all the cells. Well the answer to this is to make a table with the width you want and 1 as your cell padding. You then have to insert the actual table inside this table with width 100%. Cell spacing should be 0 for both of the tables.
<table width="250" border="0" cellspacing="0" cellpadding="1" bgcolor="#000066" align="left">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="3" bgcolor="#FFE0E0">
<tr>
<td bgcolor="#000066" valign="top" width="50%">
<p align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">Web
Services</font></b></p>
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF">Professional
and cost effestive web design, development and promotion services</font></p>
</td>
<td bgcolor="#FFFFFF" width="50%" valign="top">
<p align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000068">Web
Products</font></b></p>
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Interactive
Web Products - Flash Survey, poll, Guest book, Instant Quote</font></p>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" valign="top" width="50%">
<p align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000068">Web
Resources</font></b></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Free
web resources - articles, tutorials, tips and tricks</font><br>
<img src="images/shim.gif" width="1" height="1">
</p>
</td>
<td bgcolor="#000068" width="50%" valign="top">
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF"><b>Contact
Us</b></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF">Contact
us for more details - contact Us form, questionaire, review</font></p>
</td>
</tr>
</table>
</td>
</tr>
</table>Here I have made a table with 2 rows and 5 columns with cell padding 2 . There are different background colors for all the alternate columns. In the first row I have written the text for the heading. In the second row I have made a table of width 100%, height 100% and cell padding 3. The whitespace between the tables is a column of width 3 pixels.
Note: You cannot make 3 different table coming one after the other in the same line. You can only make tables come one below the other. If you want many tables in the same line you have to make tables within tables.
<table width="368" border="0" cellspacing="0" cellpadding="2" align="center" height="100">
<tr valign="middle">
<td bgcolor="#000066" width="120" height="20">
<div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Web
Services</font></b></font> </div>
</td>
<td width="4" height="20"></td>
<td bgcolor="#990000" width="120" height="20">
<div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Web
Products</font></b></font></div>
</td>
<td width="4" height="20"></td>
<td bgcolor="#C89800" width="120" height="20">
<div align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Web
Resources</font></b></font> </div>
</td>
</tr>
<tr valign="top">
<td bgcolor="#000066" width="120">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Professional
and cost effective web design, development and promotion services
</font></p>
</td>
</tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#990000" width="120">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Interactive
Web Products - Flash Survey, poll, Guest book, Instant Quote
</font></p>
</td>
</tr>
</table>
</td>
<td width="4"></td>
<td bgcolor="#C89800" width="120">
<table width="100%" border="0" cellspacing="0" cellpadding="3" height="80">
<tr bgcolor="#FFFFFF" valign="top">
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Free
web resources - articles, tutorials, tips and tricks.
</font></p>
</td>
</tr>
</table>
</td>
</tr>
</table>Here’s the simplest way to make a table with a border. Use the border property to give a border for all the cells. Neat and clean, this is the easiest way to create a table with a border. Note: The border has a grayish tinge when viewed in Netscape.
<table width="300" border="1" cellspacing="0" cellpadding="3" bordercolor="#980000">
<tr>
<td bgcolor="#FFF4F4" width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#980000">Web
Services</font></font></b></font></p>
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Professional
and cost effestive web design, development and promotion services</font></font></p>
</td>
<td width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#980000">Web
Products</font></b></font></p>
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Interactive
Web Products - Flash Survey, poll, Guest book, Instant Quote</font></p>
</td>
</tr>
<tr>
<td width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#980000">Web
Resources</font></b></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Free
web resources - articles, tutorials, tips and tricks</font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p>
</td>
<td bgcolor="#FFF7F7" width="50%">
<p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#980000"><b>Contact
Us</b></font></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Contact
us for more details - contact Us form, questionaire, review</font></p>
</td>
</tr>
</table>
You can also try merging and breaking apart cells to get some really cool designs. Be careful when trying out this method, as you can lose control over the table. Merging and breaking apart cells make use of the ‘rowspan’ and ‘columnspan’ properties of HTML.
<table cellspacing=0 cellpadding=5 width=400 border=0 align="center">
<tbody>
<tr valign=top>
<td colspan=5></td>
<td bgcolor=#ffcccc width="54"> </td>
<td colspan=2></td>
</tr>
<tr valign=top>
<td width="6"></td>
<td bgcolor=#88bbbb width="56"> </td>
<td colspan=2></td>
<td bgcolor=#cc3333 colspan=2 rowspan=2>
<p><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF"><b><font color="#FFCFCE">Web
Services<br>
</font></b>Professional and cost effective web design, development
and promotion services </font></p>
</td>
<td bgcolor=#ddaaaa width="3"> </td>
<td></td>
</tr>
<tr valign=top>
<td bgcolor=#99cccc width="6"> </td>
<td bgcolor=#006666 colspan=2 rowspan=2>
<p><font face="Arial, Helvetica, sans-serif" size="2" color="#8CBABD"><b>Web
Products<br>
</b></font><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">Interactive
Web Products - Flash Survey, poll, Guest book, Instant Quote </font></p>
</td>
<td width="20"><img src="/images/23pixels.gif" width="50" height="5"></td>
<td colspan=2 rowspan=2> </td>
</tr>
<tr valign=top>
<td width="6"></td>
<td bgcolor=#254D78 colspan=3 rowspan=3>
<p align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="+3"><b><font size="+2">Entheos</font></b></font></p>
<p align="center"><font face="Arial, Helvetica, sans-serif" size="3"><b><font color="#A5C5E2">Your
key to a powerful Net presence</font></b></font></p>
</td>
</tr>
<tr valign=top>
<td colspan=2></td>
<td bgcolor=#77aaaa width="54"> </td>
<td bgcolor=#B9D3EC colspan=2 rowspan=2> </td>
</tr>
<tr valign=top>
<td width="6"> </td>
<td bgcolor=#FFCF63 colspan=2 rowspan=4>
<p><font face="Arial, Helvetica, sans-serif" size="2" color="#FFF4DF"><b><font color="#FFF5DF">Web
Resources</font><br>
</b></font><font face="Arial, Helvetica, sans-serif" size="2">Free
web resources - articles, tutorials, tips and tricks </font></p>
</td>
</tr>
<tr valign=top>
<td bgcolor=#FFE3AD width="6" rowspan="3"> </td>
<td rowspan=3 width="20">
<p> </p>
</td>
<td width="10" bgcolor=#BDD3EF></td>
<td colspan=3 bgcolor=#357CC4 rowspan=3><font face="Arial, Helvetica, sans-serif" size="2" color="#BDD3EF"><b>Contact
Us</b> </font><font face="Arial, Helvetica, sans-serif" size="2"><br>
<font color="#FFFFFF">Contact us for more details through our contact
us form, questionnaire, review </font></font></td>
</tr>
<tr valign=top>
<td width="1" bgcolor="#BDD3EF"> </td>
</tr>
<tr valign=top>
<td width="1"> </td>
</tr>
</tbody>
</table>
This is a nice design because it has a lot of white space. Remember that white space really makes a site looks clean and readable. Again I have made tables within a table to get the best effect. Try to do this one yourself using the techniques I have describe above. Don’t use any images. Only use HTML code. Remember to use a shim. Have fun.
<table width="362" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>
<p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000066">Web
Services</font></font></b></font></p>
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Professional
and cost effestive web design, development and promotion services</font></font></p>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#FFCF63"><img src="images/shim.gif" width="1" height="1"></td>
<td width="120" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>
<p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000066">Web
Products</font></b></font></p>
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Interactive
Web Products - Flash Survey, poll, Guest book, Instant Quote</font></p>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#FFCF63"><img src="images/shim.gif" width="1" height="1"></td>
<td width="120" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>
<p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000066">Web
Services</font></font></b></font></p>
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Professional
and cost effestive web design, development and promotion services</font></font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
<td height="10"><img src="images/shim.gif" width="1" height="1"></td>
<td height="10"></td>
<td height="10"><img src="images/shim.gif" width="1" height="1"></td>
<td height="10"></td>
</tr>
<tr>
<td height="1" bgcolor="FFCF63"><img src="images/shim.gif" width="1" height="1"></td>
<td height="1" bgcolor="FFCF63"><img src="images/shim.gif" width="1" height="1"></td>
<td height="1" bgcolor="#FFCF63"><img src="images/shim.gif" width="1" height="1"></td>
<td height="1" bgcolor="#FFCF63"><img src="images/shim.gif" width="1" height="1"></td>
<td height="1" bgcolor="#FFCF63"><img src="images/shim.gif" width="1" height="1"></td>
</tr>
</table>No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.
