Example
Example
Compare Pet Insurance | Classic | Select Plus |
---|---|---|
Vet fees cover | £2000 | £5000 |
Extra treatments | Not included | £750 |
Partner | 2018 | 2019 |
---|---|---|
Co-op Food | 709.09 | 654.45 |
Co-op Insurance | 49.99 | 52.35 |
Points total | 759.08 | 706.80 |
Date and time | For you | Dividend points |
---|---|---|
8 February 2021, 9:00pm | 3.75 | |
7 February 2021, 7:28pm | 12.10 | |
7 February 2021, 7:28pm | -£0.09 | |
1 February 2021, 1:40pm | £0.05 | 8.50 |
3 January 2021, 4:45pm | £0.04 | 12.65 |
3 January 2021, 4:45pm | -£0.29 | |
27 January 2021, 9:10pm | £0.29 | 45.28 |
27 January 2021, 9:10pm | -£0.37 | |
24 January 2021, 2:50pm | £0.12 | 12.70 |
23 January 2021, 5:13pm | £0.05 | 2.98 |
HTML
<div class="coop-table-wrapper">
<table class="coop-table coop-table--stackable">
<caption>
This table compares our Classic and Select Plus pet insurance
</caption>
<thead>
<tr>
<th scope="col">Compare Pet Insurance</th>
<th scope="col">Classic</th>
<th scope="col">Select Plus</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" role="rowheader">Vet fees cover</th>
<td role="cell" data-heading="Classic">£2000</td>
<td role="cell" data-heading="Select Plus">£5000</td>
</tr>
<tr>
<th scope="row" role="rowheader">Extra treatments</th>
<td role="cell" data-heading="Classic">Not included</td>
<td role="cell" data-heading="Select Plus">£750</td>
</tr>
</tbody>
</table>
</div>
<div class="coop-table-wrapper">
<table class="coop-table coop-table--stackable">
<caption class="coop-table__caption">
This table shows compares points earnings in 2018 and 2019
</caption>
<thead>
<tr class="coop-table__row">
<th class="coop-table__header" scope="col">Partner</th>
<th class="coop-table__header coop-table__header--numeric" scope="col" align="right" width="15%">2018</th>
<th class="coop-table__header coop-table__header--numeric" scope="col" align="right" width="15%">2019</th>
</tr>
</thead>
<tbody>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">Co-op Food</th>
<td class="coop-table__cell coop-table__cell--numeric" role="cell" data-heading="2018">709.09</td>
<td class="coop-table__cell coop-table__cell--numeric" role="cell" data-heading="2019">654.45</td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">Co-op Insurance</th>
<td class="coop-table__cell coop-table__cell--numeric" role="cell" data-heading="2018">49.99</td>
<td class="coop-table__cell coop-table__cell--numeric" role="cell" data-heading="2019">52.35</td>
</tr>
</tbody>
<tfoot>
<tr class="coop-table__row">
<th class="coop-table__footer" scope="row" role="rowheader">Points total</th>
<td class="coop-table__footer coop-table__footer--numeric" role="cell" data-heading="2018">759.08</td>
<td class="coop-table__footer coop-table__footer--numeric" role="cell" data-heading="2019">706.80</td>
</tr>
</tfoot>
</table>
</div>
<div class="coop-table-wrapper">
<table class="coop-table coop-table--stackable">
<caption class="coop-table__caption">
This table lists the 10 most recent times that you’ve earned Co‑op rewards
</caption>
<thead>
<tr class="coop-table__row">
<th class="coop-table__header coop-t-nowrap" scope="col">Date and time</th>
<th class="coop-table__header coop-table__footer--numeric coop-t-nowrap" scope="col" align="right" width="15%">For you</th>
<th class="coop-table__header coop-table__footer--numeric coop-t-nowrap" scope="col" align="right" width="25%">Dividend points</th>
</tr>
</thead>
<tbody>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">8 February 2021, 9:00pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you"></td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">3.75</td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">7 February 2021, 7:28pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you"></td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">12.10</td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">7 February 2021, 7:28pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">-£0.09</td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points"></td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">1 February 2021, 1:40pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.05</td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">8.50</td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">3 January 2021, 4:45pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.04</td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">12.65</td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">3 January 2021, 4:45pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">-£0.29</td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points"></td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">27 January 2021, 9:10pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.29</td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">45.28</td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">27 January 2021, 9:10pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">-£0.37</td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points"></td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">24 January 2021, 2:50pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.12</td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">12.70</td>
</tr>
<tr class="coop-table__row">
<th class="coop-table__cell" scope="row" role="rowheader">23 January 2021, 5:13pm</th>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.05</td>
<td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">2.98</td>
</tr>
</tbody>
</table>
</div>
Design and content
The responsive table takes the same style as the main table — but differ under 480px by the:
- heading rows becoming table headers
- table cell borders are removed
For the styles to work correctly, you must match the markup structure in the example. When deciding whether to use this solution think carefully about if it will fit the needs of your users. If in doubt don’t use it, or build your own responsive table. We have made this solution as simple as possible and cannot varify its accessibility yet on smaller device size. Please research your service with users of all abilities.