More Related Content Similar to Flipping Tables: Displaying Data on Small Screens (20) More from Stephanie Hobson (7) Flipping Tables: Displaying Data on Small Screens17. • 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
( °□°)
32. When to use tables
• Sort
• Compare
• Cross Reference
34. When to use tables
• Sort
• Compare
• Cross Reference
• Calculations
36. When to use tables
• Sort
• Compare
• Cross Reference
• Calculations
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
54. Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>
<col span=“” class=“”>
</colgroup>
</table>
56. Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tbody>…</tbody>
<tfoot>…</tfoot>
</table>
59. Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tbody>…</tbody>
<tfoot>…</tfoot>
</table>
65. Creating structure with HTML
<table>
<caption>
<colgroup span>
<col />
<thead>
<tbody>
<tr>
<th scope colspan rowspan>
<td colspan rowspan>
<tfoot>
74. Designing tables
• Provide a caption
• Identify columns, rows, and headers
• Enhance readability
• Group similar data
• Smart defaults
81. - John Maeda, Designer
“Simplicity is about subtracting
the obvious and adding the
meaningful.”
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 { }
131. Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
136. Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
• Replace
141. Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
• Replace
• Combo
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);}
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};
}
}
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