Flipping Tables: Displaying Data on Small Screens (2016-02)

Flipping TablesDisplaying Data on Small Screens

Tables

Am I right?

• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS• Adapting tables to small screens• Case Study: MDN compatibility tables

(�°□°)�� �━�

Sorry,

When to use tables

When to use tablesnot

When not to use tables

When not to use tables

<h5>Players:</h5> <ul> <li>Daniel Sedin</li> <li>Henrik Sedin</li> <li>Jannik Hansen</li> <li>Bo Horvat</li> </ul>

When not to use tables

When not to use tables

.players { column-count:2; }

When not to use tables

When not to use tables

/* Nicole Sullivan’s Media Object */ <div class="media"> <div class="img"> <img src="" alt="" /> </div> <div class="body"> Henrick Sedin etc. </div> </div>

layout

When not to use tables

When to use tables

When to use tables

• Sort• Compare• Cross Reference• Calculations

Creating structure with HTML

Creating structure with HTML

<table>

</table>

Creating structure with HTML

Creating structure with HTML

<table> <caption>…</caption> </table>

Creating structure with HTML

<table>

</table>

Creating structure with HTML

<table> <caption>…</caption> <colgroup> <col span=“” class=“”> </colgroup> </table>

Creating structure with HTML

Creating structure with HTML

<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> </table>

Creating structure with HTML

Creating structure with HTML

<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tfoot>…</tfoot> </table>

Creating structure with HTML

Creating structure with HTML

<table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tfoot>…</tfoot> <tbody>…</tbody> </table>

Creating structure with HTML

Creating structure with HTML

<tr> <th scope=“”></th> <td colspan=“”></td> <td rowspan=“”></td> </tr>

Creating structure with HTML<table> <caption> <colgroup span> <col /> <thead> <tfoot> <tbody> <tr> <th scope colspan rowspan> <td colspan rowspan>

Designing tables

Designing tables

Designing tables• Provide a caption• Identify columns, rows, and headers• Enhance readability• Group similar data• Smart defaults

Designing tables• Contrast• Repetition• Alignment• Proximity

Designing tables

– John Maeda

“Simplicity is about subtracting the obvious and adding the

meaningful.”

Designing tables

Designing tables• www.behance.net/gallery/Designing-

Effective-Data-Tables/885004• understandinggraphics.com/design/

data-table-design/ • www.darkhorseanalytics.com/blog/

clear-off-the-table/

Adding style with CSS

Adding style with CSSborder-collapse: collapse; border-spacing: 0;

Adding style with CSScaption-side:bottom;

Adding style with CSSth { } tbody th { } tbody th[scope=“row”] { } th.points { }

Adding style with CSS<colgroup> <col>

tbody td:nth-child(even) { background-color: #ddd; }

Adding style with CSS

Adding style with CSS

tr:nth-child(even) { background-color: #ddd; }

Adding style with CSS

Adding style with CSS

Adding style with CSS• A note about borders and screen

readers

Adapting tables to small screens

Adapting tables to small screens• Shrink

Adapting tables to small screens• Shrink• Flip (linearize)

Adapting tables to small screens

Adapting tables to small screens

Adapting tables to small screens• Shrink• Flip (linearize) • Remove

Adapting tables to small screens

Adapting tables to small screens

Adapting tables to small screens• Shrink• Flip (linearize) • Remove• Scroll

Adapting tables to small screens• Shrink• Flip (linearize) • Remove• Scroll• Replace

Adapting tables to small screens• Shrink• Flip (linearize) • Remove• Scroll• Replace• Combo

Case Study

Case Study

Case Study

Case Study

Case Study

Case Study

Case Study

Case Study

• When to use tables• Creating structure with HTML• Designing tables• Adding style with CSS• Adapting tables to small screens• Case Study: MDN compatibility tables

(�°□°)�� �━�

I Like to Make Websites Everyone Can Use@stephaniehobsonstephaniehobson.ca