Advanced Tables-Page Layout Made Easy
Module 16

In the previous module, you created a table and added and removed rows and adjusted the placement of the contents of a cell within the table.  We will apply that information to make laying out and formatting an entire web page much easier.

 There are two ways to look at this layout.  You might consider this as:
 

A. one table with 2 columns and 5 rows but the first cell in the first row covers the two columns below it (and the second cell is extremely small and could be deleted)  Here is how this one would look:  or

B. a table of only two rows and one column but inside the bottom row is another table of 4 rows and 2 columns.  Here is a way to visualize this option:

 Both approaches have benefits, and web authoring software other than Composer may have other ways to manage tables.  For this lesson, we will take the Option B first with information about Option A at the end of this module.
 

Table within a Table:

2. Insert a Table with 2 rows and 1 column.  Make the Table Width 50% of the window and Center it on the page.

It should look like the image below:

3. Now be sure you've clicked in the bottom row and insert a new table in that cell (INSERT>Table>Table or click )  .  Make this table 4 rows and 2 columns.

Notice that you now can see the table within the table.  You can click in the different cells and enter information.
 

4. Now we will create a different layout for a "Table in a Table"  Click below the table you just created and press ENTER or (RETURN twice).

 Create a table like this one:

This is a large table of 1 row and 2 columns at a width of 20% of the window.  In the right column is a nested table of 5 rows and 1 column with a width if 100% of the current cell.
 

5. Now, click in the left side (the "first" cell), and we'll insert a picture.  As before, go to Insert>Image and choose the HomePaw.GIF picture used earlier.

6. Now to center it nicely (so it will be centered, no matter how large or small the browser screen is), pull down the FORMAT>Table Info>Cell Tab and make both horizontal and vertical values CENTER.

Suppose you want your page to refer to Web Sites outside your little corner of the Internet.  For example, you might want to have a link to a web site that you found useful for students.  In the next section, we will add some links to sites that are out on the Internet.  You must know the correct URL (the address) for the site.  You may want to go to the site and COPY the address, avoiding keyboarding errors.

7. Click in the top right cell (the one inside the one in the upper right).  Now type:

   Apple Computers

   Dell Computers

   Hewlett-Packard

   Epson

   Microsoft's Informative Web Site

9. Click the Insert Link tool button (or INSERT>Link...)

 In the Link To: URL line, type:
 

   http://www.apple.com

The http:// tells the browser to go out on the web to find the information you want.  If you omit it, the browser will look in your WebProject folder for www.apple.com

10. Here are the URLs for the other sites (type them in and make them active links-you did this in an earlier module):

 www.dell.com
 www.hp.com
 www.epson.com
 www.microsoft.com

11. SAVE your page again, and see what it looks like in Navigator (Preview).  If you are connected to the Internet, you might try out the links, pressing the BACK button to get back to your file.  If you move the pointer over the links, it should change to a hand, making it a working link.

If you do not have an active connection to the Internet, you can try it but will get an error.
 
 

12.  When done,  close the Preview window and return to the Composer (or FILE>Edit Page)window.

13. As with other objects, you can make a picture (graphic) also be a link.  Click once on the HomePaw.gif picture.

14. Click the LINK button and in the Link To: URL box, select your Page1.html page you created in earlier modules.

15.  SAVE the page and Preview this change.  Then return to the Page3.html page and FILE>Edit Page.
 

16. Now for a "final" touch.  Viewing the lines around the table may look "unprofessional," so we will remove those lines, now that we can see how the structure of the table within a table.

17.   Click anywhere inside a cell of the Table, pull down FORMAT>Table Info and click the TABLE tab.

18. Remove the checkbox in front of  "Border Line Width..."

20.  Now SAVE and Preview your page.
 

To see how tables can be used to organize pages, when you have an Internet connection, go to a site like www.yahoo.com and pull down FILE>Edit Page.  You can EDIT the page to see Tables nested inside Tables and these Tables inside other Tables, with different colored backgrounds for some tables (but you couldn't SAVE changes to the same location-you could save to your local hard drive).

You might also look at the layout of the Composer Module Home page for these modules.  Go to FILE>Edit Page and see the layout that creates the listing of the modules.
 

Notes:

"Option A" from the beginning of this module:

To create a table similar to the Option A example, you would create a table with 5 rows and 2 columns.  You would then click in the upper left cell, and go to FORMAT>Table Info>Cell Tab and make that cell "Span 1 row and 2 columns."  Then to get to remove the "extra" cell at the end, click in that small cell and go to EDIT>Delete Table>Cell.  As mentioned repeatedly, Netscape Composer handles tables in its own way.  Other editing programs allow you to select adjacent cells and JOIN them or take an existing cell and SPLIT it.

A neat feature you might find useful is under the TOOLS menu called Tableize.  Using this tool, if you had a list of words that need to be in a table, select the words, select TOOLS>Tableize>By Spaces, and see the result.  A later module will explore this option.