Working with Tables

There are times when you're either creating a email footer for an agent, a letter/email template or a newsletter, where you want content to sit next to each other cleanly.

For example, you might want an agents profile picture to appear to the side of their name, phone, email, etc. Or, you might want some other content to be aligned and spaced correctly.

Because we use HTML for all of the above content, the best way to do this is a Table.

Adding the Table

1. Open the template/newsletter/email footer you are wanting to add to
2. In the tool bar, click the Table button
   

Setting up the table

In the new window is where we can setup how the table displays. There are a few things that you might want to work out first. Working out the below makes it easier to put together, as adding extra rows and columns can be a little tricky down the track:

• How many columns do you need? If it's a agents email footer, you would have two: One column for the agents image, and one for the agent details.
• How many rows do you need? If we're using the agents email footer as an example, it would be one, as you'd only need one image and all the details can go in the other
• How wide should it be? 

Once you've worked out this info, you can set the table up - the fields are described below:

• Rows - How many rows vertically do you want in your table?
• Width - How many pixels wide do you want it to be? Note: if you want it to appear across the whole page, use 100%.
• Columns - How many columns do you want vertically?
• Height - How tall do you want the table? As a rule, you should leave as blank so it only makes it as tall as it needs to be, from the content you have entered.
• Headers - Are used to make a header in either the first column or first Row. This is used when you would make a table of data - something that you might see in Microsoft Excel. You have several options here: First Row, First Column, Both
• Cell Spacing - This is the space between your cells.
• Border Size - This is the border around your cells in the table in pixels. Visually, they don't look great normally, but it is good to leave them on while you lay out your design, then we can turn of later once we're ready.
• Cell Padding - This is the space between the content in the cells and the edges of the cell they are in. Not to be confused with Cell Spacing
• Alignment - This sets where the whole table is aligned to on the page - to the left, right or centre
• Caption & Summary - Think of these as a heading and a summary that float above the table. You would use this is your wanted a heading to a table of data

You'll notice another tab called Advanced - Avoid this area unless you know what you're doing in CSS.

Once you have entered everything you need, click OK.

Adding Content to the Table

Now that we have created the table we can start to add content to it:

1. Click in the cell you want to modify
2. Update the same way you would when entering text or images anywhere else
3. Once you have entered all the data and have it layed out the way you want, we can remove the border by:
   • Click the Source button over the to the right of the toolbar:
     
   • Look for the table tag and change border to 0:
     
   • When you're finished, click the Source button to back to viewing you template