Table Creator

Table Creator creates the HTML code for tables, with the possibility of specifying cells larger than 1 row by 1 column (using ROWSPAN= and COLSPAN=). Optionally text may be entered into the cells of the table, along with font, alignment, width, height and color values. This tool will support the creation of HTML code for any arrangement of cells of any size, subject to a limit of 20 rows and 20 columns in the table.

Here is a typical screenshot:

Complex or re-usable table specifications can be saved to a .tbl file and can later be restored using the Load button.

An example will now be given of the creation of a simple table. One should first draw an outline on paper to decide how many rows and columns one needs.

A left-mouse click on the cell at row 1, column 1, allows one to enter text, specify the color of text and background, etc.:

A right-mouse click on the same cell allows you to copy the font (only) to all cells in the table.

You can then left-mouse click on the cell at row 2, column 1, and specify content, color, alignment, etc.:

Clicking on "Specify table width, etc." allows you to set the border style.

The final specification looks like this:

Clicking on "Create table" (of course, you can do this earlier to check your progress) produces a file with HTML code such as the following, which you can then paste into a HTML document:

    <center>
    <table width="60%" border="4" style="border:4px dashed red;"
     cellpadding="4" cellspacing="1" bgcolor="#FFFFFF">
    <tr>
    <td colspan="2" align="center" bgcolor="#BEBEE1"><font color="#FF0000" face="Verdana" size="5">
<b>For Sale</b></font></td>
    </tr>

    <tr align="center" valign="top" bgcolor="#CDE1AF">
    <td width="20%"><font color="#003700" face="Verdana" size="4"><i>Code<i></font></td>
    <td><font color="#003700" face="Verdana" size="4"><i>Description</i></font></td>
    </tr>

    <tr align="left" valign="top" bgcolor="#CDE1AF">
    <td><font color="#003700" face="Verdana">20203</font></td>
    <td><font color="#003700" face="Verdana">This is a domicile fit for a king (or queen).<br>&nbsp;
    <br>The interior design is by the world-renowned Marie von Eschenbach, who designed
    the ladies' powder room at the Louvre.
    </font></td>
    </tr>

    <tr align="left" valign="top" bgcolor="#CDE1AF">
    <td><font color="#003700" face="Verdana">39201</font></td>
    <td><font color="#003700" face="Verdana">A multi-storage
    garage for the man who has more automobiles than he knows what to do with.  It features
    a spiral ramp with mahogany trimmings and discreetly placed rubber guards for the nights
    when he arrives home feeling slightly reckless.</font></td>
    </tr>

    </table>
    </center>

and the table appears in a web browser thus:

For Sale
Code Description
20203 This is a domicile fit for a king (or queen).
 
The interior design is by the world-renowned Marie von Eschenbach, who designed the ladies' powder room at the Louvre.
39201 A multi-storage garage for the man who has more automobiles than he knows what to do with. It features a spiral ramp with mahogany trimmings and discreetly placed rubber guards for the nights when he arrives home feeling slightly reckless.

Below are links to pages which give examples of the creation of more complex tables involving multiple cells having ROWSPAN and COLSPAN values greater than 1.

Easy HTML Construction Kit Home Page