Tips to Use HTML Tables – For Freshers

Instead of designing graphic extensive web sites that take ages to lots, you can utilize HTML tables artistically to get a professional looking web page that loads extremely fast. This post talks about numerous helpful table tips as well as techniques on designing an excellent websites. Live instances and reduce ‘n’ paste code are additionally offered you to experiment with some great designs. You could also look into even more convenient pointers ‘n’ tricks on designing a quick loading web site by Bapu Graphics.

Tips on using Tables

Always give the size for each and every of the cells in a table. See to it that the overall of the cells in a row adds up to the table width. This will certainly prevent many complications.
Try not to merge or disintegrate cells within a table. This again triggers all sort of issues.
When utilizing widths or heights that are less than 10 pixels place a shim or a transparent gif (1x 1 pixel). If you utilize Fireworks you will discover a shim in your Fireworks documents, or you can just export a 1x 1 transparent picture as well as call it a shim. This method is generally for a table to operate in a Netscape browser.
Netscape could not understand elevation in portions, so if you ever should provide a height for your tables, make certain it remains in regards to pixels.

Let’s try some awesome layouts making use of just tables

Tables with white borders

<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>

The trick here is to use a transparent photo( 1×1 pixel) called a shim. The table is made from 3 rows and also 3 columns. The width and height of the middle row is 1 pixel. The table will certainly not take an elevation less than 5 pixels without you putting a picture in it. Therefore the magic shim. And also there you have a striking table that can be made use of in your homepage to display your crucial navigation sections.

Table with a thin border

<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>

Have you ever asked yourself how you can get a nice thin boundary instead of the thick boundary that is immediately produced making use of the ‘border’ property. Or have you ever before wanted just the table to have a border as well as not all the cells. Well the answer to this is to earn a table with the width you want and 1 as your cell extra padding. You then have to put the actual table inside this table with width 100%. Cell spacing need to be 0 for both of the tables.

Tables within a table – multiple tables in the exact same line

<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>

Right here I have actually made a table with 2 rows as well as 5 columns with cell extra padding 2. There are different background shades for all the alternating columns. In the very first row I have composed the text for the heading. In the 2nd row I have made a table of size 100%, height 100% and cell cushioning 3. The whitespace in between the tables is a column of size 3 pixels.

Keep in mind: You could not make 3 various table coming together in the same line. You can only make tables come one below the other. If you want lots of tables in the very same line you need to make tables within tables.

Table using the border property

<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>

Below’s the most basic method making a table with a border. Make use of the border property to offer a boundary for all the cells. Neat as well as clean, this is the simplest way to develop a table with a boundary. Note: The border has a grayish shade when viewed in Netscape.

Combining Cells in a table – Try a snazzy table similar to this in your homepage.

<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>
Web
Services 
Professional and cost effective web design, development
and promotion services 
</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>
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> </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″> </td>
<td bgcolor=#B9D3EC colspan=2 rowspan=2> </td>
</tr>
<tr valign=top>
<td width=”6″> </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″> </td>
<td rowspan=3 width=”20″>
 
</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”> </td>
</tr>
<tr valign=top>
<td width=”1″> </td>
</tr>
</tbody>
</table>

You can likewise attempt combining and also breaking apart cells to obtain some actually trendy designs. Be careful when checking out this technique, as you can blow up over the table. Merging as well as disintegrating cells make use of the ‘rowspan’ and ‘columnspan’ residential properties of HTML.

Making use of tables to Design lines

<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>

This is a nice layout due to the fact that it has a great deal of white space. Keep in mind that white area really makes a site looks clean and also readable. Again I have actually made tables within a table to get the most effective effect. Try to do this one on your own making use of the strategies I have describe over. Don’t make use of any kind of photos. Just usage HTML code. Remember to utilize a shim. Have fun.

BG TIPS