Tables: HomeSite 1.2
Create a Basic Table

Create a Table There are several ways to create a table with HomeSite.

You can use the Quick Table button on the Quick Tab.

Table button
Quick Table button

When you click on the down arrow on the table button, a grid appears. Move your cursor across and down the grid to choose the number of rows and columns you want to put in your table.

When you release your mouse button, HomeSite will add all the HTML for the table, table rows, and table data to your page.

Table Grid

Table Code
Note the tag pairs:
  • <TABLE></TABLE> is the tag pair that indicates the start and end point of the table.
  • <TR></TR> is the tag pair for each row of the table.
  • <TD></TD> is the tag pair for the data in each column of a particular row in the table.
You can also use the Table Editor button on the Tables tab on the speedbar.

Tables tab

Table Editor button
Table Editor
Button

The Table Editor dialog box will appear. It will be set to the Table Properties tab.
Table Editor
In this area you can set the number of columns and rows in your table, and add a caption and a background image or background color.

You can also set values for Cell Padding and Cell Spacing as well as the Table Width and Border Width in pixels.

When you choose the number of rows and columns in your table, the Table Editor creates the table in the text box.

Place your cursor in the first table cell and begin to type your table data. Move from cell to cell with the tab key.

When you click on OK, the table, complete with cell contents, will appear in your document.

If you want to adjust the table after you have created it, you can use the shortcut buttons on the Table speedbar or you can use the Tag List to add a new tag and attribute to a particular table cell. Note: See Start: Tour HomeSite 1.2 for a review of the ways to insert tags and attributes into your document.
There are two ways to add a row to an existing  table:
  1. Insert your cursor after the last </TR> tag and click on the Table Row button on the Tables speedbar.
  2. Insert your cursor after the last </TR> tag and use the Tag List to add the <TR></TR> tag pair.

Remember that you will then have to add a tag pair for each column within your new table row.

 

Table Row button
Table Row button

There are two ways to add a column to an existing table:
  1. Insert your cursor before each </TR> tag (i.e., each tag closing a table row) and  click on the Table Data button on the Tables speedbar.
  2. Use the Tag List to add another <TD></TD> tag pair just before each closing </TR> tag.

Table Data button
Table Data button

Tables: HomeSite 1.2
Overview
Create a Basic Table
Set Table Cell Properties
Experiment with Advanced Table Design

Personal Home PageWeb Design CenterTutorial MenuTop of Page

Web Design Center
Last Revised: September 18, 1999
© Agatha Taormina