Table Generator - Tested in IE 7.0, Netscape 8.1.3, Opera 9.20, Firefox 2.0.0.3 and AOL Explorer 1.5

Build tables instantly with several options and paste them into your website for free. You can even buy this generator with NO links back to SearchBliss for only $16 and increase your website stickiness by offering this free tool.

We have tested the generator in IE 7.0, Firefox 2.0.0.3, Opera 9.10, Netscape 8.1.2 and AOL Explorer 1.5. This generator worked well in IE7.0, Opera 9.10 and AOL Explorer 1.5. In the other platforms it did not work. The generated code worked in all platforms, just the generator itself did not work in Netscape 8.1.2 and Firefox 2.0.0.3.

Depending on your knowledge of HTML and javascripts, besides being a very large (58.6 KB - 60,024 bytes)) this is a four (4) part copy and paste code that goes in both the <HEAD> (two parts) and <BODY> sections besides an upload of a graphic into your directory.

The first section we will cover is the <BODY> section of code.

This section is for all intensive purposes is done all in tables (with a defined color of #ffffff which is white) in four (4) places
(1) place in code -- <TABLE height=226 cellSpacing=6 cellPadding=0 width=600 bgColor=#ffffff border=0>
(3) places in code <TR vAlign=center align=middle bgColor=#ffffff>
Just scroll through this section of code to locate the above line of code to reconfigure.
These reconfigurations are in the first part of the code.

[ Return Whence You Came ]

The next thing to cover is the uploading of a graphic. Nowhere on the script site will you find the illusive graphic to upload. You can see it but you can't upload it if that makes any sense. Right click on the graphic and save as colortable.gif.

Upload the below graphic
Save As colortable.gif

For your Information: If you are going to upload the above graphic into any directory other than your "Root" or "Top" directory, then you will need to change the path of the image within the code in three (3) places within the <BODY> section. We will also cover the positioning* of the graphic in all three places. See below where and howto.

* The graphic has absolute positioning attributes so it is important that depending on where you place the effect within your document, you will need to set the positioning in all three places where the graphic comes into play. If you need a little refresher on absolute positioning, grab the below link and you are there.
[ Absolute Positioning ]

Default - Image Positioning & Root Directory

Note: Within the <BODY> section there are three(3) sections of code just like the above. All of them may possibly need reconfiguring. If your image is not located in your root directory then you will need to change the path to reflect this in all three(3) sections of code.

Reconfigured - Image Positioning & Not Root Directory

Note: As you can notice we did not need to change the absolute positioning in this section of code. We did however need to reconfigure where to call the image from since we have it stored in a directory we named images1.

For your Information: Once you have the code in place and the image uploaded, you may find depending on where you have the effect located that you may need to reconfigure the absolute positioning. Play around with it until it works for you. Do not have the image located above the color boxes because if you do, as you attempt to place your cursor on the image to select the color, the box will vanish and you may wonder why. Just have the image touching the box to avoid this little annoyance. If this is a little confusing, grab the below link and it should be completely clarified.
[ Wrong Absolute Image Positioning ]

The next thing we shall cover is the effect and page color of the default code. The default code will appear on a white page with the tables defined as ffffff which is white. [ See above ] where this is configured within the <BODY> section of code. If for example you want as we have everything a color other than ffffff (white) on both pages (the generator and code page itself), besides from reconfiguring the tables, you must also add a line of code not already inserted into the effect within the first code in the <HEAD> section. See below where and howto.

Default Section of Code

table += " </tr>\n";
}
table += "</table>\n";
document.all.theCode.value=(table);
document.write('<b><font size=2 color=#555555 face=Arial, Helvetica, sans-serif>Cut and paste the code inbetween your BODY tags.</font></b><textarea name=theCode cols=50 rows=6>'+table+'</textarea><br>

Reconfigured Section of Code

table += " </tr>\n";
}
table += "</table>\n";
document.all.theCode.value=(table);
document.write('<body bgcolor=#??????()>');
document.write('<b><font size=2 color=#fff0f5 face=Arial, Helvetica, sans-serif>Cut and paste the code inbetween your BODY tags.</font></b><br><textarea name=theCode cols=50 rows=6>'+table+'</textarea><br>

If you notice in the above all we actually did was to add another document.write attribute and change the font color to reflect the different color page. What we did was in essence to change the color of the "Code Generated" page with this attribute. In other words, add the below into the code (and change the question marks ?????? to actual HEX codes) as we did to change the page color on the Generate Code Page.

document.write('<body bgcolor=#??????()>');

Little Extra Not Included In The Script: The next thing we shall cover is to make the <HEAD> section (both of them) and one in the <BODY> section of the script into external.js files and call them from an external location. Reason you may want to do this is quite simple. This code, all three sections (two in the <HEAD> section and the <BODY> section) are extremely bloated, 58.6 KB/60,024 bytes to be exact and take up alot of space on a webpage. If you need a little refresher on howto, see below.

Both <HEAD> sections of code start and end with opening and closing JavaScript tags, See below:

Opens With:
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here
Closes With:
// End -->
</script>

Remove the opening and closing JavaScript tags.

Copy/cut and paste everything in-between into a notepad and save it as tableGenerator1.js and tableGenerator2.js *

The newly created (Saved As) files will look something like this

Upload the newly created tableGenerator1.js and tableGenerator2.js into your directory.

Paste the below snipplets of code into the <HEAD> section of your document to call tableGenerator1.js and tableGenerator2.js

<script type="text/javascript" src="tableGenerator1.js"> </script>

<script type="text/javascript" src="tableGenerator2.js"> </script>

If you have uploaded the tableGenerator1.js and tableGenerator2.js into a different directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

Point Of Information The above process is done to both sections of code separately. "Do Not" take both sections of code and combine them into one external.js file. It "Will Not Work".

* We named our external.js file tableGenerator1.js and tableGenerator2.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

The process to make the <BODY> section of code into an external.js file is slightly different but just as easy. After you make any reconfigurations needed into this section*, we have a [ Generator/Converter ] that takes the work out of converting all the code into an external file. All you need to do is copy and paste the reconfigured <BODY> section of code into our [ Generator/Converter ] and follow the steps. Once you have generated this section into an external.js file and uploaded it into your directory, paste that little snipplet of code (with whatever name you decided*) anywhere within the <BODY> section you want this effect to appear.
[ Generator/Converter ]

* Once you put the <BODY> section of code into the converter, you can not make any more reconfigurations. That is why it is imperative you make your reconfigurations prior to adding the code into the converter. We also highly recommend you keep a copy of the original <BODY> section of code so if at any time you do need to make any reconfigurations, you can then redo the external.js file.
* We named our external.js file tableGenerator3.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this

If you would like to see an example of this effect with the use of an external.js file in the <HEAD> and <BODY> section, grab the below link and you are there.
[ Table Generator With External.JS Files ]

Note Of Professionalism: If you have noticed on the page(s) we have the example in a popup window it has a little "Close Window" button. It elevates your site's level of professionalism by adding the little "Close Window" button or link on the linked-to page (that opens in a new window). It may not seem like much but little things such as this stick in people's minds as a little convenience not required but done anyway. Below are the codes for the form button, text, and a linkto another page for the effect of closing the page by clicking on a graphic. These effects are placed anywhere in the <BODY> section of your document you want it to appear. "Do Not Overdo" the use of these little buttons. We just add them into our pages when we have as we do here Pop up windows that need to open in a new window to keep focus on the main page.

<------ Close Window Form Button ------>

<------ Close Window Text Link ------>

<a href="javascript:window.close();">Close Window</a>

Close Window

[ Linkto Close Window By Clicking Graphic ]

For your Information: If you are going to add this table generator into your page(s) and opt not to purchase it, then you "Must" leave the credits and linkback to SearchBliss on the page.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]