Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Flipping Tables
Displaying Data on Small Screens
Tables
Am I right?
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small ...
Sorry,
When to use tables
When to use tables
not
When not to use tables
When not to use tables
<h5>Players:</h5>
<ul>
<li>Daniel Sedin</li>
<li>Henrik Sedin</li>
<li>Jannik Hansen</li>
<li>Bo Ho...
When not to use tables
When not to use tables
.players {
column-count:2;
}
When not to use tables
When not to use tables
/* Nicole Sullivan’s Media Object */
<div class="media">
<div class="img">
<img src="" alt="" />
</...
layout
When not to use tables
When to use tables
When to use tables
• Sort
• Compare
• Cross Reference
• Calculations
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>
</table>
Creating structure with HTML
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tfoot>…</tfoot>
</table>
Creating structure with HTML
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tfoot>…</tfoot>
<tbody>...
Creating structure with HTML
Creating structure with HTML
<tr>
<th scope=“”></th>
<td colspan=“”></td>
<td rowspan=“”></td>
</tr>
Creating structure with HTML
<table>
<caption>
<colgroup span>
<col />
<thead>
<tfoot>
<tbody>
<tr>
<th scope colspan rows...
Designing tables
Designing tables
Designing tables
• Provide a caption
• Identify columns, rows, and headers
• Enhance readability
• Group similar data
• Sm...
Designing tables
• Contrast
• Repetition
• Alignment
• Proximity
Designing tables
– John Maeda
“Simplicity is about subtracting the
obvious and adding the
meaningful.”
Designing tables
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: collapse;
border-spacing: 0;
Adding style with CSS
caption-side:bottom;
Adding style with CSS
th { }
tbody th { }
tbody th[scope=“row”] { }
th.points { }
Adding style with CSS
<colgroup>
<col>
tbody td:nth-child(even) {
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
Adding style with CSS
• A note about borders and screen
readers
Adapting tables to small screens
Adapting tables to small screens
• Shrink
Adapting tables to small screens
• Shrink
• Flip (linearize)
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
• Shrink
• Flip (linearize)
• Remove
Adapting tables to small screens
Adapting tables to small screens
Adapting tables to small screens
• Shrink
• Flip (linearize)
• Remove
• Scroll
Adapting tables to small screens
• Shrink
• Flip (linearize)
• Remove
• Scroll
• Replace
Adapting tables to small screens
• Shrink
• Flip (linearize)
• Remove
• Scroll
• Replace
• Combo
Case Study
Case Study
Case Study
Case Study
Case Study
Case Study
Case Study
Case Study
• 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
stephaniehobson.ca
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
Upcoming SlideShare
Loading in …5
×

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

5,502 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
  • Nice deck! PS: text content on Slide 20 looks like definition list :-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Flipping Tables Displaying Data on Small Screens
  2. 2. Tables
  3. 3. Am I right?
  4. 4. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens • Case Study: MDN compatibility tables ( °□°) ━
  5. 5. Sorry,
  6. 6. When to use tables
  7. 7. When to use tables not
  8. 8. When not to use tables
  9. 9. When not to use tables <h5>Players:</h5> <ul> <li>Daniel Sedin</li> <li>Henrik Sedin</li> <li>Jannik Hansen</li> <li>Bo Horvat</li> </ul>
  10. 10. When not to use tables
  11. 11. When not to use tables .players { column-count:2; }
  12. 12. When not to use tables
  13. 13. When not to use tables /* Nicole Sullivan’s Media Object */ <div class="media"> <div class="img"> <img src="" alt="" /> </div> <div class="body"> Henrick Sedin etc. </div> </div>
  14. 14. layout When not to use tables
  15. 15. When to use tables
  16. 16. When to use tables • Sort • Compare • Cross Reference • Calculations
  17. 17. Creating structure with HTML
  18. 18. Creating structure with HTML <table> </table>
  19. 19. Creating structure with HTML
  20. 20. Creating structure with HTML <table> <caption>…</caption> </table>
  21. 21. Creating structure with HTML <table> </table>
  22. 22. Creating structure with HTML <table> <caption>…</caption> <colgroup> <col span=“” class=“”> </colgroup> </table>
  23. 23. Creating structure with HTML
  24. 24. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> </table>
  25. 25. Creating structure with HTML
  26. 26. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tfoot>…</tfoot> </table>
  27. 27. Creating structure with HTML
  28. 28. Creating structure with HTML <table> <caption>…</caption> <colgroup>…</colgroup> <thead>…</thead> <tfoot>…</tfoot> <tbody>…</tbody> </table>
  29. 29. Creating structure with HTML
  30. 30. Creating structure with HTML <tr> <th scope=“”></th> <td colspan=“”></td> <td rowspan=“”></td> </tr>
  31. 31. Creating structure with HTML <table> <caption> <colgroup span> <col /> <thead> <tfoot> <tbody> <tr> <th scope colspan rowspan> <td colspan rowspan>
  32. 32. Designing tables
  33. 33. Designing tables
  34. 34. Designing tables • Provide a caption • Identify columns, rows, and headers • Enhance readability • Group similar data • Smart defaults
  35. 35. Designing tables • Contrast • Repetition • Alignment • Proximity
  36. 36. Designing tables
  37. 37. – John Maeda “Simplicity is about subtracting the obvious and adding the meaningful.” Designing tables
  38. 38. 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/
  39. 39. Adding style with CSS
  40. 40. Adding style with CSS border-collapse: collapse; border-spacing: 0;
  41. 41. Adding style with CSS caption-side:bottom;
  42. 42. Adding style with CSS th { } tbody th { } tbody th[scope=“row”] { } th.points { }
  43. 43. Adding style with CSS <colgroup> <col>
  44. 44. tbody td:nth-child(even) { background-color: #ddd; } Adding style with CSS
  45. 45. Adding style with CSS
  46. 46. tr:nth-child(even) { background-color: #ddd; } Adding style with CSS
  47. 47. Adding style with CSS
  48. 48. Adding style with CSS • A note about borders and screen readers
  49. 49. Adapting tables to small screens
  50. 50. Adapting tables to small screens • Shrink
  51. 51. Adapting tables to small screens • Shrink • Flip (linearize)
  52. 52. Adapting tables to small screens
  53. 53. Adapting tables to small screens
  54. 54. Adapting tables to small screens • Shrink • Flip (linearize) • Remove
  55. 55. Adapting tables to small screens
  56. 56. Adapting tables to small screens
  57. 57. Adapting tables to small screens • Shrink • Flip (linearize) • Remove • Scroll
  58. 58. Adapting tables to small screens • Shrink • Flip (linearize) • Remove • Scroll • Replace
  59. 59. Adapting tables to small screens • Shrink • Flip (linearize) • Remove • Scroll • Replace • Combo
  60. 60. Case Study
  61. 61. Case Study
  62. 62. Case Study
  63. 63. Case Study
  64. 64. Case Study
  65. 65. Case Study
  66. 66. Case Study
  67. 67. Case Study
  68. 68. • When to use tables • Creating structure with HTML • Designing tables • Adding style with CSS • Adapting tables to small screens • Case Study: MDN compatibility tables ( °□°) ━
  69. 69. I Like to Make Websites Everyone Can Use @stephaniehobson stephaniehobson.ca

×