Flipping Tables
Displaying Data on Small Screens
Tables
Am I right?
(╯°□°)╯︵ ┻━┻
(╯°□°)╯︵ ┻━┻
• When to use tables
(╯°□°)╯︵ ┻━┻
• When to use tables
• Creating structure with HTML
(╯°□°)╯︵ ┻━┻
• When to use tables
• Creating structure with HTML
• Designing tables
(╯°□°)╯︵ ┻━┻
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
(╯°□°)╯︵ ┻━┻
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small ...
When to use tables
When to use tables
When to use tables
• Sort
When to use tables
When to use tables
• Sort
• Compare
When to use tables
When to use tables
• Sort
• Compare
• Cross Reference
When to use tables
When to use tables
• Sort
• Compare
• Cross Reference
• Calculations
When to use tables
When to use tables
• Sort
• Compare
• Cross Reference
• Calculations
When to use tables
not
When to use tables
not
<h5>Players:</h5>
<ul>
<li>Daniel Sedin</li>
<li>Henrik Sedin</li>
<li>Jannik Hansen</li>
<li>Bo Horvat</li>
</ul>
When to...
When to use tables
not
.players {
column-count:2;
}
When to use tables
not
When to use tables
not
/* Nicole Sullivan’s Media Object */
<div class="media">
<div class="img">
<img src="" alt="" />
</div>
<div class="body">...
layout
When to use tables
not
Tables Good
• Sort
• Compare
• Cross Reference
• Calculations
layout
Tables Bad
Creating structure with HTML
Creating structure with HTML
<table>
</table>
Creating structure with HTML
Creating structure with HTML
<table>
<caption>…</caption>
</table>
Creating structure with HTML
<table>
</table>
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>
<col span=“” class=“”>
</colgroup>
</table>
Creating structure with HTML
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tbody>…</tbody>
<tfoot>...
<a href=“#revenues”>
<tbody id=“revenues”>
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tbody>…</tbody>
<tfoot>...
Creating structure with HTML
Creating structure with HTML
<tr>
<th scope=“”></th>
<td colspan=“”></td>
<td rowspan=“”></td>
</tr>
Creating structure with HTML
Creating structure with HTML
<th scope=“row”
colspan=“2”>
Team total
</th>
Creating structure with HTML
<table>
<caption>
<colgroup span>
<col />
<thead>
<tbody>
<tr>
<th scope colspan rowspan>
<td...
Designing tables
Designing tables
Designing tables
Designing tables
• Provide a caption
Designing tables
• Provide a caption
• Identify columns, rows, and headers
Designing tables
• Provide a caption
• Identify columns, rows, and headers
• Enhance readability
Designing tables
• Provide a caption
• Identify columns, rows, and headers
• Enhance readability
• Group similar data
Designing tables
• Provide a caption
• Identify columns, rows, and headers
• Enhance readability
• Group similar data
• Sm...
Designing tables
• Contrast
• Repetition
• Alignment
• Proximity
Designing tables
Designing tables
Designing tables
Designing tables
Designing tables
John Maeda, Designer
“Simplicity is about subtracting the
obvious and adding the meaningful.”
Designing tables
• www.behance.net/gallery/Designing-
Effective-Data-Tables/885004
• understandinggraphics.com/design/
dat...
Adding style with CSS
Adding style with CSS
border-collapse:separate;
border-spacing:2px;
Adding style with CSS
border-collapse:separate;
border-spacing:10px;
Adding style with CSS
border-collapse:collapse;
border-spacing:10px;
Adding style with CSS
caption-side:top;
Adding style with CSS
caption-side:top-outside;
Adding style with CSS
caption-side:bottom;
Adding style with CSS
caption-side:right;
Adding style with CSS
caption-side:right;
Adding style with CSS
vertical-align: middle;
Adding style with CSS
.parent{display: table;}
.child{
display: table-cell;
height: 100vh;
vertical-align: middle;
Adding style with CSS
th { }
tbody th { }
tbody th[scope=“row”] { }
th.points { }
Adding style with CSS
colgroup { }
col { }
Adding style with CSS
colgroup { }
col { }
tbody td:nth-child(5){
background-color:#ddd;
}
Adding style with CSS
Adding style with CSS
tr:nth-child(even){
background-color:#ddd;
}
Adding style with CSS
Adding style with CSS
• A note about screen readers
layout
Adding style with CSS
Adding style with CSS
• A note about screen readers
Adapting tables to small screens
Adapting tables to small screens
• Shrink
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove
• Scroll
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove
• Scroll
• Replace
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove
• Scroll
• Replace
• Combo
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
• Shrink
• Linearize or flip (╯°□°)╯︵ ┻━┻
• Remove
• Scroll
• Replace
• Combo
Case Study
Case Study
Case Study
Case Study
Case Study
Case Study
<thead>
<tr>
<td></td>
<th colspan=“5”>Desktop></th>
<th colspan=“5”>Mobile</th>
</tr>
<tr>
…
Case Study
Case Study
Case Study
Case Study
table,thead,tbody,tr{
display: flex;}
th,td{
display: block;}
Case Study
Case Study
table,thead,tbody,tr,
th, td{
display: block;}
td:nth-child(2):before{
content: ‘ 💻’;}
Case Study
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small ...
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small ...
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small ...
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small ...
I Like To Make Websites
Everyone Can Use
stephaniehobson.ca
@stephaniehobson
figure {
display: table;
caption-side: bottom;
}
figcaption {
display: table-caption;
}
Adding style with CSS
• nth-child zebra striping
• column styling
• vertical-align, white-space
• :hover highlighting
Designing tables
Designing tables
Case Study
Notes
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
</table>
Creating structure with HTML
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tbody>…</tbody>
</table>
Creating structure with HTML
Adapting tables to small screens
Adapting tables to small screens
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
Upcoming SlideShare
Loading in …5
×

Flipping Tables: Displaying Data on Small Screens (2016-08)

154 views

Published on

Data tables like to break our carefully crafted responsive websites. On smaller screens they mess with us when they won’t reflow nicely. They a bit claustrophobic when they don’t have enough space. Stephanie will talk about what makes a table easy to read, show the code that helps, and offer design suggestions for how to display data when there isn’t a lot of space.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
154
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flipping Tables: Displaying Data on Small Screens (2016-08)

  1. 1. Flipping Tables Displaying Data on Small Screens
  2. 2. Tables
  3. 3. Am I right?
  4. 4. (╯°□°)╯︵ ┻━┻
  5. 5. (╯°□°)╯︵ ┻━┻
  6. 6. • When to use tables (╯°□°)╯︵ ┻━┻
  7. 7. • When to use tables • Creating structure with HTML (╯°□°)╯︵ ┻━┻
  8. 8. • When to use tables • Creating structure with HTML • Designing tables (╯°□°)╯︵ ┻━┻
  9. 9. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS (╯°□°)╯︵ ┻━┻
  10. 10. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens (╯°□°)╯︵ ┻━┻
  11. 11. When to use tables
  12. 12. When to use tables
  13. 13. When to use tables • Sort
  14. 14. When to use tables
  15. 15. When to use tables • Sort • Compare
  16. 16. When to use tables
  17. 17. When to use tables • Sort • Compare • Cross Reference
  18. 18. When to use tables
  19. 19. When to use tables • Sort • Compare • Cross Reference • Calculations
  20. 20. When to use tables
  21. 21. When to use tables • Sort • Compare • Cross Reference • Calculations
  22. 22. When to use tables not
  23. 23. When to use tables not
  24. 24. <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
  25. 25. When to use tables not
  26. 26. .players { column-count:2; } When to use tables not
  27. 27. When to use tables not
  28. 28. /* 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
  29. 29. layout When to use tables not
  30. 30. Tables Good • Sort • Compare • Cross Reference • Calculations
  31. 31. layout Tables Bad
  32. 32. Creating structure with HTML
  33. 33. Creating structure with HTML <table> </table>
  34. 34. Creating structure with HTML
  35. 35. Creating structure with HTML <table> <caption>…</caption> </table>
  36. 36. Creating structure with HTML <table> </table>
  37. 37. Creating structure with HTML <table> <caption>…</caption> <colgroup> <col span=“” class=“”> </colgroup> </table>
  38. 38. Creating structure with HTML
  39. 39. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot> </table>
  40. 40. <a href=“#revenues”> <tbody id=“revenues”>
  41. 41. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tbody>…</tbody> <tfoot>…</tfoot> </table>
  42. 42. Creating structure with HTML
  43. 43. Creating structure with HTML <tr> <th scope=“”></th> <td colspan=“”></td> <td rowspan=“”></td> </tr>
  44. 44. Creating structure with HTML
  45. 45. Creating structure with HTML <th scope=“row” colspan=“2”> Team total </th>
  46. 46. Creating structure with HTML <table> <caption> <colgroup span> <col /> <thead> <tbody> <tr> <th scope colspan rowspan> <td colspan rowspan> <tfoot>
  47. 47. Designing tables
  48. 48. Designing tables
  49. 49. Designing tables
  50. 50. Designing tables • Provide a caption
  51. 51. Designing tables • Provide a caption • Identify columns, rows, and headers
  52. 52. Designing tables • Provide a caption • Identify columns, rows, and headers • Enhance readability
  53. 53. Designing tables • Provide a caption • Identify columns, rows, and headers • Enhance readability • Group similar data
  54. 54. Designing tables • Provide a caption • Identify columns, rows, and headers • Enhance readability • Group similar data • Smart defaults
  55. 55. Designing tables • Contrast • Repetition • Alignment • Proximity
  56. 56. Designing tables
  57. 57. Designing tables
  58. 58. Designing tables
  59. 59. Designing tables
  60. 60. Designing tables
  61. 61. John Maeda, Designer “Simplicity is about subtracting the obvious and adding the meaningful.”
  62. 62. 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/
  63. 63. Adding style with CSS
  64. 64. Adding style with CSS border-collapse:separate; border-spacing:2px;
  65. 65. Adding style with CSS border-collapse:separate; border-spacing:10px;
  66. 66. Adding style with CSS border-collapse:collapse; border-spacing:10px;
  67. 67. Adding style with CSS caption-side:top;
  68. 68. Adding style with CSS caption-side:top-outside;
  69. 69. Adding style with CSS caption-side:bottom;
  70. 70. Adding style with CSS caption-side:right;
  71. 71. Adding style with CSS caption-side:right;
  72. 72. Adding style with CSS vertical-align: middle;
  73. 73. Adding style with CSS .parent{display: table;} .child{ display: table-cell; height: 100vh; vertical-align: middle;
  74. 74. Adding style with CSS th { } tbody th { } tbody th[scope=“row”] { } th.points { }
  75. 75. Adding style with CSS colgroup { } col { }
  76. 76. Adding style with CSS colgroup { } col { }
  77. 77. tbody td:nth-child(5){ background-color:#ddd; } Adding style with CSS
  78. 78. Adding style with CSS tr:nth-child(even){ background-color:#ddd; }
  79. 79. Adding style with CSS
  80. 80. Adding style with CSS • A note about screen readers
  81. 81. layout Adding style with CSS
  82. 82. Adding style with CSS • A note about screen readers
  83. 83. Adapting tables to small screens
  84. 84. Adapting tables to small screens • Shrink
  85. 85. Adapting tables to small screens
  86. 86. Adapting tables to small screens
  87. 87. Adapting tables to small screens
  88. 88. Adapting tables to small screens
  89. 89. Adapting tables to small screens
  90. 90. Adapting tables to small screens • Shrink • Linearize or flip (╯°□°)╯︵ ┻━┻
  91. 91. Adapting tables to small screens
  92. 92. Adapting tables to small screens
  93. 93. Adapting tables to small screens
  94. 94. Adapting tables to small screens • Shrink • Linearize or flip (╯°□°)╯︵ ┻━┻ • Remove
  95. 95. Adapting tables to small screens
  96. 96. Adapting tables to small screens
  97. 97. Adapting tables to small screens
  98. 98. Adapting tables to small screens
  99. 99. Adapting tables to small screens • Shrink • Linearize or flip (╯°□°)╯︵ ┻━┻ • Remove • Scroll
  100. 100. Adapting tables to small screens
  101. 101. Adapting tables to small screens
  102. 102. Adapting tables to small screens
  103. 103. Adapting tables to small screens • Shrink • Linearize or flip (╯°□°)╯︵ ┻━┻ • Remove • Scroll • Replace
  104. 104. Adapting tables to small screens
  105. 105. Adapting tables to small screens
  106. 106. Adapting tables to small screens • Shrink • Linearize or flip (╯°□°)╯︵ ┻━┻ • Remove • Scroll • Replace • Combo
  107. 107. Adapting tables to small screens
  108. 108. Adapting tables to small screens
  109. 109. Adapting tables to small screens • Shrink • Linearize or flip (╯°□°)╯︵ ┻━┻ • Remove • Scroll • Replace • Combo
  110. 110. Case Study
  111. 111. Case Study
  112. 112. Case Study
  113. 113. Case Study
  114. 114. Case Study
  115. 115. Case Study <thead> <tr> <td></td> <th colspan=“5”>Desktop></th> <th colspan=“5”>Mobile</th> </tr> <tr> …
  116. 116. Case Study
  117. 117. Case Study
  118. 118. Case Study
  119. 119. Case Study table,thead,tbody,tr{ display: flex;} th,td{ display: block;}
  120. 120. Case Study
  121. 121. Case Study table,thead,tbody,tr, th, td{ display: block;} td:nth-child(2):before{ content: ‘ 💻’;}
  122. 122. Case Study
  123. 123. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens (╯°□°)╯︵ ┻━┻
  124. 124. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens (╯°□°)╯︵ ┻━┻
  125. 125. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens (╯°□°)╯︵ ┻━┻
  126. 126. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens (╯°□°)╯︵ ┻━┻
  127. 127. I Like To Make Websites Everyone Can Use stephaniehobson.ca @stephaniehobson
  128. 128. figure { display: table; caption-side: bottom; } figcaption { display: table-caption; }
  129. 129. Adding style with CSS • nth-child zebra striping • column styling • vertical-align, white-space • :hover highlighting
  130. 130. Designing tables
  131. 131. Designing tables
  132. 132. Case Study
  133. 133. Notes
  134. 134. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> </table>
  135. 135. Creating structure with HTML
  136. 136. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tbody>…</tbody> </table>
  137. 137. Creating structure with HTML
  138. 138. Adapting tables to small screens
  139. 139. Adapting tables to small screens

×