|Java TM Look and Feel Design Guidelines: Advanced Topics > Part II: Special Topics > 5: Idioms > Idioms for Arranging a Table||
You can increase the visual appeal and readability of your application's tables by using appropriate text formats, background colors, and line settings. This section provides guidelines for defining the appearance of tables.
Figure 49 shows a table that follows the guidelines for appearance. Specific guidelines on table sorting, primary-sort columns, sort indicators, and row striping are provided later in this section.Figure 49 Table Conforming to Guidelines for Appearance
Align the contents of table cells based on their information type. For cells containing numeric values (not character strings with numerals), use decimal alignment. For cells containing long text, use left alignment. For cells containing graphics or short words (like keywords, such as
off), use center alignment.
Use headline capitalization in column headers of tables. (For a description of headline capitalization, see Chapter 4 of Java Look and Feel Design Guidelines , 2d ed.)
In tables, make each column wide enough by default to display the column's title and the contents of typical cells without clipping. In columns where a typical cell's contents are unusually long (for example, a file's full pathname), make the default column width sufficient to display the column's title and the main part of a typical cell's contents--for example, just the file name, clipping the rest of the full pathname. Optionally, if a column header is much longer than the typical contents of the column's cells, you can divide the column header into two or more lines.
Place at least three pixels of blank space between a table cell's contents and the cell's left edge. Likewise, place at least three pixels of blank space between the cell's contents and the cell's right edge.
Your application should provide the code for inserting blank space between a table cell's contents and the cell's edges.
You can often make tables easier to read by using grid line s or row striping . Grid lines are horizontal or vertical lines that separate a table's rows or columns. Row striping is the technique of using one background color for a table's even-numbered rows and a different background color for its odd-numbered rows.
Not all tables should have grid lines or row striping. For example, most tables with editable fields should not have row striping. Short, noneditable tables listing file names or properties rarely need grid lines or row striping.
Do not use grid lines in row-selection tables that are noneditable or are externally editable. Instead, use row striping if the table has approximately six columns or more. If the table has fewer columns, use neither grid lines nor row striping.
If a table has grid lines, display them in the color Secondary 2, as described in Chapter 4 of Java Look and Feel Design Guidelines , 2d ed.
When striping a table row, stripe all its components. For example, ensure that the row's combo boxes (if any) have the same background color as the rest of the row.
In tables with cells that contain combo box es, you can sometime enhance table appearance by controlling when drop-down arrow s are displayed. By default, the drop-down arrow of each combo box is always displayed, as shown in Figure 49. Although this default behavior is preferred in most tables, displaying all the drop-down arrows continuously can create clutter in tables with many combo boxes. To avoid clutter, display the drop-down arrow of each combo box only while that box is selected.
For information about where to place table commands, see the next section. For more information on defining the appearance of tables, see Chapter 12 of Java Look and Feel Design Guidelines , 2d ed.
If most of a table's cells contain combo boxes, display the drop-down arrow of each combo box only while that box is selected.
A table can have associated commands--such as New Row and Move Row Up--that enable users to manipulate the table. Typically, the correct way to represent such commands is as a command button row located either:
Figure 50 shows a table with command buttons directly below it.Figure 50 Table With Command Buttons Below
Figure 51 shows a table with command buttons directly on the right.Figure 51 Table With Command Buttons on the Right
Under such conditions, you can represent a table's commands as menu items in the window's Edit menu, if there is one. Figure 52 shows table commands in an Edit menu.Figure 52 Table Commands in a Window's Edit Menu
Figure 53 Table Commands in a Window's Table Menu
When providing commands for manipulating a table, place them in a command button row directly below the table or directly to the right of it. If you cannot, place the commands in the window's Edit menu or Table menu.
If you place table commands in a menu, also place appropriate table commands in the contextual menus for the table's rows and cells. In addition, you can place table commands in a toolbar.
Users sometimes need to reorder a table's columns (by moving them left or right) or resize a table's columns (by changing their width). The following guidelines on column reordering and column resizing supplement those in Chapter 12 of Java Look and Feel Design Guidelines , 2d ed.
If a user changes the widths of a table's columns, use the new widths the next time the user opens that table.
When viewing a sorted table, users need to know by which columns the table is sorted. These columns are called sort key s. To indicate each of a table's sort keys, your application can display a sort indicator --a small triangular graphic in the column header. Figure 54 shows sort indicators in the columns of an email application.Figure 54 Sort Indicators in the Columns of a Table
A sort indicator shows that a column is sorted and in which direction--ascending (for example, from A to Z) or descending (for example, from Z to A). An upward-pointing sort indicator indicates an ascending sort . A downward-pointing sort indicator indicates a descending sort .
A bold column header indicates the table's primary key , the main column by which the table is sorted.
For more information about row sorting, see Chapter 12 of Java Look and Feel Design Guidelines , 2d ed.
If a column currently determines a table's sort order, use bold highlighting to display that column's header text. If anything invalidates the sort order, omit the bold highlighting from the column header text. (The column that currently determines a table's sort order is a user's most recently sorted column or, if rows are sorted automatically, the primary-key column).
When sorting a table already sorted by a different column, perform a stable sort . In a stable sort, previously sorted rows (if any) retain their positions relative to one another, if they have identical values in the new sort column.
Provide explicit, keyboard-accessible commands for sorting. Ensure that each command operates on the column containing the selection. In tables where users can select a range of cells, make commands for sorting unavailable when the selection includes more than one cell.
When providing sort commands, put them in places consistent with where you put your application's other commands--for example, on buttons, in a toolbar, in a drop-down menu, or in a contextual menu. (For more information, see Table Command Placement.)
Your application can provide tables that are automatically sorted each time users edit a row or add one. This feature, called automatic row sorting , offers users the convenience of knowing that a table's rows are always sorted.
When providing automatic row sorting, you can enable users to control which table columns are sort keys. In each table, you can enable users to request automatic sorting on a single column (1-column sorting) or on up to n columns ( n -column sorting). Your application sets the value of n .
You can enable users to specify the sort columns by, for example, clicking column headers in the table. However, you must also provide a keyboard-accessible alternative. For n -column sorting, you can enable users to specify sort columns by opening a dialog box from a menu item or a button.
In tables with automatic row sorting, enable users to choose which columns are used as sort keys.
|Java Look and Feel Design Guidelines: Advanced Topics.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.