News

Forums

Software

Training

Contact

GoLive HQ Featured Column

Tables Versus Grids
By: Irv Kanode

GoLive doesn't force you to use the Layout Grid. You can use the Layout grid on some but not all pages in your site. You can use the Layout grid for just part of page. You can use more than one grid on a page. You can't put them side by side but one can go across the top of the page, and another across the bottom with plain html text in between.

You can even put tables on top of Layout grids, and Layout Grids inside of tables. Warning: it's easy to get carried away. (See "Creating Simple Grids" below.) Here are some of your options:

Plain HTML - Just typing text into a GoLive document window

    Advantages:

    • Smallest possible page size
    • Works on all browsers
    • Text and graphics reflow when the user resizes their window

    Disadvantages:

    • Text and graphics reflow when the user resizes their window
    • Limited control over placement of other objects such as graphics

Tables

    Advantages

    • Works on almost all browsers
    • Keeps items of indeterminate size lined up.
      (Think of a catalog layout with a small graphic in column 1 and descriptive text in column 2. At any font size, it's clear which graphic goes with which text.)
    • Text and graphics inside the table won't reflow when the user resizes their window

    Disadvantages:

    • Text and graphics inside the table won't reflow when the user resizes their window
    • If the page design is complicated, the table is hard to build
    • A slight change in the design often requires that you start over with a new table.
      ("Can you move that graphic from the left edge to the right edge.")

Layout Grid

The Layout Grid is nothing more than an interface to an automatic table generator. A standard HTML table is generated that automatically includes a control row and column to maximize display consistency among browsers. (This is a common HTML trick.) Each time you move something on the Layout Grid a brand new table is generated. It is the simplest table required by your design. This is a flat table--GoLive never generates nested tables. (Nested tables can be slower to load than a slightly larger flat table.)

    Advantages

    • Works on all version 3 and 4 browsers (Some Layout grid designs don't display well in version 2 browsers)
    • Easy to build
    • Easy to modify
    • Text and graphics on the Grid won't reflow

    Disadvantages

    • Text and graphics on the Grid won't reflow
    • It is easy to create a overly complex design which requires GoLive to create a table with lots of rows and columns. It is however the simplest table possible for your design. (See "Creating Simple Grids" below.)
    • Not especially good for keeping items of indeterminate size aligned such as the catalog example above or for aligning form elements.


Creating Simple Grids

Each time you place or move objects on the Layout Grid, GoLive generates a brand new table for you. This table is as simple as possible consistent with your design. However, GoLive doesn't prevent you from making overly complicated page designs which require complex tables. Internet Explorer in particular has problems with tables that have lots of randomly placed (non-aligned) objects. Lots equals more than roughly 20 objects on a Layout Grid (table). The typical symptom is that Internet Explorer over-estimates the page width and displays a horizontal scroll bar when it isn't needed.)

Here are some tips on avoiding problems:

  • KISS! It is very easy to create complex designs that are beyond the consistent-display capabilities of the browsers. Also, the simpler the design the fewer rows and columns and the less code. Test your prototype pages (early and often) on Mac and Windows, Netscape and IE, and version 3, 4, and 5 browsers.

  • Line up objects EXACTLY into rows and columns. (Turning on "Snap to grid" in the Layout Grid Inspector will help with this.) Even though GoLive is generating the table for you automatically--you still want a table with the minimum number of rows and columns.

  • If you need to have lots of objects on a page consider using more than one grid. Stack them vertically on the page--not side by side. This allows each grid to be simpler since it doesn't need to have the columns required by the content in the other grid.

  • Minimize the number of objects on the page:

    • Avoid slicing images into small pieces. There are Internet-myths that doing so will speed up the loading of pages. In most circumstances there isn't a speed improvement and it often/usually slows things down. It can also lead to display problems between browsers.

    • Combine text into as few text boxes as possible. Typically one text box for an entire column--NOT one text box for each paragraph.

  • The Optimize button on the Layout Grid does not reduce the amount of table-code required to generate your design. It only shrinks the Grid to the minimum width and height occupied by your design.

  • When prototyping a page design, frequently check the Special menu > Document Statistics item. (It's only active when you have an html page open and to the front.) It tells you how big the html is for the page and allows you to check the impact of your design decisions.

Sometimes Tables are a better choice than the Layout Grid. A regular table is a better choice than a Layout Grid when the objects won't be the same size from one browser or Operating System (OS) to another.

  • Forms should always be placed in a table. Form elements, especially scrolling text boxes and popup menus, are displayed in different sizes in different browsers.

  • Catalogs where paragraphs of descriptive text need to stay aligned with a graphic should be created using tables. That way the text and the graphics will still align as the text size changes from OS to another and no matter how the browser's font size configured.

  • If a simple table can do the job, use it.


For Advanced Users ONLY

Don't try this on your only copy of a page. If you make a mistake, you can damage the page and will have to recreate it.

  • Switch to Source view and remove the "COOL" table attribute from the Table tag. This is a flag that tells GoLive to display this table with the Layout Grid interface.

  • Switch back to the Layout Editor.

  • You can now view the table created by GoLive. DO NOT modify this table--it will most likely ruin the page.

  • If you don't make ANY changes you can switch back to Source view.

  • Replace the COOL attribute

  • Switch back to Layout View and refine your design on the Layout Grid

  • If you saw narrow or short table cells (in other than the first row and column), you need to vertically and horizontally align objects to eliminate these probably needless cells. (You can check your progress by removing and replacing the COOL attribute.)

  • The fewer table cells the better.

In summary: The Layout Grid does not generate bloated tables--designers generate overly complicated designs which require GoLive to generate a table with an excessive number of rows and columns.


<- Back to News

[News] - [Forums] - [Software] - [Training] - [Contact]

Server provided by Point In Space Web Hosting - Host it right, on a Mac
All Contents Copyright 1999, 2000 Point In Space Internet Solutions