Wyodor @ MobileMe

Create and add a TABLE in iWeb

The use of a TABLE In a webpage is a convenient way to display information in tabular form.

iWeb has no feature to create tables in a webpage. The closest thing are textboxes. Create them and align them on the canvas.

To create a real HTML table and add it to a webpages you need the following:

• A spreadsheet application like Microsoft Excel, iWork Numbers, AppleWorks or similar.
• TextEdit.app.
• A browser.
• iWeb 08 or higher with the HTML Snippet option.

I use Mac OS X 10.6 and iWeb 09.

Create the spreadsheet

Create a spreadsheet with the columns and rows you want to display in the browser.

Add the numbers and apply decorations like fonts, colors, borders, etc.

Save your spreadsheet.

Exporting the spreadsheet

Microsoft Excel can export the spreadsheet as a HTML webpage. AppleWorks and iWork Numbers cannot.

All three applications can copy paste the formatted cells. I use that method.

Select the range of cells and copy them.

Open TextEdit.app and display the blank page as Rich Text.

Menu : Format > Make Rich Text (Cmd-Shift-R)

Paste the spreadsheet cells.

Save the page as a Web Page (.html) file.

Open the saved page in a webbrowser. Verify that it looks as intended.

If you created your spreadsheet in Microsoft Excel and saved it as a webpage, you should verify it in a browser too.

Displaying the saved html file in a iWeb page

To add the saved webpage to the iWeb Snippet you have 2 options :

1. Save the webpage in a folder on the webserver where you publish your webpages and display it in the HTML Snippet with the IFRAME HTML element.
2. Copy the HTML code and paste it in the HTML Snippet.

Option 1

• Determine the URL of the table webpage on the webserver. Copy the URL.
• Open iWeb and create a webpage.
• Add a HTML Snippet.
• Paste this code :

<iframe src="spreadsheet.html" frameborder="0" width="300" height="300" scrolling="no"></iframe>

• Paste the copied URL where is says spreadsheet.html.
• Change the width and height numbers.
• Click Apply. Your page will be displayed in the Snippet.
• Publish your iWeb page and verify it looks as intended.

Option 2

• Open the saved webpage in a browserwindow.
• Display the source of the page. In Safari: Cmd-Option-U.
• Copy the code.
• Open iWeb and create a webpage.
• Add a HTML Snippet.
• Paste the code.
• Click Apply. The Snippet will be adjusted to display the table.
• Publish your iWeb page and verify it looks as intended.

Editing the table webpage

To make changes to the table you have 2 choices :

1. Go back to your spreadsheet and repeat all the steps to publish your table again.
2. Edit the saved TextEdit webpage in TextEdit.

With choice 2, choose the Open command in the File menu in TextEdit.

Uncheck Ignore rich text commands.

You can now edit the formatted page.

When you save the page and you had chosen Option 1 to display the page with the IFRAME you do not need to edit the webpage in iWeb. Simply put it on the server again. Note that when the width and height of the table have changed, it might not fit in the HTML Snippet. In that case you have to adjust the size of the HTML Snippet.

Otherwise you have to repeat the steps in Option 2.

Recommended reading : Using the iWeb HTML Snippet