1. Flipping Tables
Displaying Data on Small Screens
#flipdata

11. Tables

13. Am I right?

14. ( °□°)

15. ( °□°)

16. • When to use tables
( °□°)

17. • When to use tables
• Creating structure with HTML
( °□°)

18. • When to use tables
• Creating structure with HTML
• Designing tables
( °□°)

19. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
( °□°)

20. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
( °□°)

21. Sorry!

26. When to use tables

27. When to use tables

28. When to use tables
• Sort

29. When to use tables

30. When to use tables
• Sort
• Compare

31. When to use tables

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

33. When to use tables

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

35. When to use tables

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

37. When to use tables
not

38. When to use tables
not

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

40. When to use tables
not

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

42. When to use tables
not

43. img {
float: left;
}
When to use tables
not

44. /* 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

45. layout
When to use tables
not

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

47. layout
Tables Bad

49. Creating structure
with HTML

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

51. Creating structure with HTML

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

53. Creating structure with HTML

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

55. Creating structure with HTML

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

58. <a href=“#revenues”>
<a href=“#expenses”>
<tbody id=“revenues”>…
<tbody id=“expenses”>…

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

60. Creating structure with HTML

61. Creating structure with HTML
<tr>
<th scope=“row"></th>
<td></td>
<td></td>
</tr>

62. Creating structure with HTML
<tr>
…
<td colspan=""></td>
<td rowspan=""></td>
</tr>

63. Creating structure with HTML

64. Creating structure with HTML
<th scope="row" colspan="2">
Team total
</th>

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

66. Designing tables

67. Designing tables

69. Designing tables

70. Designing tables
• Provide a caption

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

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

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

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

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

76. Designing tables

77. Designing tables

78. Designing tables

79. Designing tables

80. Designing tables

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

83. Designing tables
• www.darkhorseanalytics.com/blog/
clear-off-the-table/
• www.behance.net/gallery/Designing-
Effective-Data-Tables/885004
• understandinggraphics.com/design/
data-table-design/

85. Adding style with CSS

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

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

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

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

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

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

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

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

94. figure {
display: table;
caption-side: bottom; }
figcaption {
display: table-caption; }
Adding style with CSS

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

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

97. Adding style with CSS
th { }
tbody th { }
tbody th[scope="row"] { }
th.special { }

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

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

100. <col class=“points">
.points {
background-color: #eee; }
Adding style with CSS

101. Adding style with CSS

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

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

104. Adding style with CSS

105. Adding style with CSS
A note about screen readers

106. layout
Adding style with CSS

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

109. Adapting tables to
small screens

110. Adapting tables to small screens
• Shrink

111. Shrink

112. Shrink
<th><abbr title=“Points”>P</abbr></th>
@media (min-width: 64em) {
abbr { font-size: 0;}
abbr::after {
content: attr(abbr);
font-size: 1rem;

113. Shrink

114. Shrink

115. Shrink

116. Shrink

117. Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)

118. Linearize
table, thead, tbody, tfoot,
tr, th, td {
display: block;
}

119. Linearize

120. Linearize

121. Linearize

122. Linearize
td:nth-child(3)::before {
content: 'Goals:';
}
td:nth-child(4)::before {
content: 'Assists:';
}

123. Linearize
.goals::before {
content: 'Goals:'; }
.assists::before {
content: 'Assists:'; }
.points::before {
content: 'Points:';}

124. Linearize
<td data-head="Goals:">26</td>
td[data-head]::before {
content: attr(data-head);
}

125. Linearize
<td data-head="Goals:">26</td>
td[data-head]::before {
content: attr(data-head);
}

126. Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove

127. Remove

128. Remove

129. Remove
Activity

130. Remove
Nutrition

131. Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll

132. Scroll

133. Scroll

134. Scroll
table{
display: block;
overflow: scroll;
}

135. Scroll

136. Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
• Replace

137. Replace

138. Replace

139. Replace
0
1.25
2.5
3.75
5
Jan Feb Mar Apr

140. First quarter profits rose
2.5%. See the 2016 annual
report for the breakdown.
Replace

141. Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
• Replace
• Combo

142. Combo

143. Combo

144. Example
http://v6.robweychert.com/blog/2017/10/robtober/

145. Example

146. Example

147. Example

148. Example

149. Example

150. Example

151. Combo
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
• Replace
• Combo

153. Case Study

154. Case Study

155. Case Study

156. Case Study
• github.com/mdn/browser-compat-data
• npm install mdn-browser-compat-data

157. Case Study

158. Case Study

159. Case Study

160. Case Study
<thead>
<tr>
<th colspan="5">Desktop></th>
<th colspan="5">Mobile</th>
</tr>
<tr>
<th>Chrome</th>
<th>Firefox</th>

161. Case Study

162. Case Study

163. Case Study

164. Case Study
@media
(min-width: 47.9385em) and
(max-width: 63.9375em) {
…
}

165. Case Study
@supports (display: grid) {
…
}

166. Case Study
.bc-table tr {
display: grid;
}

167. Case Study
.bc-table-10 tr {
grid-template-columns:
repeat(10, 1fr);
}

168. Case Study
@for $num from 4 through 14{
.bc-table-#{$num} tr {
grid-template-columns:
repeat(#{$num}, 1fr);
}
}

169. Case Study
.bc-table-4 tr {
grid-template-columns:repeat(4, 1fr);}
.bc-table-5 tr {
grid-template-columns:repeat(5, 1fr);}
.bc-table-6 tr {
grid-template-columns:repeat(6, 1fr);}

170. Case Study

171. Case Study
.bc-table tbody th {
grid-column-start: 1;
grid-column-end: last-line;
}

172. Case Study

173. Case Study
.platform-desktop,
.platform-mobile {
grid-column-end: span 5;
}

174. Case Study
@for $num from 4 through 14 {
th[class^=platform-][colspan=‘#{$num}']{
grid-column-end: span #{$num};
}
}

175. Case Study
@for $num from 4 through 14 {
th[class^=platform-][colspan=‘#{$num}']{
grid-column-end: span #{$num};
}
}

176. Case Study
th[class^=platform-][colspan='4'] {
grid-column-end: span 4; }
th[class^=platform-][colspan='5'] {
grid-column-end: span 5; }
th[class^=platform-][colspan='6'] {
grid-column-end: span 6; }

177. Case Study

178. Case Study

179. Case Study

180. Case Study

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

182. Case Study
td.browser-firefox:before {
content: ' ';
}

183. Case Study

185. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
( °□°)

186. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
( °□°)

187. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
( °□°)

188. • When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
( °□°)

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