Create a page layout using Tables

Tables are an extremely powerful Web design tool for laying out data and images on an HTML page. Tables provide Web designers ways to add vertical and horizontal structure to a page.

Tables consist of three basic components:

	rows (horizontal spacing)
	columns (vertical spacing)
	cells (the container created when a row and column intersect)

Use tables to lay out tabular data, to design columns on a page, or to lay out text and graphics on a Web page. Once you create a table you can easily modify both the appearance and structure of HTML tables. You can add content; add, delete, split, and merge rows and columns; modify table, row, or cell properties to add color and alignment; and copy and paste cells.

For more advanced layout ideas you can insert a table within a table, adding even more flexibility to your design.

Insert our table by:

1	Do one of the following:
	In the Document window, place the insertion point where you want the table to appear, then click the Table button on the Object palette, or choose Insert > Table.
	Drag the Table button from the Object palette to the desired insertion point on the page.
	The Insert Table dialog box appears.
2	In the dialog box, type in these new values:
	Note: The Insert Table dialog box retains the values of the most recent settings you entered for a table.
	In the Rows field, specify the number of table rows. Enter 1.
	In the Columns field, specify the number of table columns. Enter 2.
	In the Cell Padding field, specify the number of pixels between the cell content and the cell boundary (or wall). Enter 0.
	In the Cell Spacing field, specify the number of pixels between each table cell. Enter 0.
	In the Width field, specify the width of the table as a number of pixels or as a percentage of the browser window. Enter 100 Percent.
	In the Border field, specify the pixel width of the table border. Enter 0.
3	Click OK to create the table.

Defining Column alignment.  

1 Click anywhere in the left column.

2On the Property Inspector click on the arrow in the bottom right hand corner so that you can see the bottom of the Property Inspector

3You can change the horizontal and vertical alignment for any table cell.

Horz (Horizontal Alignment) adjusts the text in your cell to be aligned to the left, center or right of the cell. Leave it as Default (which is left)

Vert (Vertical Aligmnent) adjusts the text in your cell to be aligned to the top, middle, bottom, middle, or baseline of the cell. Choose Top.

Defining Column Width

1	Click anywhere in the left column.
2	On the Property Inspector click in the text field beside the W (Width).
3	You can change the width of the column as a number of pixels or as a percentage of the browser window
	Enter in 120
	You'll notice that the column border moves to the left. This is 120 pixels from the left border of the table. The right side of the table doesn't have the cell width defined so it will adjust it's width to stretch out to equal the width of the table(100%). Try rezising your window and you'll see how it works.

Adding images

Now you'll insert the Cyber Rez logo image in the document.

1	Click anywhere in the left column.
2	Choose Insert > Image, or click on the image button on the Object Pallete.
3	In the Select Image Source dialog box, locate the Websites/Cyberrez/graphics folder, navigate to cyberrez_r1_c1.gif, and click Select.
	The image appears in the table column.

Add Navigating Buttons

We are going to add buttons on the left column under the logo so people can navigate through our site.

1	Click in the left column. You'll see that the logo is automatically selected. Press the arrow down button on your keyboard once to move the cursor in the space next to the logo.
2	Choose Insert > Image from the menu bar, or click on the image button on the Object Pallete.
3	In the Select Image Source dialog box, locate the C:\Websites\Cyberrez\graphics folder, navigate to cyberrez_r3_c1.gif, and click Select.
	The image appears underneath the logo in the left column.
	Repeat the above steps for the following images in this order: cyberrez_r4_c1.gif cyberrez_r5_c1.gif cyberrez_r6_c1.gif cyberrez_r7_c1.gif cyberrez_r8_c1.gif

Add an Title graphic

1 Click in the right column.

2 Insert the image called cyberrez_r1_c2.gif from the Websites/Cyberrez/graphics folder.