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 [email protected]
