Tools You Will Need

Gather together these tools before proceeding on with this tutorial.

A spreadsheet program like Microsoft's Excel or OpenOffice.

Notepad++ - http://notepad-plus-plus.org/download (Mac clients can run this in Wine, or get a similar type program for the Mac)

Open a web browser to TableMaker - http://www.bagism.com/tablemaker/.

Preparing Your Data

If the data you want to add to your email template is coming from a web site, highlight and copy the information then paste it into a new, blank spreadsheet.

If it is already in a spreadsheet then follow these steps to clean up your data. If is from a spreadsheet it is best to make a copy of that file and work from the copy.

If the data is in a table which is in a word processing document, copy the table into a spreadsheet. Spreadsheet programs are better suited to the type of work you will need to do to prepare the data for making your HTML table.

Highlight the table in the spreadsheet program and clear all formatting and links. You do not want to include a lot of links in an email. Excessive links will cause any email to be flagged as spam. Highlight the whole spreadsheet and remove hyperlinks.

As can be seen, the table above has the cells of the top row merged, clear all merged cells,

Remove any unnecessary information, such as the Details column,

Now, dress up your data. Ideally, make as much of the data occupy the same horizontal space as it is sensible to do so. In this example, I am going to change the percentage cells to numbers and set the decimal places to 3 to make them all the same width. I will change the cell formatting for the monetary cells to Currency with 2 decimal places.

I am not concerned with alignment of the cell contents at this time. Your table is now ready for saving.

Save the spreadsheet as a Tab Delimited file. Do no save as a Comma Separated Value (CSV) file, as the comma used for the thousands ($1,000.00) demarcation will count as a comma seperation.

Open the text file in Notepad++ and copy all of the text.

Go to the TableMaker web site in your web browser.

Paste the copied data from Notepad++ into the DATA field. Set the rest of the settings as follows,

Select the Make Table button. The page will change to "TableMaker Output" showing you a preview of your table with the HTML code (Source of Table) below.

Scroll down to view the Source of Table HTML code. Select all of it and copy then paste it into a new, blank Notepad++ page.

Select Search from the Notepad++ menu, then select Replace. Put a quote symbol (") in the "Find what:" field, leave the "Replace with:" field blank, match rest of the settings show below, then select the "Replace All" button. This will replace all quotation marks with nothing, effectively removing them.

Your are now ready to put your table into your Email template!

Do select all on the HTML in Notepad++ then copy.

Go to Edit for the email template in your BombBomb account that you want to add this table to.

Select the Source button  on the toolbar, find the location you want to insert the table, click there then paste the HTML you copied from Notepad++ into the source editor.

Tip: Finding the location you want to insert the table while looking at the code can be daunting at best. Before selecting the HTML button on the editor toolbar, make note of some text just above where you want to insert the table. When in the HTML source editor, look for that text then insert the table after the closing paragraph (</p>) tag.

For example,

You are looking for the text "My Heading." In the code you will see the words "My Heading" followed by the closing paragraph tag, i.e. "My Heading</p>". Place your mouse pointer to the immediate right of the ">" character of the </p> closing paragraph tag then paste in your table.

Select the Update button on the HTML Source Editor screen. You will see your table in the template editor.

You can now edit the table like any other element in a BombBomb email template. Make headings bold, change color, alignment and size.

Select the orange "save" button to save your template, or if a new template select the green "continue" button.