HTML Table Tips 'n' Tricks

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 SmartWebby.com Home Dreamweaver Templates Web Applications Free Tutorials Template Customization Most Visited Links Business Templates Free Dreamweaver Templates Web Design Packages Web Design Guide   <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 SmartWebby.com Home Dreamweaver Templates Web Applications Free Tutorials Template Customization Most Visited Links Business Templates Free Dreamweaver Templates Web Design Packages Web Design Guide <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!