1.
Flipping Tables
Displaying Data on Small Screens

2.
Tables

3.
Am I right?

4.
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
• Case Study: MDN compatibility tables
( °□°) ━

5.
Sorry,

6.
When to use tables

7.
When to use tables
not

8.
When not to use tables

9.
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>

10.
When not to use tables

11.
When not to use tables
.players {
column-count:2;
}

12.
When not to use tables

13.
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>

14.
layout
When not to use tables

15.
When to use tables

16.
When to use tables
• Sort
• Compare
• Cross Reference
• Calculations

17.
Creating structure with HTML

18.
Creating structure with HTML
<table>
</table>

19.
Creating structure with HTML

20.
Creating structure with HTML
<table>
<caption>…</caption>
</table>

21.
Creating structure with HTML
<table>
</table>

22.
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>
<col span=“” class=“”>
</colgroup>
</table>

23.
Creating structure with HTML

24.
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
</table>

25.
Creating structure with HTML

26.
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tfoot>…</tfoot>
</table>

27.
Creating structure with HTML

28.
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tfoot>…</tfoot>
<tbody>…</tbody>
</table>

29.
Creating structure with HTML

30.
Creating structure with HTML
<tr>
<th scope=“”></th>
<td colspan=“”></td>
<td rowspan=“”></td>
</tr>

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

32.
Designing tables

33.
Designing tables

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

35.
Designing tables
• Contrast
• Repetition
• Alignment
• Proximity

36.
Designing tables

37.
– John Maeda
“Simplicity is about subtracting the
obvious and adding the
meaningful.”
Designing tables

38.
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/

39.
Adding style with CSS

40.
Adding style with CSS
border-collapse: collapse;
border-spacing: 0;

41.
Adding style with CSS
caption-side:bottom;

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

43.
Adding style with CSS
<colgroup>
<col>

44.
tbody td:nth-child(even) {
background-color: #ddd;
}
Adding style with CSS

45.
Adding style with CSS

46.
tr:nth-child(even) {
background-color: #ddd;
}
Adding style with CSS

47.
Adding style with CSS

48.
Adding style with CSS
• A note about borders and screen
readers

49.
Adapting tables to small screens

50.
Adapting tables to small screens
• Shrink

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

52.
Adapting tables to small screens

53.
Adapting tables to small screens

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

55.
Adapting tables to small screens

56.
Adapting tables to small screens

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

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

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

60.
Case Study

61.
Case Study

62.
Case Study

63.
Case Study

64.
Case Study

65.
Case Study

66.
Case Study

67.
Case Study

68.
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
• Case Study: MDN compatibility tables
( °□°) ━

69.
I Like to Make Websites
Everyone Can Use
@stephaniehobson
stephaniehobson.ca