Putting it all on the Table

Using tables to align and arrange the content on your website can prove to be helpful or could be a complete nightmare.  The key is using them sparingly and in a way that makes the site not only clean and neat to the viewer, but easily changeable to the webmaster.  Trying to edit content in a table you cannot see, however, can be quite challenging.  No matter how much you try, that text just won't move over to the edge of the page.  The reason - its probably in a table with a border set to 0.  Tables are extremely useful for:

1. Listing names, phone numbers, or other items (such as on a "Staff" page).
2. Perfectly arranging pictures in neat rows and columns (for pages that show galleries of pictures).
3. Placing pictures and text outside of the content area (for creating "teasers" which intice the viewer to "click to read more").

When you have a list of names and their corresponding emails, phone numbers etc., you can put them in a table to make them line up perfectly. 

Pastor                        Pastor's phone             Pastor's email.

The above content was simply typed in and has spaces between each column to give it the look it has.  The problem comes when you put an inconsistent number of spaces between the next column of data, or when you try to change some formatting.  For example, if you decide to bold or italicize this data, Each letter will get bigger, therefore you will have to readjust the spacing you placed between the columns accordingly. 

Now lets take that data and put it into a table.  First click on the "Insert Table" Button located on your WebMedley toolbar. 

When you click on "Insert Table", a "Table Properties" box will appear.  This lets you customize the table you will be inserting.  Specify the number of Rows, Columns, the width and height (if applicable), the border size, cellpadding and cellspacing and click "ok".

Width and Height: when set to 100%, the table will be as wide as the page.  By putting a numerical value in these fields, your table will be that many pixels wide or tall. (Average width for the content area in most templates is 490 pixels.) Cellpaddding: this controls how many pixels will go between the contents of the cell, and the edge of the cell. Cellspacing: this controls how many pixels will go between each cell of the table.

Now that we've got our table inserted, we can fill it with the appropriate information.  You can simply type the text into each table cell, or paste, or drag and drop.  You can also insert pictures in a table cell along with the text.  This is commonly used when including "Mug shots" of a person and their name immediately underneath the picture.  (Note: all formatting like alignment and word wrap can also be done within the table cell).

Name

Phone

Email

Keeping this information in a table will ensure that it is always perfectly aligned, and guarantee that the spacing will remain constant between cells. 

One more great use for tables is placing text, graphics or both outside of the content area.  This is done by "Absolute Positioning" a table.  While a table is highlighted, click on the "Absolute Position" Button on your WebMedley toolbar. 

This will lift the table off the page onto its own layer, and let you drag and drop the table anywhere on the page you want.  Although this could get you into trouble if you overuse absolute position, but when used sparingly this can give your site an fresh, new, and exciting look. 

If you're wondering how much tables are used in some of the most popular websites, follow these instructions to get an idea.  First, go to a large website, for example www.msn.com. 

Click on the "Edit Source" button on your WebMedley toolbar (don't be intimidated by all the HTML code, you won't need to know what it means).

Click on the "Edit" menu, then "Replace".

In the box that appears, fill in the fields like below. This tells the computer to take all the tables on this page and give them a border of "1" (Don't worry, you are not actually changing the page, just your view of it).  Click on "replace all", then click the Save button in the top left corner of the screen.

When you close the edit source window, you should be able so see all the tables on the page!