Tables - Revision history

Kirabug at 18:28, 1 June 2020

2020-06-01T18:28:26Z

← Older revision		Revision as of 11:28, 1 June 2020
Line 1:		Line 1:
			[[Category: Design]]
	A table is a way of structuring data in rows and columns so that relationships between information can be discerned and acted upon.		A table is a way of structuring data in rows and columns so that relationships between information can be discerned and acted upon.

Kirabug at 17:52, 1 June 2020

2020-06-01T17:52:44Z

← Older revision		Revision as of 10:52, 1 June 2020
Line 3:		Line 3:
	They are also sometimes used/abused to format information on a webpage.		They are also sometimes used/abused to format information on a webpage.

	[[https://uxdesign.cc/designing-tables-for-reusability-490a3760533 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.		[https://uxdesign.cc/designing-tables-for-reusability-490a3760533 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==		==Data alignment==

Kirabug at 17:50, 1 June 2020

2020-06-01T17:50:52Z

← Older revision		Revision as of 10:50, 1 June 2020
Line 16:		Line 16:
	* [http://adrianroselli.com/2017/11/a-responsive-accessible-table.html A Responsive Accessible Table] by Adrian Roselli gives a long detailed example of building a responsive accessible table.		* [http://adrianroselli.com/2017/11/a-responsive-accessible-table.html A Responsive Accessible Table] by Adrian Roselli gives a long detailed example of building a responsive accessible table.

	~~h2.~~ Additional resources		==Additional resources==

	* [http://examples.sencha.com/extjs/6.0.0/examples/ Sencha ext.js] Sencha's ext.js library that handles many table capabilities. (See the "Grids" section.)		* [http://examples.sencha.com/extjs/6.0.0/examples/ Sencha ext.js] Sencha's ext.js library that handles many table capabilities. (See the "Grids" section.)
	* [https://datatables.net 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.		* [https://datatables.net 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.

Kirabug: Created page with "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 for..."

2020-06-01T17:49:52Z

Created page with "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 for..."

New page

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.

[[https://uxdesign.cc/designing-tables-for-reusability-490a3760533 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==

* [http://www.jankoatwarpspeed.com/ultimate-guide-to-table-ui-patterns/ 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 [http://designingwebinterfaces.com/ultimate-guide-to-table-ui-patterns 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
* [https://css-tricks.com/responsive-data-tables/ 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.
* [http://adrianroselli.com/2017/11/a-responsive-accessible-table.html A Responsive Accessible Table] by Adrian Roselli gives a long detailed example of building a responsive accessible table. 

h2. Additional resources

* [http://examples.sencha.com/extjs/6.0.0/examples/ Sencha ext.js] Sencha's ext.js library that handles many table capabilities. (See the "Grids" section.)
* [https://datatables.net 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.