In online help, dynamic (interactive) tables can provide some additional value compared to static tables on paper.
Some help authoring tools come with integrated support to create dynamic tables. In all other cases, the easiest way to implement dynamic tables is by using one of the major (open source) JavaScript libraries, such as jQuery or MooTools.
|
Alle Abschnitte ein- / ausblenden
In a sortable table, when users click a column heading, the table is sorted alphabetically or numerically according to this column.
Provide some visual clue that column headings are clickable. Small triangles or arrow symbols are the most commonly used indicators. The advantages of triangles and arrows are:
▪Triangles and arrows can indicate the current sort order.
▪You can provide one triangle or arrow to sort in ascending order, and one to sort in descending order.
In addition to the triangles or arrows, you can also use color to highlight the column that currently determines the sort order, or you can make the column heading bold.

|
In a table with expandable areas, only that part of the information is visible by default that’s important for all readers. Details that concern only a minority of readers are hidden. When readers click an expandable row or column, the table dynamically expands. When they click again, the table shrinks back to its original size (siehe auch Structuring: Layer information).
You can design a table so that only parts of a row or parts of a column can be hidden, or you can design the table so that complete rows or complete columns can be hidden.
Always provide a visual clue that a row or column can be expanded or collapsed. Triangle symbols are commonly used for this purpose.


|
Dynamic highlighting effects are reading aids that are especially helpful in large tables. The highlighting can prevent the readers’ eyes from losing track of the current row and column.
When readers hold the mouse pointer over a table cell, you can highlight:
▪single table cells
▪complete rows or complete columns
▪relationships




To achieve the highlighting effect, you can use:
▪a distinction by color
▪a distinction by size
▪a combination of both color and size



|