Data tables like to break our carefully crafted responsive websites. On smaller screens they mess with us when they won’t reflow nicely. They a bit claustrophobic when they don’t have enough space. Stephanie will talk about what makes a table easy to read, show the code that helps, and offer design suggestions for how to display data when there isn’t a lot of space.

1. Flipping Tables
Displaying Data on Small Screens

8. Tables

10. Am I right?

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

12. Sorry,

14. When to use tables

15. When to use tables
not

16. When not to use tables

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

18. When not to use tables

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

20. When not to use tables

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

22. layout
When not to use tables

23. When to use tables

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

26. Creating structure with HTML

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

28. Creating structure with HTML

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

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

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

32. Creating structure with HTML

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

34. Creating structure with HTML

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

36. Creating structure with HTML

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

38. Creating structure with HTML

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

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

42. Designing tables

43. Designing tables

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

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

46. Designing tables

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

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

51. Adding style with CSS

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

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

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

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

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

57. Adding style with CSS

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

59. Adding style with CSS

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

62. Adapting tables to small screens

63. Adapting tables to small screens
• Shrink

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

67. Adapting tables to small screens

68. Adapting tables to small screens

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

70. Adapting tables to small screens

71. Adapting tables to small screens

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

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

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

79. Case Study

80. Case Study

81. Case Study

82. Case Study

83. Case Study

84. Case Study

85. Case Study

86. Case Study

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

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