Tables

From perpendicular angel knowledgebase
Jump to navigation Jump to search

A table is a way of structuring data in rows and columns so that relationships between information can be discerned and acted upon.

They are also sometimes used/abused to format information on a webpage.

Designing Tables for Reusability by Ada Rafalowicz and Havana Nguyen is a great white-paper style review of the decisions they made at the UX Design Collective regarding data tables.

Data alignment

Column headers should be aligned the same as the data. This aids in readability and makes the data more scannable. In short, it ensures that the eye can follow down the column of data without jumping from one side of the column to the other unnecessarily.

Additional reading

  • Ultimate guide to table UI Patterns by Janko Jovanovic provides a guide to capabilities that well-designed tables implement, including alternate row styling, full-row selection, table grouping, sorting, filtering, pagination, infinite scrolling, fixed headers, headerless tables, expandable rows, and row actions.
  • Commentary on Ultimate guide to table UI Patterns by Theresa Neil recommends the Janko Jovanovic article and adds information about inline editing, super-wide tables, and in-column filtering
  • Responsive Data Tables by Chris Coyier discusses applying responsive design principles to data tables and links out to other examples by Scott Jehl and Todd Parker, among others.
  • A Responsive Accessible Table by Adrian Roselli gives a long detailed example of building a responsive accessible table. 

Additional resources

  • Sencha ext.js Sencha's ext.js library that handles many table capabilities. (See the "Grids" section.)
  • Datatables.net plug-in for jQuery DataTables.net's table-plugin for jQuery is based on the foundations of progressive enhancement and adds interaction controls to HTML tables.