HTML and CSS Reference
In-Depth Information
Written Communication: Designing Effective Web Tables
The primary purpose of a Web table is to convey data to the reader in a compact, easily
understood way. You can apply several design principles to your Web tables to make them
more effective at presenting data to interested readers:
•
Contrast the data cells from the header cells.
Make it easy for readers to understand your
data by highlighting the header column or row in a different color or font size.
•
Avoid spanning rows and columns unless necessary.
Usability studies have shown that
information can be gleaned quickly when presented in a simple grid layout. Unless data
calls for it, don't break the grid by unnecessarily spanning a cell across the grid.
•
Break the monotony with icons.
If you are repeating the same phrase or word within
a single row or column, consider replacing the text with an icon that conveys the
same message. For example, in a table that describes the features of a product, use
a check mark to indicate whether a particular feature is supported, rather than the
words
yes
or
no
.
•
Alternate the row colors.
A large table with dozens of rows can be difficult for readers
to scan and interpret. Consider using alternative background colors for the table rows to
break the monotony and reduce eye strain.
•
Don't overwhelm the eye with borders.
Cell borders should be used only when they aid
users by separating one cell from another. If they're not needed for this purpose, they
actually can distract from the data. Rather than using borders, apply ample spacing to
your cells to differentiate one data cell from another.
•
Keep it brief.
A table should not extend beyond what will fit compactly within the user's
browser window. If your table is too extensive, consider breaking it into several tables
that focus on different areas of information.
A Web table is judged not on its appearance but on its readability. This can best be
accomplished by using a simple design whose features convey relevant information to read-
ers. A good table gives users the data they want as quickly as possible and makes it easy to
compare one value with another.
Creating Columnar Layouts
Kyle likes the design of the program schedule table. The only remaining change he wants
you to make to the Web page is to break up the introductory paragraph into columns.
Kyle feels that the lines of text in the paragraph are too long, making them diffi cult to
quickly scan and read.
There are several ways to break page content into columns. You can separate the
content into different block elements and fl oat them as you did with the content in
Tutorial 4. You also can nest the content in a two-column table with a single table row.
Both of these options suffer from forcing the column layout to be static, as the content
of each column is specifi ed in the HTML markup tags. Ideally, in a column layout, the
content should fl ow automatically from one column to the next as new text is inserted
or old text is deleted. A third option that provides for a dynamic column layout is to
use the column styles from CSS3. This is the approach you'll take.
Usability studies have
shown that between 8 and
12 words is the ideal line
length to enhance reading
comprehension.
