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

Top Site Links

Most Visited Links

<table width="250" border="0" cellspacing="0" cellpadding="0"> <tr><td bgcolor="#333366"></td><td height="6" bgcolor="#333366"><img src="/images/spacer.gif" width="10" height="6"></td><td></td></tr><tr><td width="6" align="center" valign="top" bgcolor="#333366"> </td> <td width="240" valign="top" bgcolor="#333366"><p align="center" style="color:#9999CC;font-weight: bold;"> Top Site Links</p><ul style="color:#9999CC; list-style:square;"><li><a href="/" class="white">SmartWebby.com Home</a></li><li><A href="/DreamweaverTemplates/" class="white">Dreamweaver Templates</A></li><li><A href="/web_applications.asp" class="white">Web Applications</A></li><li><A href="/resources.asp" class="white">Free Tutorials</A></li> <li> <A href="/DreamweaverTemplates/TemplateCustomizationService.asp" class="white">Template Customization</A></li> </ul><p align="center" style="color:#9999CC;font-weight: bold;">Most Visited Links </p><ul style="color:#9999CC; list-style:square;"><li><A href="/DreamweaverTemplates/BusinessTemplates.asp" class="white"> Business Templates</A></li><li><A href="/DreamweaverTemplates/FreeDreamweaverTemplates.asp" class="white">Free Dreamweaver Templates</A></li><li><A href="/design_packages.asp" class="white">Web Design Packages</A></li><li><A href="/web_site_design/default.asp" class="white">Web Design Guide</A></li></ul></td><td width="6" height="332" valign="bottom" bgcolor="#9999CC"> </td></tr><tr align="right" valign="top"><td></td><td height="6" colspan="2" bgcolor="#9999CC"><img src="/images/spacer.gif" width="10" height="6"></td></tr></table>

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="/" class="green">SmartWebby.com Home</a> </li><li><A href="/DreamweaverTemplates/" 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>

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks for your encouragement!

Recommend SmartWebby.com

HTML Table Tips 'n' Tricks

Tips 'n' Tricks on using HTML Tables