Flipping Tables: Displaying Data on Small Screens (2016-08)
1 like•948 views
The document discusses the use of tables in web design, covering when to use them and when not to. It details the process of creating table structures with HTML, designing effective tables, adding styles with CSS, and adapting tables for small screens. Various tips and best practices are provided throughout to enhance usability and readability.
![Adding style with CSS
th { }
tbody th { }
tbody th[scope=“row”] { }
th.points { }](https://image.slidesharecdn.com/flippingtablescascadia-160825193435/85/Flipping-Tables-Displaying-Data-on-Small-Screens-2016-08-89-320.jpg)
Flipping Tables: Displaying Data on Small Screens (2016-08)
- 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
- 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>
- 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 { }
- 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
- 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