Tables have gotten a bad reputation in the last few years as finicky and hard to work with - partly because they’ve been used for the wrong thing (layout) and partly because desktop friendly wide tables don’t adapt to the narrow screens for mobile devices. But, tables are still the best way to present data for comparison and manipulation. So how can we make them as responsive as the rest of our site? This talk will cover design and code tips for making tables more readable on any screen and more adaptable to small screens.

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