How to Create a Page Layout with Tables

Note: If using tables as a layout tool you should switch to using the TinyMCE editor. The guide below assumes you are using TinyMCE and not the Kupu editor.

Plan

When creating a page layout with tables it is important to plan out how you want content to be displayed on the page. Planning is an important step because creating a page layout on a website is not exactly like creating a layout in a program like Word.

Tables can provide you with a more advanced way to use horizontal space on your web pages. They can allow you more control over where you place content on the page.

Some questions to consider before starting your layout

• What content do you want to display
• How can this content be most easily displayed on screen

Some things to consider about tables

• Your site uses dynamically sized tables. This means the table will resize to fit the content that is placed in it. It does this to account for content showing up as different sizes depending on the viewer's browser and monitor settings.
• Because of this it is safest control how large/small a row/column is by the items you place in it. Images will have the biggest effect on size and often are the easier element to use to force columns to a certain width.
• If using images you should try to use images of the same size. This may mean resizing images.

Some example table layouts

Create

When creating or editing tables its best to use the Firefox web browser. While edits can be done in a browser like Internet Explorer it is not recommended as it has less functionality when it comes to creating or editing tables.

Add Table

1. Create a page or edit an existing page
2. Place your cursor in the body text area in the location you want the table to appear
3. Click on the Insert Table toolbar button
4. Choose the subdued grid table style, the number of columns and rows
5. Click the Insert Button

Add content

1. Edit the page that the table was created on
2. Click inside the cell you want to add content to
3. Add content just as you normally would for
• Images
• Text
• Links

Maintain

Navigating Table Cells

Table cells are navigated by clicking inside a cell with your mouse and then using the tab key on the keyboard. This is a little different from a normal spreadsheet where you may be used to using the tab key.

Add New Rows

We recommend that you add or edit table in Firefox as more tools are available compared to Internet Explorer.

1. Edit the content item that contains the table
2. Click into a cell in a row of your table
• Click on either the add row before or the add row after toolbar buttons to add a row before or after the row your cursor is currently in

Alternatively you can also click into the last cell in your table and then press the [tab] key and a new row will be added to the bottom of your table.

Add New Columns

We recommend that you add or edit table in Firefox as more tools are available compared to Internet Explorer.

1. Edit the content item that contains the table you want to add a row to
2. Click into a cell in a column of your table

• Click on either the insert column before or insert column after toolbar button to add a column before or after the column your cursor is currently in

Update Content

Content in a table is updated just like content that you edit on a page. You can replace text, images, and links the same way you would on a page.

Change Layout

You may decide that you want to change your layout. If this is the case it most situations its much easier to create a new table and then move any existing content you want to keep into the new layout. Trying to change an existing table can be difficult at times.

Starting Over

You may also at times find that your table is not responding as you would expect. In cases where tables seem to be broken or not showing content how you would expect it is usually the quickest and easiest to create a new table and then move your content into the new table and then remove the old one.