HTML Table Tips 'n' Tricks

With the use of HTML tables in different ways you can create really attractive designs with very low load time.

Tip 1: While creating complicated table designs, try nesting various tables within each other instead of using cell merging.

Tip 2: Using CSS Styles you can manipulate various properties of HTML table elements to create a variety of interesting designs.

Some Cool Examples

Example 1: Box with Shadow

Example 2: Boxed in Design

Top Site Links

Most Visited Links

<table width="250" border="0" cellspacing="0" cellpadding="0"><tr><td width="238"><table width="238" height="336" border="0" cellpadding="0" cellspacing="0" style="border:2px solid #336600;"><tr><td width="240" align="right" valign="bottom"><table width="224" border="0" cellspacing="0" cellpadding="0" bgcolor="#99CC99" height="322" style="border-top:2px solid #336600;border-left:2px solid #336600;"><tr><td align="left" valign="top"><p align="center" style="color:#000000;font-weight:bold;">Top Site Links</p><ul style="color:#000000;list-style:disc;"><li><a href="/default.asp" class="green">SmartWebby.com Home</a> </li><li><A href="/DreamweaverTemplates/default.asp" class="green">Dreamweaver Templates</A></li><li><A href="/web_applications.asp" class="green">Web Applications</A></li><li><A href="/resources.asp" class="green">Free Tutorials</A></li><li> <A href="/DreamweaverTemplates/TemplateCustomizationService.asp" class="green">Template Customization</A></li></ul><p align="center" style="color:#000000;font-weight:bold;">Most Visited Links </p><ul style="color:#000000;list-style:disc;"><li><A href="/DreamweaverTemplates/BusinessTemplates.asp" class="green"> Business Templates</A></li><li><A href="/DreamweaverTemplates/FreeDreamweaverTemplates.asp" class="green">Free Dreamweaver Templates</A></li><li><A href="/design_packages.asp" class="green">Web Design Packages</A></li><li><A href="/web_site_design/default.asp" class="green">Web Design Guide</A></li></ul></td></tr></table></td></tr></table></td><td width="12" valign="bottom"><table width="10" border="0" cellspacing="0" cellpadding="0" style="border-top:2px solid #336600;border-right:2px solid #336600;"><tr><td height="322"><img src="/images/spacer.gif" width="10" height="10"></td></tr></table></td></tr><tr align="right"><td colspan="2"><table width="238" border="0" cellspacing="0" cellpadding="0" style="border-bottom:2px solid #336600;border-right:2px solid #336600;border-left:2px solid #336600;"><tr><td height="10"><img src="/images/spacer.gif" width="10" height="10"></td></tr></table></td></tr></table>

Example 3: Merging Cells for Complex Table Designs


		SmartWebby.com
SmartWebby.com


	SmartWebby.com

SmartWebby.com

<table width="500" height="600" border="0" cellpadding="2" cellspacing="0"> <tr> <td width="20" height="20"> </td> <td height="20"> </td> <td height="20"> </td> <td height="20"> </td> <td height="20"> </td> <td height="20"> </td> <td height="20" bgcolor="#FFCC99"> </td> <td height="20" bgcolor="#FFCC99"> </td> <td height="20" bgcolor="#FFCC99"> </td> <td width="20" height="20" bgcolor="#FFCC99"> </td> </tr> <tr> <td height="20" bgcolor="#CCCCFF"> </td> <td bgcolor="#CCCCFF"> </td> <td bgcolor="#CCCCFF"> </td> <td> </td> <td> </td> <td bgcolor="#CC6633"> </td> <td colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#CC6633" class="white">SmartWebby.com </td> <td width="20" bgcolor="#FFCC99"> </td> </tr> <tr> <td height="80" bgcolor="#CCCCFF"> </td> <td colspan="5" rowspan="3" align="center" valign="middle" bgcolor="#333366" class="white">SmartWebby.com </td> <td width="20" bgcolor="#FFCC99"> </td> </tr> <tr> <td height="80" bgcolor="#CCCCFF"> </td> <td width="20"> </td> </tr> <tr> <td height="50"> </td> <td> </td> <td> </td> <td> </td> <td width="20"> </td> </tr> <tr> <td height="50"> </td> <td bgcolor="#333366"> </td> <td bgcolor="#333366"> </td> <td bgcolor="#669966"> </td> <td bgcolor="#669966"> </td> <td colspan="4" rowspan="5" align="center" valign="middle" bgcolor="#669966"><span class="white">SmartWebby.com </span></td> <td width="20"> </td> </tr> <tr> <td height="20"> </td> <td> </td> <td> </td> <td bgcolor="#669966"> </td> <td bgcolor="#669966"> </td> <td width="20" bgcolor="#336633"> </td> </tr> <tr> <td height="40"> </td> <td colspan="4" rowspan="4" align="center" valign="middle" bgcolor="#990000"><span class="white">SmartWebby.com </span></td> <td width="20" rowspan="2" bgcolor="#336633"> </td> </tr> <tr bgcolor="#FF9999"> <td height="40"> </td> </tr> <tr> <td height="80" bgcolor="#FF9999"> </td> <td width="20" bgcolor="#336633"> </td> </tr> <tr> <td height="20" bgcolor="#FF9999"> </td> <td> </td> <td> </td> <td bgcolor="#336633"> </td> <td bgcolor="#336633"> </td> <td width="20" bgcolor="#336633"> </td> </tr> <tr> <td height="20" bgcolor="#FF9999"> </td> <td bgcolor="#FF9999"> </td> <td bgcolor="#FF9999"> </td> <td bgcolor="#FF9999"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>

Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!

FREE Flash Actionscript & Animation Guide
Learn Flash the easy way using these easy-to-follow tutorials! Get your basics right or learn advanced flash actionscript!

Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization

This page is part of the SmartWebby's Free Web Design Guide, a collection of free web design tutorials, articles, tips and guidelines on effective web site design. From web design tips and ideas to HTML, CSS Styles, Fireworks and Dreamweaver you'll find all you need to know about web design right here!

SmartWebby.com provides top-quality web design & web programming services globally. Since January 2001, we have successfully built more than 200 professional web sites for clients from all over the world (USA, UK, Canada, Australia, India, Greece, Denmark, Singapore, etc.). By creating highly professional W3C Standard compliant and load-time optimized websites at extremely affordable prices, we leave our competition far behind in terms of "value for money". We specialize in Rapid Web Design using Adobe Tools, ASP.net/ASP/PHP web programming, W3C Standard compliant CSS & HTML programming, high quality Flash Animation and Interactive Flash Programming. No matter what your requirements are, our team is capable of delivering a website that's over & above your expectations. Check out our popular Web Design Packages today!