Tables cheat sheet

Find records that fit specific criteria. Compare data. View, edit or add a single row's data. Take actions on records. Decide which of these your table has to serve before choosing features.

Put a human-readable record identifier in the first column, order columns by importance to users, and make filters discoverable, quick and powerful.

Freeze header rows and columns. Help the eye track rows with borders, zebra striping or hover highlighting. Let people hide, reorder and sort columns, and show clearly when they have.

Options are edit-in-place, a modal, a nonmodal panel or an accordion. NN/g recommends nonmodal solutions so the rest of the table stays available for reference.

Inline actions work for one or two options. For more, use checkboxes with batch actions, and include Select all where it applies.

Information, structure and relationships conveyed visually, such as which header belongs to which cell, must be programmatically determinable or available in text.

Content must work at a width equivalent to 320 CSS pixels without scrolling in two directions. Parts that need a two-dimensional layout for usage or meaning are exempt.

Do not use colour as the only way to convey information, indicate an action, prompt a response or distinguish an element. Pair it with text, an icon or a pattern.