Table

Usage

When to use

Use a table in the following cases:

• When there is a complex data set that the user needs to inspect for patterns and insights.
• When there is data that only consists of many entries in the same data structure.

General construction

A table consists of the following elements:

1. Table head

• The table head describes the content in the column.
• Column headings match the text alignment in the column.

2. Table body

• The table body contains the table data.
• Text is left aligned.
• Numeric values align right and numeric identifiers, for example serial numbers, align left.

Types

There are the following table types:

Standard table

Use a standard table as a standalone component. A standard table fills all available space.

Framed table

Inside of container elements use a framed table.

Small table

A small table is more compact as it can hold a larger number of rows in the same vertical space.

Small and framed table

A small table can also be shown within a container.

Table with leading column

Instead of a table header in the first row, it can be shown in the first column.

Table with alternating row

Alternating table rows help users scan and differentiate rows of data. A table with alternating rows can also be a framed table.

Do’s & Don’ts

• Use a table size that fits the amount of data it contains.
• Don’t use a page filling table if the individual columns are too far spread out.

• Align numeric values to the right and text to the left.
• Don’t left-align all data types.

• Present columns in a logical order.
• Don’t put secondary information to the front.