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. (╯°□°)╯︵ ┻━┻

12. (╯°□°)╯︵ ┻━┻

13. • When to use tables
(╯°□°)╯︵ ┻━┻

14. • When to use tables
• Creating structure with HTML
(╯°□°)╯︵ ┻━┻

15. • When to use tables
• Creating structure with HTML
• Designing tables
(╯°□°)╯︵ ┻━┻

16. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
(╯°□°)╯︵ ┻━┻

17. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
(╯°□°)╯︵ ┻━┻

21. When to use tables

22. When to use tables

23. When to use tables
• Sort

24. When to use tables

25. When to use tables
• Sort
• Compare

26. When to use tables

27. When to use tables
• Sort
• Compare
• Cross Reference

28. When to use tables

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

30. When to use tables

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

32. When to use tables
not

33. When to use tables
not

34. <h5>Players:</h5>
<ul>
<li>Daniel Sedin</li>
<li>Henrik Sedin</li>
<li>Jannik Hansen</li>
<li>Bo Horvat</li>
</ul>
When to use tables
not

35. When to use tables
not

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

37. When to use tables
not

38. /* Nicole Sullivan’s Media Object */
<div class="media">
<div class="img">
<img src="" alt="" />
</div>
<div class="body">
…
</div>
</div>
When to use tables
not

39. layout
When to use tables
not

40. Tables Good
• Sort
• Compare
• Cross Reference
• Calculations

41. layout
Tables Bad

43. Creating structure with HTML

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

45. Creating structure with HTML

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

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

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

49. Creating structure with HTML

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

52. <a href=“#revenues”>
<tbody id=“revenues”>

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

54. Creating structure with HTML

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

56. Creating structure with HTML

57. Creating structure with HTML
<th scope=“row”
colspan=“2”>
Team total
</th>

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

60. Designing tables

61. Designing tables

62. Designing tables

63. Designing tables
• Provide a caption

64. Designing tables
• Provide a caption
• Identify columns, rows, and headers

65. Designing tables
• Provide a caption
• Identify columns, rows, and headers
• Enhance readability

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

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

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

69. Designing tables

70. Designing tables

71. Designing tables

72. Designing tables

73. Designing tables

74. John Maeda, Designer
“Simplicity is about subtracting the
obvious and adding the meaningful.”

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

78. Adding style with CSS

79. Adding style with CSS
border-collapse:separate;
border-spacing:2px;

80. Adding style with CSS
border-collapse:separate;
border-spacing:10px;

81. Adding style with CSS
border-collapse:collapse;
border-spacing:10px;

82. Adding style with CSS
caption-side:top;

83. Adding style with CSS
caption-side:top-outside;

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

85. Adding style with CSS
caption-side:right;

86. Adding style with CSS
caption-side:right;

87. Adding style with CSS
vertical-align: middle;

88. Adding style with CSS
.parent{display: table;}
.child{
display: table-cell;
height: 100vh;
vertical-align: middle;

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

90. Adding style with CSS
colgroup { }
col { }

91. Adding style with CSS
colgroup { }
col { }

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

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

94. Adding style with CSS

95. Adding style with CSS
• A note about screen readers

96. layout
Adding style with CSS

97. Adding style with CSS
• A note about screen readers

99. Adapting tables to small screens

100. Adapting tables to small screens
• Shrink

101. Adapting tables to small screens

102. Adapting tables to small screens

103. Adapting tables to small screens

104. Adapting tables to small screens

105. Adapting tables to small screens

106. Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻

107. Adapting tables to small screens

108. Adapting tables to small screens

109. Adapting tables to small screens

110. Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove

111. Adapting tables to small screens

112. Adapting tables to small screens

113. Adapting tables to small screens

114. Adapting tables to small screens

115. Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove
• Scroll

116. Adapting tables to small screens

117. Adapting tables to small screens

118. Adapting tables to small screens

119. Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove
• Scroll
• Replace

120. Adapting tables to small screens

121. Adapting tables to small screens

122. Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove
• Scroll
• Replace
• Combo

123. Adapting tables to small screens

124. Adapting tables to small screens

125. Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove
• Scroll
• Replace
• Combo

127. Case Study

128. Case Study

129. Case Study

130. Case Study

131. Case Study

132. Case Study
<thead>
<tr>
<td></td>
<th colspan=“5”>Desktop></th>
<th colspan=“5”>Mobile</th>
</tr>
<tr>
…

133. Case Study

134. Case Study

135. Case Study

136. Case Study
table,thead,tbody,tr{
display: flex;}
th,td{
display: block;}

137. Case Study

138. Case Study
table,thead,tbody,tr,
th, td{
display: block;}
td:nth-child(2):before{
content: ‘ 💻’;}

139. Case Study

141. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
(╯°□°)╯︵ ┻━┻

142. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
(╯°□°)╯︵ ┻━┻

143. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
(╯°□°)╯︵ ┻━┻

144. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
(╯°□°)╯︵ ┻━┻

146. I Like To Make Websites
Everyone Can Use
stephaniehobson.ca
@stephaniehobson

147. figure {
display: table;
caption-side: bottom;
}
figcaption {
display: table-caption;
}

148. Adding style with CSS
• nth-child zebra striping
• column styling
• vertical-align, white-space
• :hover highlighting

149. Designing tables

150. Designing tables

151. Case Study

152. Notes

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

154. Creating structure with HTML

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

156. Creating structure with HTML

157. Adapting tables to small screens

159. Adapting tables to small screens