RockinTables
Organizing an Information Webpage

Ever see a page that was so unorganized it was hard to use? Take a look at these two websites and determine which one is more organized and why:
As you can see, tables are a great way to organize your page.
How can you use tables in your site to make it easier to navigate?
Try this:

Step 1

  1. Insert a table(Insert > Table)with:
    • 2 columns
    • 3 rows
    • width of 100 percent
    • border of 0
    • cell padding of 5
    • cell spacing of 0
  2. Then click in the top left cell(cells are each individual section of your table) and set the width to 150 in the width (W in Properties box) section of the DreamWeaver properties panel and hit enter.
  3. Click in the middle left cell and set the background color (Bg in Properties box) to gray. Repeat for the middle right cell and the bottom left one.
The result should look like this:
   
 

 
   


Go to step 2

 

 

 

 

 

 

 

Step 2

  1. Type your page heading in the top right cell.
  2. Type your information in the white cell.

You should have something that looks like this:

 
Main Heading
   
 

Sub title 1

Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here.

Sub title 2

More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here.

Sub title 3

More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here.

Go to step 3

 

 

 

 

 

 

Step 3

  1. Now insert anchors before each sub title.
  2. Then type in the links to your sub titles in the left gray column.
  3. Align your links in this left column to the top(Set Vert to "Top" in properties box).
  4. Make sure each link in your left navigation bar links to the appropriate anchor.
    (You may need to adjust your link color in page properties to make sure there is enough contrast with the background color. I chose red and a gray bg here.)

You should have something that looks like this:

 
Main Heading
   

Sub title 1

Sub title 2

Sub title 3

Sub title 1

Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type information in here. Type

Sub title 2

More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info

Sub title 3

More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here. More info here.

Click here for a working example.

Back to top