Tables

A table is a tool that uses columns and rows to organize information into specific categories.  On the Web, tables can also be used for page layout, because they can control the placement of text and images on the Web page. Tables are made up of several different parts:  cells, rows, columns, borders, cell padding, and cell spacing. Tables on the Web can contain anything that would normally be displayed in the content area of the window: text, images, hyperlinks, etc.  The cell order of a table starts from the top and goes left to right, and then top to bottom. 

A table can be formatted in three different ways: alignment, size, and color.  Tables have to be selected before they can be formatted, and all of the formatting options are located on the Property Inspector Palette. 

The table cells can also be formatted in three different ways: alignment, size, and color.  The cell has to be selected before it can be formatted, and all of the formatting options are located on the Property Inspector Palette.

Tables

• Aligning
• Inserting
• Resizing
• Selecting
• Table Headers

Cells

• Aligning
• Merging
• Resizing
• Selecting
• Splitting

Aligning Tables

1. Select the table.
2. Use the Align options on the Property Inspector Palette to Left, Center, or Right align the table.

Back to Top

Inserting a Table

1. Place the cursor on the page, where you want the table to appear.
2. Go under the Insert menu, and choose Table.
3. A dialog box will open.
4. Fill in the settings you would like for the table.  They can be changed later.
5. Click OK.
6. When the table is inserted, it is automatically selected.
7. The Property Inspector Palette now has options for formatting the table.

Back to Top

Resizing a Table

There are two ways to resize a table:  use the Property Inspector Palette, or use the resizing handles.

Using the Property Inspector Palette

1. Select the table.
2. Type in a number for the height and width of the table.  This can be done as a specific number of pixels, or as a percentage of the browser window.
   • Pixel - The smallest unit on a monitor, which is a very small square.  If you use a pixel size for the table, the table will remain that size, no matter how the browser window is sized.  This gives you more control over the table.
   • Percentage - The percentage of the browser window that the table will occupy.  The table will shrink or expand, depending on the browser window.  This gives you less control over the table.

Using the Resizing Handles

1. Select the table.
2. There are three resizing handles on the selection border.
3. Click and drag one of the handles in or out, to adjust the table.
   • The handle on the bottom will adjust the height of the table.
   • The handle on the right will adjust the width of the table.
   • The handle in the lower right corner will adjust both height and width simultaneously.  If you hold down the Shift key while adjusting this handle, it will keep the table in proportion.
4. The number of pixels or the percentage in the Property Inspector Palette will automatically be updated.

Back to Top

Selecting a Table

There are several ways to select a table:

• Move your cursor over the lower right-hand corner, until it changes to a four-headed arrow, and click.
• Move your cursor over the outside border on the right side, until it changes to a double-headed arrow, and click.
• Right-click with your mouse inside of a cell.  A pop-up menu will appear.  Go to Table, and choose Select Table.

Back to Top

Table Headers

1. Select the row
2. Check the Header box on the Property Inspector Palette.
3. The row will be automatically bolded and centered.

Back to Top

Aligning Cell Content

The content of a table cell can be aligned horizontally and vertically within the cell.

Align the Content Horizontally

1. Select the cell(s).
2. Use the align options on the Property Inspector Palette to left, center, or right align the content of the cell.

Align the Content Vertically

1. Select the cell(s).
2. Use the Vert: option on the Property Inspector Palette to align the contents to the top, middle, bottom, or baseline of the cell.  The default for vertical alignment is the middle of the cell.

Back to Top

Merging Cells

1. Select the cells.
2. Click on the Merge Cells button on the Property Inspector Palette.

Back to Top

Resizing a Cell

There are two ways to resize a cell:  use the Property Inspector Palette, or use the cell walls.

Using the Property Inspector Palette

1. Select the cell.
2. Type in a number for the height and width of the cell.  This can be done as a specific number of pixels, or as a percentage of the browser window.
   • Pixel - The smallest unit on a monitor, which is a very small square.  If you use a pixel size for the cell, the combined pixel width and height of each cell must equal the total number of pixels in the table.
   • Percentage - If you use a percentage size for a cell, the combined percentage of all of the cells of that row or column, must equal 100%.

Using the Cell Walls

1. To adjust the height of a row:
   • Move the cursor over the horizontal cell wall until it changes to a double-headed arrow.
   • Click and drag to adjust the row size.
2. To adjust the width of a column:
   • Move the cursor over the vertical cell wall until it changes to a double-headed arrow.
   • Click and drag to adjust the column size.

Back to Top

Selecting Cells

There are several ways to select cells:

• Hold down the Ctrl key, and click inside of the cell.  You can select more than one cell at a time, by continuing to hold down the Ctrl key.
• To select multiple cells, click inside of one cell and drag across the cells you need.
• To select a row of cells, move the cursor to the left side of the table until it changes to a black arrow, then click.
• To select a column of cells, move the cursor tot the top of the table until it changes to a black arrow, then click.

Back to Top

Splitting Cells

1. Select the cell.
2. Click on the Split Cells button on the Property Inspector Palette.
3. A dialog box will open.
4. Fill in the settings.
5. Click OK.

Back to Top