Java TM Look and Feel Design Guidelines: Advanced Topics > Part II: Special Topics > 5: Idioms > Idioms for Arranging a Table   Previous Next Contents/Index/Search


 

Idioms for Arranging a Table

You can enhance the usability of application-provided tables in your application by consistently using the same idioms. This section describes table idioms for:

  • Table appearance
  • Table command placement
  • Column reordering and resizing
  • Row sorting
  • Tree tables

Table Appearance

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 on and 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.)

 Center titles in the column headers of tables, except brief titles of wide text columns that are mostly blank. Center or left-justify brief titles.

 In column headers of tables, include the column's unit of measurement as part of the title, and enclose the unit of measurement in parentheses--for example, CPU Usage(%).

 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.

Grid Lines and Row Striping

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.

The following guidelines help you decide whether to use grid lines, row striping, or neither.

 Do not use grid lines and row striping in the same table.

 Use horizontal and vertical grid lines in cell-selection tables.

 Use horizontal and vertical grid lines in internally editable row-selection tables.

 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.

 In tables without grid lines, ensure that there is no space between cells where grid lines would otherwise be.

 When striping a table, use light gray (RGB 230-230-230 and Hex #E6E6E6) as the background color of the striped rows (the rows whose background color will not be white).

 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.

Drop-Down Arrows in Combo Boxes

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.

Table Command Placement

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:

  • Directly below the table
  • Directly to the right of the table

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

 

Sometimes, representing table commands as buttons is not practical because either:

  • The available screen space is too small.
  • The table is one of several in the same window (the commands' standard mnemonics would be ambiguous).

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

 

If the Edit menu is too long to include the table commands, you can place them instead in a Table menu in the window.

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.

Column Reordering and Column Resizing

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.

 Enable users to reorder table columns.

 If a user reorders a table's columns, use the new column order the next time the user opens that table.

 If users can reorder a table's columns, make each column's title unique within the table.

 Enable users to change the width of table columns.

 If a user changes the widths of a table's columns, use the new widths the next time the user opens that table.

Row Sorting

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.

You can make each column header a control with the following behavior:

  • Clicking a column header makes that column the primary key and sorts the column in the direction that is more useful to users. (Typically, users find an ascending sort more useful.)
  • If the column is already the primary key, clicking the column header inverts the current sort, toggling between an ascending sort and a descending sort.

For more information about row sorting, see Chapter 12 of Java Look and Feel Design Guidelines , 2d ed.

 Enable users to sort tables that typically contain more items than can be displayed at one time.

 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).

 In sorted tables, place a sort indicator in each column by which the table is sorted.

 In columns with sort indicators, place the sort indicator directly after the column's title.

 Omit sort indicators from table columns that, though previously sorted, are no longer sorted.

 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.)

Automatic Row Sorting

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.

Tables with automatic row sorting should conform to all guidelines for row sorting and to the following guidelines for automatic row sorting.

 Provide automatic row sorting in tables unless doing so would slow your application's response--as when tables are too large to sort quickly.

 Sort a row automatically only if keyboard focus is not in that row.

 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.
Previous Next Contents/Index/Search
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner
Java 8 banner (182)