gotFusion.com....... Where your adventure begins
Showcase your website at Fusion GalleriesNetObjects Fusion 7 Websites Portal

 


 

Making a Complex Table

  • To get some practice with a complex table, work through the steps in this section.

Requirements

You need

  • the Chart.gif. graph which is located in this download zip file
  • Your copy of NetObjects Fusion up and running.

Tips

  • Print this document.
  • Make a check mark next to each step you complete.

Producing the complex table

  1. Select File, New Site, Blank Site.
  2. Name the site Learning Tables.
  3. Click OK.
    Fusion takes you to Site View.
  4. Select the Home Page.
  5. Press CTRL+N to create a new page.
  6. Name the new page Sales.
  7. Double-click the Sales page icon to open Page View.
     

Congratulations, you're ready to start building our table!

  1.  Figure 1 — Table Tool

    Figure 1 — Table Tool
     

      Figure 2 — Table Border

    Figure 2 — Table Border

    Click the Table Tool (Figure 1).
  2. Click and drag to draw a table in the Layout.
  3. Set the table to 4 columns, 7 rows.
  4. Set the table border to 0 (Figure 2).
  5. Click and drag the first column right border to 80 px. from the left table edge.
  6. Merge all first row cells.
  7. In the merged cell, enter Our Sales by Region.
  8. Use Cell Properties, Text tab to set Style H1.

How are we doing so far? Your table should look like Figure 3.

  Figure 3 — Table with H1 row

Figure 3 — Table with H1 row

Making room for a chart graphic.

  1.  Figure 4 — Select Cells

    Figure 4 — Select Cells

    Select all cells in columns 2-4, rows 2-5 (Figure 4).
  2. Right-click a selected cell.
  3. Select Merge Cells.
  4. Click the Picture tool.
  5. Click in the big merged cell.
  6. Browse to locate the chart graphic.
  7. Click OK.

Did the chart show up? Good job!

 Figure 5 — Cell Properties, Background Colour

Figure 5 — Cell Properties, Background Colour
 

 Figure 6 — Text Colour

Figure 6 — Text Colour

Let's add some captions for the chart.

  1. Double-click the cell at column 1, row 2.
  2. Enter "North."
  3. Use Cell Properties, Cell Tab to set cell background colour Purple (#9999FF) (Figure 5).
  4. In column 1, row 3, enter "South".
  5. Set cell background colour Yellow (#FFFF00).
  6. In column 1, row 4, enter "East".
  7. Set cell background colour Maroon (#990000).
  8. Select East.
  9. Set text colour White (#000000) (Figure 6).
  10. In column 1, row 5, enter "West."
  11. Set cell background colour Orange (#FF9933).

Your page should look like Figure 7.

 Figure 7 — Page with chart and coloured captions

Figure 7 — Page with chart and coloured captions

Adding a secondary heading and some news items.

  1. Merge all cells in row 6.
  2. Enter Annual Meeting Excitement!
  3. Set Annual Meeting Excitement! to H2.
  4. In row 7, cell 2, enter The CEO's Speech.
  5. Press Enter to start a new paragraph.
  6. Enter Blah blah blah blather blah blah blather blah blah blather.
  7. Set The CEO's Speech to H3.
  8. In row 7, cell 3, enter The President's Speech.
  9. Press Enter to start a new paragraph.
  10. Enter Blah blah blah blather.
  11. Set The President's Speech to H3.
  12. In row 7, cell 4, enter The Shareholder Revolt!
  13. Press Enter to start a new paragraph.
  14. Enter Blah blah blah blah blather blah blah blah blah blather.
  15. Set The Shareholder Revolt to H3.

Decorating the news stories

 Figure 8 - Object Format

Figure 8 — Object Format

For a finishing touch, let's decorate those three "news stories" a bit.S

  1. Select the CEO's Speech cell.
  2. On Cell Properties, Cell Tab, click Format.
  3. Use Object Format, Borders Tab to set a Border, Double, 3 px, Purple (#9999FF) with all Padding  set to 3 px (Figure 8).
  4. Select the President's Speech cell.
  5. Set a Border, Outset, 5 px, Maroon (#990000), all Padding 3 px.
  6. Select the Shareholder Revolt cell.
  7. Set a Border, Dashed, 5 px, Dark Blue (#003366), all Padding 3 px.
  8. Click Preview to examine the page.

Comparing the finished complex table

If your page looks like Figure 9, congratulations, we're done! (Don't worry about minor variations in text wrap or colour.)

Did you notice how you can change Borders and Padding for cells independently of the Table Properties? You can manipulate those settings (and more) on the Object Format dialog (Figure 8).

Caution!

Beware – many of the settings on the Object Format dialog

  • Require CSS to render in the browser, and
  • Could be ignored or mangled by older browsers like Netscape 4.x.

View the PREVIOUS page in this tutorial

Return to the TOP of this page

View the NEXT page in this tutorial

 


|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2002 GotFusion LLC.  The name GotFusion and the GotFusion ® logo are registered trademarks of GotFusion LLC
Copyright, legal notice & privacy statement