FreeForm users see instructions Here
HTML table builder featuring inline CSS formatting
by Rob Bell rob@robshelp.com robshelp.com
Tip: For menus and large charts, shipscript's tools are more appropriate:
Text Entry
Rows: Columns:
Apply
Fill
empty cells with row column text
Trim
trailing white space from cells
Update
Preview and HTML Results
Text entry box size Wide: High:
Apply
Show/Hide
text copy/paste buttons
Overall
Width:
Apply
Center table
Background Color:
Apply
HTML Border Width:
Apply
CSS Border Color: Width: Style:
Apply
Collapse Borders
Font:
Apply

Heading
Center
Background Color:
Apply
Text Color: Size:
Apply

Top Row
Center
Background Color:
Apply
Text Color: Size:
Apply

Left Column
Center
Background Color:
Apply
Text Color: Size:
Apply

Cells
All equal % width
Center Content
Background Color:
Apply
Border Color: Width: Style:
Apply
Padding:
Apply
Spacing:
Apply
Top Align Content
Convert new lines from text entry to new lines in the HTML (<br>)
Text Color: Size:
Apply
Suppress Text Wrapping

Preview

HTML Results Insert blank lines to separate HTML from text content (blank lines are generally ignored in HTML)
as a text file to your computer to use the HTML later - see below for saving entries and settings

Saving and Testing
It is important to test the appearance of HTML tables in the two most popularly used web browsers: Internet Explorer (IE) and FireFox. If you use MAC or Linux then testing IE will be troublesome. However, and this applies to Windows PC users as well, if you stick to use of only the "Solid" border style the result will tend to be acceptable with all. Also, avoid using an HTML border (set "HTML Border Width" in the Overall section to 0).

To test the results with other web browsers available for use on your computer, use the "Record" button below which places the data for the table (entries and settings) into the text box below. Visit the TableBuilder with the other web browser, copy the settings into the box there, then click the "Restore" button.

You may also preserve your entries and settings by copying them out of the text box below and placing into a text file on your computer. Then, on a future occasion, you may paste the contents of that file into the box below and use the "Restore" button. The "Download" button may work as a short cut for creating such a file on your computer.



Using with FreeForm at robshelp.com
  1. Insert a Text Input Area into the FreeForm Builder where you want the table to appear in your presentation.
  2. Put a check mark into the box labeled "Turn off FreeForm substitutions for blank spaces, quotes, and new lines". That box must remain checked or errors with occur with the HTML.
  3. Enter 100 into the "Width as Percentage:" box (you may adjust that afterwards as needed)
  4. Copy the contents of the HTML Results box above into the text entry box of the Text Input Area in FreeForm
After pasting in the HTML, the table contents may be further formatted (and edited) using the WYSIWYG button including inserting or replacing pictures.