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
(╯°□°)╯︵ ┻━┻
• 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
×

of

Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 1 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 2 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 3 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 4 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 5 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 6 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 7 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 8 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 9 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 10 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 11 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 12 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 13 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 14 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 15 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 16 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 17 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 18 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 19 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 20 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 21 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 22 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 23 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 24 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 25 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 26 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 27 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 28 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 29 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 30 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 31 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 32 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 33 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 34 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 35 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 36 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 37 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 38 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 39 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 40 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 41 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 42 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 43 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 44 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 45 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 46 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 47 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 48 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 49 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 50 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 51 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 52 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 53 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 54 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 55 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 56 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 57 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 58 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 59 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 60 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 61 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 62 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 63 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 64 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 65 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 66 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 67 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 68 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 69 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 70 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 71 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 72 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 73 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 74 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 75 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 76 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 77 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 78 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 79 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 80 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 81 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 82 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 83 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 84 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 85 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 86 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 87 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 88 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 89 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 90 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 91 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 92 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 93 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 94 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 95 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 96 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 97 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 98 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 99 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 100 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 101 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 102 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 103 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 104 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 105 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 106 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 107 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 108 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 109 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 110 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 111 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 112 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 113 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 114 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 115 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 116 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 117 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 118 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 119 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 120 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 121 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 122 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 123 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 124 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 125 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 126 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 127 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 128 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 129 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 130 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 131 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 132 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 133 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 134 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 135 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 136 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 137 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 138 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 139 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 140 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 141 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 142 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 143 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 144 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 145 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 146 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 147 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 148 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 149 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 150 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 151 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 152 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 153 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 154 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 155 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 156 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 157 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 158 Flipping Tables: Displaying Data on Small Screens (2016-08) Slide 159
Upcoming SlideShare
Web Accessibility: 
Making Websites Better for Everyone
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

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.

Views

Total views

824

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×