Skip to: Main Content Search Main Navigation Audience Navigation

V8 -- Using Tabular Layout Elements

  1. If necessary, login, navigate to the page you want to work on, and select "Work on this Page."

  2. Click on "Click to insert new element."

  3. In the Element Gallery, click on "Layout Elements" to expand that list. (The "Multi-section" layout element essentially just gives you a formatted text block with header, so we won't pay any further attention to that choice.)

  4. Click on "Tabular Layout" and observe that your page now has the text "Click here to define the Tabular Layout element."

  5. Click there to define the layout. You will have control of all the usual HTML table attributes. Be aware that using a table makes the display of your page more browser-dependent. Specifying table or cell widths in pixels may make it impossible to print in portrait mode without cropping for some of your audience, and may force the browser to wrap text within the cells differently for some of your audience than others. In class, select two rows and two columns, and specify small non-zero border, cellpadding, and cellspacing values.

  6. Click on the "Save" button when you are done.

  7. Observe the new "Click to insert new element" choices, one in each table cell.

You will be able to use the element properties icon to revise the layout properties later. Whenever you use tables for layout, bear in mind that text browsers, such as are often used by visually impaired people, may ignore table tags, and consequently may display items with no separation that you think of as separated. CommonSpot will display additional tool icons if you click on the down arrow icon (gray_arrow_down) at the top-right corner of the table, and right-clicking within a cell will bring up a menu with additional choices.