Flipping Tables: Displaying Data on Small Screens
2 likes1,812 views
The document discusses the proper use of tables in web design, emphasizing their role in organizing data for sorting, comparison, and calculations. It addresses when to use tables versus other HTML structures, highlights design best practices, and includes styling techniques with CSS. Additionally, it covers how to adapt tables for small screens to enhance usability.
![Adding style with CSS
th { }
tbody th { }
tbody th[scope="row"] { }
th.special { }](https://image.slidesharecdn.com/flippingtablescssdevconf-171010034401/85/Flipping-Tables-Displaying-Data-on-Small-Screens-97-320.jpg)
![Linearize
<td data-head="Goals:">26</td>
td[data-head]::before {
content: attr(data-head);
}](https://image.slidesharecdn.com/flippingtablescssdevconf-171010034401/85/Flipping-Tables-Displaying-Data-on-Small-Screens-124-320.jpg)
![Linearize
<td data-head="Goals:">26</td>
td[data-head]::before {
content: attr(data-head);
}](https://image.slidesharecdn.com/flippingtablescssdevconf-171010034401/85/Flipping-Tables-Displaying-Data-on-Small-Screens-125-320.jpg)
![Case Study
@for $num from 4 through 14 {
th[class^=platform-][colspan=‘#{$num}']{
grid-column-end: span #{$num};
}
}](https://image.slidesharecdn.com/flippingtablescssdevconf-171010034401/85/Flipping-Tables-Displaying-Data-on-Small-Screens-174-320.jpg)
![Case Study
@for $num from 4 through 14 {
th[class^=platform-][colspan=‘#{$num}']{
grid-column-end: span #{$num};
}
}](https://image.slidesharecdn.com/flippingtablescssdevconf-171010034401/85/Flipping-Tables-Displaying-Data-on-Small-Screens-175-320.jpg)
![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; }](https://image.slidesharecdn.com/flippingtablescssdevconf-171010034401/85/Flipping-Tables-Displaying-Data-on-Small-Screens-176-320.jpg)
Flipping Tables: Displaying Data on 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
- 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
- 135. Scroll
- 136. Adapting tables to small screens • Shrink • Linearize or flip ( °□°) • Remove • Scroll • Replace
- 137. Replace
- 138. Replace
- 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
- 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
- 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