Design/Archive/Wikimedia User Interface/Use cases/Tables

Within Wikimedia projects as designers we currently face a enormous amount of very diverse tables. At the same time there's a need to find ways for providing a way for this diverse collection to be more easily consumable on mobile devices. One of the tasks this use case has been started from was https://phabricator.wikimedia.org/T121389

Pau Giner and Volker E. were looking into current table examples and we wanna share this incomplete picture of table representations. In order to understand tables in MediaWiki it also makes sense to start with the Help:Tables page.

Things to consider

• .wikitable
• .wikitable.sortable https://en.wikipedia.org/wiki/Help:Sorting#Making_a_column_unsortable

Examples of tables in this use case

• https://de.wikipedia.org/wiki/Ajax_Amsterdam#Kader_Saison_2015.2F16

Further reading

• Responsive Tables on CSS Tricks and example
• Responsive Table Roundup on CSS Tricks
• CSS only Responsive Tables (from dbushell)
• stacktable.js – Stacking tables on small screens
• FooTable jQuery plugin for tables
• RWD Table Patterns
• tablesorter mobile jQuery
• "wikitable" search on Phabricator
• Huge collection of responsive tables at CodePen