1.
Flipping Tables
Displaying Data on Small Screens
#flipdata

2.
Tables

3.
Am I right?

4.
( °□°)

5.
( °□°)

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

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

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

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

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

11.
Sorry!

12.
When to use tables

13.
When to use tables

14.
When to use tables
• Sort

15.
When to use tables

16.
When to use tables
• Sort
• Compare

17.
When to use tables

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

19.
When to use tables

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

21.
When to use tables

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

23.
When to use tables
not

24.
When to use tables
not

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

26.
When to use tables
not

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

28.
When to use tables
not

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

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

31.
layout
When to use tables
not

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

33.
layout
Tables Bad

34.
Creating structure
with HTML

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

36.
Creating structure with HTML

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

38.
Creating structure with HTML

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

40.
Creating structure with HTML

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

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

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

44.
Creating structure with HTML

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

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

47.
Creating structure with HTML

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

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

50.
Designing tables

51.
Designing tables

52.
Designing tables

53.
Designing tables
• Provide a caption

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

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

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

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

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

59.
Designing tables

60.
Designing tables

61.
Designing tables

62.
Designing tables

63.
Designing tables

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

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

66.
Adding style with CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

82.
Adding style with CSS

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

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

85.
Adding style with CSS

86.
Adding style with CSS
A note about screen readers

87.
layout
Adding style with CSS

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

89.
Adapting tables to
small screens

90.
Adapting tables to small screens
• Shrink

91.
Shrink

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

93.
Shrink

94.
Shrink

95.
Shrink

96.
Shrink

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

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

99.
Linearize

100.
Linearize

101.
Linearize

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

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

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

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

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

107.
Remove

108.
Remove

109.
Remove
Activity

110.
Remove
Nutrition

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

112.
Scroll

113.
Scroll

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

115.
Scroll

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

117.
Replace

118.
Replace

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

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

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

122.
Combo

123.
Combo

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

125.
Example

126.
Example

127.
Example

128.
Example

129.
Example

130.
Example

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

132.
Case Study

133.
Case Study

134.
Case Study

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

136.
Case Study

137.
Case Study

138.
Case Study

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

140.
Case Study

141.
Case Study

142.
Case Study

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

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

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

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

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

148.
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);}

149.
Case Study

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

151.
Case Study

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

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

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

155.
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; }

156.
Case Study

157.
Case Study

158.
Case Study

159.
Case Study

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

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

162.
Case Study

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

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

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

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

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