About
Showing tabular data, and making it responsive
Alternatives
Accessibility
Requirements
Issues
Examples
This technique uses two separate elements, large tables are hidden on small devices and Descriptive Lists are used. On larger screens: the table is shown and the Descriptive List is hidden. Although larger in terms of HTML code produced, all the data is available and accesible, additionally HTML is compressed and has negligable impact on the devices processor.
Dual data
Larger screens <table>
| Product | Size | Media | Quantity | Price | Image |
|---|---|---|---|---|---|
| Product One | sdf | wer | xcv | £35 |  |
| Product Two | sdf | wer | xcv | £45 | |
| Item One | Description of item one. | £20 | |
|---|---|---|---|
| Item Two | Description of item two. | £30 | |
| Item Three | Description of item three. | £40 | |
<div aria-labelledby="table-dual-large-caption" class="o-table-container" role="group" tabindex="0">
<table class="c-table">
<caption id="table-dual-large-caption">
Optional extras
</caption>
<thead>
<tr>
<th class="c-table__col1" scope="col">Product</th>
<th class="c-table__col2" scope="col">Size</th>
<th class="c-table__col3" scope="col">Media</th>
<th class="c-table__col4" scope="col">Quantity</th>
<th class="c-table__col5" scope="col">Price</th>
<th class="c-table__col6" scope="col">Image</th>
</tr>
</thead>
<tbody>
<tr>
<th class="c-table__col1" scope="row">Product One</th>
<td class="c-table__col2">sdf</td>
<td class="c-table__col3">wer</td>
<td class="c-table__col4">xcv</td>
<td class="c-table__col5">£35</td>
<td class="c-table__col6"><picture><img alt="Image Alt Text" src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail"></picture></td>
</tr>
<tr>
<th class="c-table__col1" scope="row">Product Two</th>
<td class="c-table__col2">sdf</td>
<td class="c-table__col3">wer</td>
<td class="c-table__col4">xcv</td>
<td class="c-table__col5">£45</td>
<td class="c-table__col6"><picture><img alt="Image Alt Text" src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail"></picture></td>
</tr>
</tbody>
</table>
</div>
<div class="o-table-container" tabindex="0" role="group" aria-labelledby="table-dual-small-caption">
<table class="c-table">
<caption id="table-dual-small-caption">Caption to describe the data, acting like a heading. Could be visually hidden, but useful.</caption>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<th class="c-table__col1">Item One</th>
<td class="c-table__col2">Description of item one.</td>
<td class="c-table__col3">£20</td>
<td class="c-table__col6"><picture><img src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail" alt="Item One" /></picture></td>
</tr>
<tr>
<th class="c-table__col1">Item Two</th>
<td class="c-table__col2">Description of item two.</td>
<td class="c-table__col3">£30</td>
<td class="c-table__col6"><picture><img src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail" alt="Item Two" /></picture></td>
</tr>
<tr>
<th class="c-table__col1">Item Three</th>
<td class="c-table__col2">Description of item three.</td>
<td class="c-table__col3">£40</td>
<td class="c-table__col6"><picture><img src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail" alt="Item Three" /></picture></td>
</tr>
</tbody>
</table>
</div>Smaller screens <dl>
On smaller devices, and where the table is being cut-off/ususable, we can extract the image from the thumbnail ‘column’ and display it in better context, because the rest of the data is better shown side by side.
Caption to describe the data, acting like a heading. Could be visually hidden, but useful.
Item One
- £20
Item Two
- £30
Item Three
- £40
<div class="lists-container">
<h2>Caption to describe the data, acting like a heading. Could be visually hidden, but useful.</h2>
<div>
<h3>Item One</h3>
<picture><img src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail" alt="Item One" /></picture>
<dl class="o-dl o-dl--table-dual-small">
<dt class="o-dl__t"></dt>
<dd class="o-dl__d"></dd>
<dt class="o-dl__t"></dt>
<dd class="o-dl__d">£20</dd>
</dl>
<h3>Item Two</h3>
<picture><img src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail" alt="Item Two" /></picture>
<dl class="o-dl o-dl--table-dual-small">
<dt class="o-dl__t"></dt>
<dd class="o-dl__d"></dd>
<dt class="o-dl__t"></dt>
<dd class="o-dl__d">£30</dd>
</dl>
<h3>Item Three</h3>
<picture><img src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail" alt="Item Three" /></picture>
<dl class="o-dl o-dl--table-dual-small">
<dt class="o-dl__t"></dt>
<dd class="o-dl__d"></dd>
<dt class="o-dl__t"></dt>
<dd class="o-dl__d">£40</dd>
</dl>
</div>
</div>Single responsive table
As above but combined - display/hide one or the other.
| Product | Size | Media | Quantity | Price | Image |
|---|---|---|---|---|---|
| Product One | sdf | wer | xcv | £35 | |
| Product Two | sdf | wer | xcv | £45 | |
<div aria-labelledby="table-dual-large-caption" class="o-table-container" role="group" tabindex="0">
<table class="c-table">
<caption id="table-dual-large-caption">
Optional extras
</caption>
<thead>
<tr>
<th class="c-table__col1" scope="col">Product</th>
<th class="c-table__col2" scope="col">Size</th>
<th class="c-table__col3" scope="col">Media</th>
<th class="c-table__col4" scope="col">Quantity</th>
<th class="c-table__col5" scope="col">Price</th>
<th class="c-table__col6" scope="col">Image</th>
</tr>
</thead>
<tbody>
<tr>
<th class="c-table__col1" scope="row">Product One</th>
<td class="c-table__col2">sdf</td>
<td class="c-table__col3">wer</td>
<td class="c-table__col4">xcv</td>
<td class="c-table__col5">£35</td>
<td class="c-table__col6"><picture><img alt="Image Alt Text" src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail"></picture></td>
</tr>
<tr>
<th class="c-table__col1" scope="row">Product Two</th>
<td class="c-table__col2">sdf</td>
<td class="c-table__col3">wer</td>
<td class="c-table__col4">xcv</td>
<td class="c-table__col5">£45</td>
<td class="c-table__col6"><picture><img alt="Image Alt Text" src="https://pic.jcmserv3.net/4:3x60/dddddd/444444.png&text=Thumbnail"></picture></td>
</tr>
</tbody>
</table>
</div>