Flipping Tables: Displaying Data on Small Screens

Stephanie Hobson
Stephanie HobsonSenior Front-End Developer at Mozilla
Flipping Tables
Displaying Data on Small Screens
#flipdata
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Tables
Flipping Tables: Displaying Data on Small Screens
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 screens
( °□°)
Sorry!
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
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 use tables
not
When to use tables
not
.players {
column-count:2;
}
When to use tables
not
When to use tables
not
img {
float: left;
}
When to use tables
not
/* 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
layout
When to use tables
not
Tables Good
• Sort
• Compare
• Cross Reference
• Calculations
layout
Tables Bad
Flipping Tables: Displaying Data on Small Screens
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
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>…</tfoot>
</table>
Flipping Tables: Displaying Data on Small Screens
<a href=“#revenues”>
<a href=“#expenses”>
<tbody id=“revenues”>…
<tbody id=“expenses”>…
Creating structure with HTML
<table>
<caption>…</caption>
<colgroup>…</colgroup>
<thead>…</thead>
<tbody>…</tbody>
<tfoot>…</tfoot>
</table>
Creating structure with HTML
Creating structure with HTML
<tr>
<th scope=“row"></th>
<td></td>
<td></td>
</tr>
Creating structure with HTML
<tr>
…
<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 colspan rowspan>
<tfoot>
Designing tables
Designing tables
Flipping Tables: Displaying Data on Small Screens
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
• Smart defaults
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.”
Flipping Tables: Displaying Data on Small Screens
Designing tables
• www.darkhorseanalytics.com/blog/
clear-off-the-table/
• www.behance.net/gallery/Designing-
Effective-Data-Tables/885004
• understandinggraphics.com/design/
data-table-design/
Flipping Tables: Displaying Data on Small Screens
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;
figure {
display: table;
caption-side: bottom; }
figcaption {
display: table-caption; }
Adding style with CSS
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.special { }
Adding style with CSS
colgroup { }
col { }
Adding style with CSS
colgroup { }
col { }
<col class=“points">
.points {
background-color: #eee; }
Adding style with CSS
Adding style with CSS
Adding style with CSS
tbody td:nth-child(5) {
background-color: #ddd;
}
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
Flipping Tables: Displaying Data on Small Screens
Adapting tables to
small screens
Adapting tables to small screens
• Shrink
Shrink
Shrink
<th><abbr title=“Points”>P</abbr></th>
@media (min-width: 64em) {
abbr { font-size: 0;}
abbr::after {
content: attr(abbr);
font-size: 1rem;
Shrink
Shrink
Shrink
Shrink
Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
Linearize
table, thead, tbody, tfoot,
tr, th, td {
display: block;
}
Linearize
Linearize
Linearize
Linearize
td:nth-child(3)::before {
content: 'Goals:';
}
td:nth-child(4)::before {
content: 'Assists:';
}
Linearize
.goals::before {
content: 'Goals:'; }
.assists::before {
content: 'Assists:'; }
.points::before {
content: 'Points:';}
Linearize
<td data-head="Goals:">26</td>
td[data-head]::before {
content: attr(data-head);
}
Linearize
<td data-head="Goals:">26</td>
td[data-head]::before {
content: attr(data-head);
}
Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
Remove
Remove
Remove
Activity
Remove
Nutrition
Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
Scroll
Scroll
Scroll
table{
display: block;
overflow: scroll;
}
Scroll
Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
• Replace
Replace
Replace
Replace
0
1.25
2.5
3.75
5
Jan Feb Mar Apr
First quarter profits rose
2.5%. See the 2016 annual
report for the breakdown.
Replace
Adapting tables to small screens
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
• Replace
• Combo
Combo
Combo
Example
http://v6.robweychert.com/blog/2017/10/robtober/
Example
Example
Example
Example
Example
Example
Combo
• Shrink
• Linearize or flip ( °□°)
• Remove
• Scroll
• Replace
• Combo
Flipping Tables: Displaying Data on Small Screens
Case Study
Case Study
Case Study
Case Study
• github.com/mdn/browser-compat-data
• npm install mdn-browser-compat-data
Case Study
Case Study
Case Study
Case Study
<thead>
<tr>
<th colspan="5">Desktop></th>
<th colspan="5">Mobile</th>
</tr>
<tr>
<th>Chrome</th>
<th>Firefox</th>
Case Study
Case Study
Case Study
Case Study
@media
(min-width: 47.9385em) and
(max-width: 63.9375em) {
…
}
Case Study
@supports (display: grid) {
…
}
Case Study
.bc-table tr {
display: grid;
}
Case Study
.bc-table-10 tr {
grid-template-columns:
repeat(10, 1fr);
}
Case Study
@for $num from 4 through 14{
.bc-table-#{$num} tr {
grid-template-columns:
repeat(#{$num}, 1fr);
}
}
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);}
Case Study
Case Study
.bc-table tbody th {
grid-column-start: 1;
grid-column-end: last-line;
}
Case Study
Case Study
.platform-desktop,
.platform-mobile {
grid-column-end: span 5;
}
Case Study
@for $num from 4 through 14 {
th[class^=platform-][colspan=‘#{$num}']{
grid-column-end: span #{$num};
}
}
Case Study
@for $num from 4 through 14 {
th[class^=platform-][colspan=‘#{$num}']{
grid-column-end: span #{$num};
}
}
Case Study
th[class^=platform-][colspan='4'] {
grid-column-end: span 4; }
th[class^=platform-][colspan='5'] {
grid-column-end: span 5; }
th[class^=platform-][colspan='6'] {
grid-column-end: span 6; }
Case Study
Case Study
Case Study
Case Study
Case Study
table, thead, tbody,
tr, th, td {
display: block;
}
Case Study
td.browser-firefox:before {
content: ' ';
}
Case Study
Flipping Tables: Displaying Data on Small Screens
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
( °□°)
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
( °□°)
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
( °□°)
• When to use tables
• Creating structure with HTML
• Designing tables
• Adding style with CSS
• Adapting tables to small screens
( °□°)
Flipping Tables: Displaying Data on Small Screens
I Like To Make Websites
Everyone Can Use
stephaniehobson.ca
@stephaniehobson
1 of 190

Recommended

Flipping Tables: Displaying Data on Small Screens (2016-02) by
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)Stephanie Hobson
6.2K views90 slides
Flipping Tables: Displaying Data on Small Screens (2016-08) by
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)Stephanie Hobson
945 views159 slides
CSS Box Model Presentation by
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model PresentationReed Crouch
2.7K views8 slides
Introduction to css for product managers by
Introduction to css for product managersIntroduction to css for product managers
Introduction to css for product managersRodhmir Labadie
136 views19 slides
An Introduction to CSS Frameworks by
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS FrameworksAdrian Westlake
2.6K views20 slides
CSS Frameworks by
CSS FrameworksCSS Frameworks
CSS FrameworksMario Hernandez
1.9K views24 slides

More Related Content

Similar to Flipping Tables: Displaying Data on Small Screens

Introduction to Bootstrap by
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
41.8K views32 slides
CSS3 Ready for Primetime by
CSS3 Ready for PrimetimeCSS3 Ready for Primetime
CSS3 Ready for PrimetimeJeff Bridgforth
23 views105 slides
Introduction to Bootstrap: Design for Developers by
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersMelvin John
1.3K views33 slides
Bootstrap 5 ppt by
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 pptMallikarjuna G D
3.7K views73 slides
Static web sites assignment 1 philip lemmon1 by
Static web sites assignment 1 philip lemmon1Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1Lemmon12
510 views26 slides
Introduction to HTML and CSS by
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSdanpaquette
300 views47 slides

Similar to Flipping Tables: Displaying Data on Small Screens(20)

Introduction to Bootstrap by Ron Reiter
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
Ron Reiter41.8K views
Introduction to Bootstrap: Design for Developers by Melvin John
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
Melvin John1.3K views
Static web sites assignment 1 philip lemmon1 by Lemmon12
Static web sites assignment 1 philip lemmon1Static web sites assignment 1 philip lemmon1
Static web sites assignment 1 philip lemmon1
Lemmon12510 views
Introduction to HTML and CSS by danpaquette
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
danpaquette300 views
Css for Development by tsengsite
Css for DevelopmentCss for Development
Css for Development
tsengsite2.1K views
WCBuf: CSS Display Properties versus HTML Semantics by Adrian Roselli
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML Semantics
Adrian Roselli1.3K views
CSS3 - is everything we used to do wrong? by Russ Weakley
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Russ Weakley58.9K views
Hypertext markup language(html) by Jayson Cortez
Hypertext markup language(html)Hypertext markup language(html)
Hypertext markup language(html)
Jayson Cortez1.7K views
Slow kinda sucks by Tim Wright
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright2.3K views
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892 by Deepak Sharma
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma252 views
Css best practices style guide and tips by Chris Love
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
Chris Love1.5K views

More from Stephanie Hobson

Writing for Every Reader - Design and Content by
Writing for Every Reader - Design and ContentWriting for Every Reader - Design and Content
Writing for Every Reader - Design and ContentStephanie Hobson
452 views126 slides
Writing for Every Reader by
Writing for Every ReaderWriting for Every Reader
Writing for Every ReaderStephanie Hobson
3.3K views79 slides
Web Accessibility: 
Making Websites Better for Everyone by
Web Accessibility: 
Making Websites Better for EveryoneWeb Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for EveryoneStephanie Hobson
1.6K views89 slides
Mobile First Is Performance First by
Mobile First Is Performance FirstMobile First Is Performance First
Mobile First Is Performance FirstStephanie Hobson
6.3K views30 slides
Accessibility with CSS: Making Websites Better for Everyone by
Accessibility with CSS: Making Websites Better for EveryoneAccessibility with CSS: Making Websites Better for Everyone
Accessibility with CSS: Making Websites Better for EveryoneStephanie Hobson
6.8K views45 slides
Geolocation by
GeolocationGeolocation
GeolocationStephanie Hobson
543 views10 slides

More from Stephanie Hobson(7)

Writing for Every Reader - Design and Content by Stephanie Hobson
Writing for Every Reader - Design and ContentWriting for Every Reader - Design and Content
Writing for Every Reader - Design and Content
Stephanie Hobson452 views
Web Accessibility: 
Making Websites Better for Everyone by Stephanie Hobson
Web Accessibility: 
Making Websites Better for EveryoneWeb Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
Stephanie Hobson1.6K views
Mobile First Is Performance First by Stephanie Hobson
Mobile First Is Performance FirstMobile First Is Performance First
Mobile First Is Performance First
Stephanie Hobson6.3K views
Accessibility with CSS: Making Websites Better for Everyone by Stephanie Hobson
Accessibility with CSS: Making Websites Better for EveryoneAccessibility with CSS: Making Websites Better for Everyone
Accessibility with CSS: Making Websites Better for Everyone
Stephanie Hobson6.8K views

Recently uploaded

PORTFOLIO 1 (Bret Michael Pepito).pdf by
PORTFOLIO 1 (Bret Michael Pepito).pdfPORTFOLIO 1 (Bret Michael Pepito).pdf
PORTFOLIO 1 (Bret Michael Pepito).pdfbrejess0410
7 views6 slides
𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲 by
𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲
𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲Infosec train
7 views6 slides
We see everywhere that many people are talking about technology.docx by
We see everywhere that many people are talking about technology.docxWe see everywhere that many people are talking about technology.docx
We see everywhere that many people are talking about technology.docxssuserc5935b
6 views2 slides
Sustainable Marketing by
Sustainable MarketingSustainable Marketing
Sustainable MarketingTheo van der Zee
9 views50 slides
WEB 2.O TOOLS: Empowering education.pptx by
WEB 2.O TOOLS: Empowering education.pptxWEB 2.O TOOLS: Empowering education.pptx
WEB 2.O TOOLS: Empowering education.pptxnarmadhamanohar21
15 views16 slides
Existing documentaries (1).docx by
Existing documentaries (1).docxExisting documentaries (1).docx
Existing documentaries (1).docxMollyBrown86
13 views5 slides

Recently uploaded(20)

PORTFOLIO 1 (Bret Michael Pepito).pdf by brejess0410
PORTFOLIO 1 (Bret Michael Pepito).pdfPORTFOLIO 1 (Bret Michael Pepito).pdf
PORTFOLIO 1 (Bret Michael Pepito).pdf
brejess04107 views
𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲 by Infosec train
𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲
𝐒𝐨𝐥𝐚𝐫𝐖𝐢𝐧𝐝𝐬 𝐂𝐚𝐬𝐞 𝐒𝐭𝐮𝐝𝐲
Infosec train7 views
We see everywhere that many people are talking about technology.docx by ssuserc5935b
We see everywhere that many people are talking about technology.docxWe see everywhere that many people are talking about technology.docx
We see everywhere that many people are talking about technology.docx
ssuserc5935b6 views
Existing documentaries (1).docx by MollyBrown86
Existing documentaries (1).docxExisting documentaries (1).docx
Existing documentaries (1).docx
MollyBrown8613 views
IGF UA - Dialog with I_ organisations - Alena Muavska RIPE NCC.pdf by RIPE NCC
IGF UA - Dialog with I_ organisations - Alena Muavska RIPE NCC.pdfIGF UA - Dialog with I_ organisations - Alena Muavska RIPE NCC.pdf
IGF UA - Dialog with I_ organisations - Alena Muavska RIPE NCC.pdf
RIPE NCC15 views
UiPath Document Understanding_Day 3.pptx by UiPathCommunity
UiPath Document Understanding_Day 3.pptxUiPath Document Understanding_Day 3.pptx
UiPath Document Understanding_Day 3.pptx
UiPathCommunity95 views
AI Powered event-driven translation bot by Jimmy Dahlqvist
AI Powered event-driven translation botAI Powered event-driven translation bot
AI Powered event-driven translation bot
Jimmy Dahlqvist16 views
Opportunities for Youth in IG - Alena Muravska RIPE NCC.pdf by RIPE NCC
Opportunities for Youth in IG - Alena Muravska RIPE NCC.pdfOpportunities for Youth in IG - Alena Muravska RIPE NCC.pdf
Opportunities for Youth in IG - Alena Muravska RIPE NCC.pdf
RIPE NCC9 views
google forms survey (1).pptx by MollyBrown86
google forms survey (1).pptxgoogle forms survey (1).pptx
google forms survey (1).pptx
MollyBrown8614 views
IETF 118: Starlink Protocol Performance by APNIC
IETF 118: Starlink Protocol PerformanceIETF 118: Starlink Protocol Performance
IETF 118: Starlink Protocol Performance
APNIC124 views

Flipping Tables: Displaying Data on Small Screens