Flipping Tables

Displaying Data on Small Screens

#flipdata

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 screens ( ý ° □ °) ý—

Í“Í

Sorry!

When to use tables

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

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>

<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

Designing tables

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

John Maeda, Designer “Simplicity is about subtracting the obvious and adding the meaningful.”

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/

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 { }

<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

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

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

• When to use tables • Creating structure with HTML

• Designing tables • Adding style with CSS • Adapting tables to small screens ( ý ° □ °) ý—

Í“Í

I Like To Make Websites Everyone Can Use

stephaniehobson.ca

@stephaniehobson