This example shows how the table on the Easy HTML Construction Kit home page was created.

First, using pen and paper, we draw the table structure:

An examination of this shows that we need to begin with a table of six rows and seven columns (saving the HTML code for the centered table to a file called panels.htm):

Left click on the cell at row 1 column 1 and specify a rowspan of 5:

To specify a colored background for this cell check Use specified text and background colors for cell and click on Specify cell colors and enter "128" for the blue component of the background color:

Click Accept then Accept to obtain:

Repeat this for the cell at row 2 column 7, to obtain:

Now left click on the cell at row 1 column 2 and specify a column span of 6 and the blue component of the background color as 128:

Do the same for the cell at row 6 column 1 to obtain:

Specifying the appropriate rowspans and colspans, and some background colors, for cells at row 2 column 2, row 2 column 6, row 3 column 2 and row 5 column 3 gives us (in may help to check Place markers before doing this):

We are now (almost) ready to enter the text in the central six cells. Let's say we want this text to be black-on-yellow and with ALIGN=CENTER and VALIGN=TOP. Also we want each of the central cells to have a width of 25% (this is 25% of the table width, currently left to the browser to decide). Left click on the cell at row 3 column 3 and specify the required values:

We now want to copy the content of the cell at row 3 column 3 (which includes the alignment and color specifications) to the other central cells. First right click on this cell to bring up the Copy Cell window:

Copy the contents of this cell to the other central cells to obtain:

Now we enter the required text into each of the central cells:

to obtain:

Clicking on Create table creates the file panels.htm with the HTML code for the table. When viewed with a web browser the table appears thus:

		HTML Template	Text to HTML	Code to HTML
		Data to List	Data to Table	Table Creator

Different browsers may display this in different ways, since the width of the table is not specified, and among the cells only the central six have a width specification. The result may be that the green cell on the left is considerably wider than the green cell on the right.

Before attempting to correct this we might first save this table using the Save button. It can later be reloaded using Load.

To correct the cell size anomaly we might try specifying widths for the two green cells, say, 6%. This produces:

		HTML Template	Text to HTML	Code to HTML
		Data to List	Data to Table	Table Creator

In some browsers the two amber cells may now have significantly different widths. So we can trying specifying widths of 6% for each of these. The resulting HTML code now gives a table which appears as:

		HTML Template	Text to HTML	Code to HTML
		Data to List	Data to Table	Table Creator

This should look OK on most browsers. The HTML code generated by Table Creator may be seen here (except that in Version 8.00 and later the HTML tags are in lower case).

This HTML code (with the appropriate links added) was used for the table on the Easy HTML Construction Kit home page. (The color of the text is no longer black on yellow but rather is determined by the LINK="#0000FF" VLINK="#BE00FF" ALINK="#FF4CBD" in the BODY tag of that page.)