WEBSITE TEMPLATES FLASH WEBSITES CMS TEMPLATES

Flash Tutorials
& Resources Dreamweaver
Tutorials Fireworks Tutorials
& Resources Photoshop
Tutorials Web Design
Tutorials & Resources CSS
Tutorials CorelDraw
Tutorials

You are here : : Home > Free Resources > Web Design Tutorials & Resources > HTML Table Tips

CSS Tutorials

Web Design Tutorials

Free Web Design Resources

Other Web Design Resources

HTML Table Tips

Learn how to use HTML tables creatively to design attractive and fast loading web pages.

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.

Tips on using Tables

Always give the width for each of the cells in a table. Make sure that the total of the cells in a row adds up to the table width. This will avoid many complications.
Try not to merge or break apart cells within a table. This again causes all kinds of problems.
When using widths or heights that are less than 10 pixels insert a shim or a transparent gif (1x 1 pixel). If you use Fireworks you will find a shim in your Fireworks file, or you can just export a 1x 1 transparent image and call it a shim. This trick is mainly for a table to work in a Netscape browser.
Netscape cannot understand height in percentages, so if you ever need to give a height for your tables, make sure it is in terms of pixels.

Let's try out some cool designs using only tables

Tables with white borders

The key here is to use a transparent image(1x1 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.

Services

Professional and cost effective web development

Products

Interactive Web Products - Flash Survey, Poll and more

Resources

Free web development resources

Contact Us

Cut 'n' Paste Code

<table width="401" border="0" cellspacing="0" cellpadding="1">
 <tr valign="top"> 
 <td bgcolor="#980000" height="100" width="200"> 
 
 Services
 Professional 
 and cost effective web development
 </td>
 <td height="100" width="1"><img src="images/shim.gif" width="1" height="1"></td>
 <td bgcolor="#CC9900" height="60" width="200"> 
 Products
 Interactive 
 Web Products - Flash Survey, Poll and more 
 </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"> 
 
 Resources
 Free 
 web development resources 
 
 </td>
 <td width="1" height="100"><img src="images/shim.gif" width="1" height="1"></td>
 <td bgcolor="#980000" width="200" height="100"> 
 Contact 
 Us
 Contact 
 us for more details. 
 <img src="images/shim.gif" width="1" height="1"> 
 
 </td>
 </tr>
 </table>

Web Services

Professional and cost effestive web design, development and promotion services

Web Products

Interactive Web Products - Flash Survey, Poll, Guest book, Instant Quote

Web Resources

Free web resources - articles, tutorials, tips and tricks

Contact Us

Table with a thin border

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.

Cut 'n' Paste Code

<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%"> 
 Web 
 Services
 Professional 
 and cost effestive web design, development and promotion services
 </td>
 <td bgcolor="#FFFFFF" width="50%" valign="top"> 
 Web 
 Products
 Interactive 
 Web Products - Flash Survey, poll, Guest book, Instant Quote
 </td>
 </tr>
 <tr> 
 <td bgcolor="#FFFFFF" valign="top" width="50%"> 
 Web 
 Resources
 Free 
 web resources - articles, tutorials, tips and tricks 
 <img src="images/shim.gif" width="1" height="1"> 
 
 </td>
 <td bgcolor="#000068" width="50%" valign="top"> 
 Contact 
 Us
 Contact 
 us for more details - contact Us form, questionaire, review
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>

Tables within a table - multiple tables in the same line

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.

Web Services

Web Products

Web Resources

Professional and cost effective web design, development and promotion services

Interactive Web Products - Flash Survey, Poll, Guest book, Instant Quote

Free web resources - articles, tutorials, tips and tricks.

Cut 'n' Paste Code

<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">Web 
 Services </div>
 </td>
 <td width="4" height="20"></td>
 <td bgcolor="#990000" width="120" height="20"> 
 <div align="center">Web 
 Products</div>
 </td>
 <td width="4" height="20"></td>
 <td bgcolor="#C89800" width="120" height="20"> 
 <div align="center">Web 
 Resources </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> 
 Professional 
 and cost effective web design, development and promotion services 
 
 </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> 
 Interactive 
 Web Products - Flash Survey, poll, Guest book, Instant Quote
 
 
 </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> 
 Free 
 web resources - articles, tutorials, tips and tricks. 
 
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>

Table using the border property

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.

Web Services

Professional and cost effective web design, development and promotion services

Web Products

Interactive Web Products - Flash Survey, Poll, Guest book and more.

Cut 'n' Paste Code

<table width="300" border="1" cellspacing="0" cellpadding="3" bordercolor="#980000">
 <tr> 
 <td bgcolor="#FFF4F4" width="50%"> 
 Web 
 Services
 Professional 
 and cost effestive web design, development and promotion services
 </td>
 <td width="50%"> 
 Web 
 Products
 Interactive 
 Web Products - Flash Survey, poll, Guest book, Instant Quote
 </td>
 </tr>
 <tr> 
 <td width="50%"> 
 Web 
 Resources
 Free 
 web resources - articles, tutorials, tips and tricks
 </td>
 <td bgcolor="#FFF7F7" width="50%"> 
 Contact 
 Us
 Contact 
 us for more details - contact Us form, questionaire, review
 </td>
 </tr>
 </table>

Merging Cells in a table - Try out a jazzy table like this in your homepage.

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.


		Web Services Professional and cost effective web design, development and promotion services
Web Products Interactive Web Products - Flash animation, Flash programming, Instant Quote
	Entheos Your key to a powerful Net presence

Web Resources Free web resources - articles, tutorials, tips and tricks
			Contact Us Contact us for more details through our contact us form, questionnaire or email.

Cut 'n' Paste Code

<table cellspacing=0 cellpadding=5 width=400 border=0 align="center">
 <tbody> 
 <tr valign=top> 
 <td colspan=5></td>
 <td bgcolor=#ffcccc width="54">&nbsp;</td>
 <td colspan=2></td>
 </tr>
 <tr valign=top> 
 <td width="6"></td>
 <td bgcolor=#88bbbb width="56">&nbsp;</td>
 <td colspan=2></td>
 <td bgcolor=#cc3333 colspan=2 rowspan=2> 
 Web 
 Services 
 Professional and cost effective web design, development 
 and promotion services 
 </td>
 <td bgcolor=#ddaaaa width="3">&nbsp;</td>
 <td></td>
 </tr>
 <tr valign=top> 
 <td bgcolor=#99cccc width="6">&nbsp;</td>
 <td bgcolor=#006666 colspan=2 rowspan=2> 
 Web 
 Products 
 Interactive 
 Web Products - Flash Survey, poll, Guest book, Instant Quote 
 </td>
 <td width="20"><img src="/images/23pixels.gif" width="50" height="5"></td>
 <td colspan=2 rowspan=2>&nbsp;</td>
 </tr>
 <tr valign=top> 
 <td width="6"></td>
 <td bgcolor=#254D78 colspan=3 rowspan=3> 
 Entheos
 Your 
 key to a powerful Net presence
 </td>
 </tr>
 <tr valign=top> 
 <td colspan=2></td>
 <td bgcolor=#77aaaa width="54">&nbsp;</td>
 <td bgcolor=#B9D3EC colspan=2 rowspan=2>&nbsp;</td>
 </tr>
 <tr valign=top> 
 <td width="6">&nbsp;</td>
 <td bgcolor=#FFCF63 colspan=2 rowspan=4> 
 Web 
 Resources 
 Free 
 web resources - articles, tutorials, tips and tricks 
 </td>
 </tr>
 <tr valign=top> 
 <td bgcolor=#FFE3AD width="6" rowspan="3">&nbsp;</td>
 <td rowspan=3 width="20"> 
 &nbsp;
 </td>
 <td width="10" bgcolor=#BDD3EF></td>
 <td colspan=3 bgcolor=#357CC4 rowspan=3>Contact 
 Us 
 Contact us for more details through our contact 
 us form, questionnaire, review </td>
 </tr>
 <tr valign=top> 
 <td width="1" bgcolor="#BDD3EF">&nbsp;</td>
 </tr>
 <tr valign=top> 
 <td width="1">&nbsp;</td>
 </tr>
 </tbody> 
 </table>

Using tables to design lines

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.

Web Services

Professional and cost effective web design, development and promotion services

Web Products

Interactive Web Products - Flash animation, Flash programming, Instant Quote

Web Services

Professional and cost effective web design, development and promotion services

Cut 'n' Paste Code

<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> 
 Web 
 Services
 Professional 
 and cost effestive web design, development and promotion services
 </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> 
 Web 
 Products
 Interactive 
 Web Products - Flash Survey, poll, Guest book, Instant Quote
 </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> 
 Web 
 Services
 Professional 
 and cost effestive web design, development and promotion services
 </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>

Learn how to build a complete website with HTML5, jQuery, CSS3 and video and photo galleries with this premium video tutorial!

Please Like, Tweet or Share this page if you found this resource useful!

Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!


Featured Template Template Number: 30744 Type: CSS Full Site Flash 8 Price: $63