Developers
AvantGo Channel Developer Guide

TOC PREV NEXT INDEX


Using tables judiciously

Big tables are a nightmare for users trying to view them on the small screens of mobile device screen. But if you are careful, you can use tables to good effect in some situations.

Advantages of tables

Tables in HTML have several advantages that you are probably used to taking advantage of in desktop web design:

  • Columns can resize automatically so the table always fills different screen widths.
    •
  • Cell borders and background colors can enhance readability.
    •
  • With AvantGo Client 5.x you have the option of using JavaScript to do powerful things like sort a table in order by a column when the user clicks the column header.
    •

Disadvantages of tables

Tables also have distinct disadvantages on mobile devices:

  • You can only squeeze in a small number of columns before the table width causes horizontal scrolling on smaller screens.
    •
  • Making columns narrow to prevent horizontal scrolling will decrease readability of text in cells, as a paragraph is "stacked" into one or two words per line.
    •
  • Page size is increased vs. the same content displayed without a table.
    •
  • Page rendering is slowed.
    •

Guidelines for using tables

Whenever you are considering using a table, ask yourself these questions:

  • Can the content be better presented another way?

    • Consider alternative ways of presenting the same content. For example, you may have a table of names addresses and phone numbers. It's laid out with one row per person. This information would be better presented on a small screen in one "column" of regular text (with a <BR> tag at the end of each line) in which name, address, and phone number are stacked for each person, looking more like a mailing label.

  • Would a "simulated" table work just as well for the content?

    • If the content looks best in tabular form, would it work just as well to render it with a fixed width font, with "columns" of data aligned by filling the space in between with the appropriate number of spaces? The <PRE> tag does this quite nicely, as long as you provide the right number of spaces to maintain column alignment.

  • If you do use a table, try to:
    • Eliminate horizontal scrolling on smaller screens. Be sure you test it on a small Palm OS screen and keep adjusting the table tagging as necessary until any horizontal scrolling is eliminated.
    • Let columns size dynamically, so that the table width can expand and contract to fit the available screen width.
    • Keep it lean and simple — for example, set parameters at the table level and avoid using both CELLPADDING and CELLSPACING, avoid nesting tables.


TOC PREV NEXT INDEX