11. Using tables

A table is a grid of cells placed in rows and columns. Tables are specially useful when making web sites, since tabs can't be used (tabs are not a part of html). A tab is a common word processor feature which makes it easy to align text in columns.

In this excercise the Contact page will be changed. Insted of having the address title above the address it will be placed to the left by using a table.

Start editing the Contact document and place the caret at the beginning of the document body.

The insert table button

Click the insert table button (and fill in the dialog as show below)

Enter 2 as the number of columns and click ok. This will create a table with two columns and one row. By using the default width and default height the columns will be 100 pixels wide.

Now right-click the rightmost cell and select "Table cell properties..." and set the width

Adjust the width to 300 pixels and click ok.

Drag the address to the left cell and the address fields to the right cell

To drag text first select it, then click and hold down the cursor one the selection and drag it to the new location. Cut and Paste could also be used.

Add two new rows (as described below)

Right-click on a cell and select Table Modifiers/Insert Row. This will clone the current row and place it below the current row.

Repeat the insert row to add one more row. The table should contain a total of three rows.

Drag in the telephone and information data to the new cells

The cells needs some spacing and it would be nice to have som background color.

Set the table cell padding and the border and background color

Set the Border to 1 pixels, the Border color to white (#FFFFFF), the Cellpadding to 4 and lastly the Background color to light gray (#CCCCCC).

The contact page is now completed.

Tables are as you can see quite useful for controlling the layout of a document.