HTML table (mobile friendly with no horizontal scrollbars)
Add or subtract rows and columns as desired
| Name | Age | From | Sport | Score |
|---|---|---|---|---|
| James | 45 | Tunbridge Wells | Americas Cup sailing | 25 |
| Susan | 34 | Leamington Spa | Synchronised swimming | 25 |
| Norman | 60 | Bognor Regis | Clay pigeon shooting | 25 |
HTML markup:
<table> <thead> <tr> <th>Name</th> <th>Age</th> <th>From</th> <th>Sport</th> <th>Score</th> </tr> </thead> <tbody> <tr> <td data-label="Name">James</td> <td data-label="Age">45</td> <td data-label="From">Tunbridge Wells</td> <td data-label="Sport">Americas Cup sailing</td> <td data-label="Score">25</td> </tr> <tr> <td data-label="Name">Susan</td> <td data-label="Age">34</td> <td data-label="From">Harrogate</td> <td data-label="Sport">Synchronised swimming</td> <td data-label="Score">25</td> </tr> <tr> <td data-label="Name">Norman</td> <td data-label="Age">60</td> <td data-label="From">Bognor Regis</td> <td data-label="Sport">Clay pigeon shooting</td> <td data-label="Score">25</td> </tr> </tbody> </table>
Make sure to match chosen 'thead' labels with 'data-labels' exactly and in the same order. Add rows and labels as desired. The <thead> ... </thead> section of column headings can be omitted altogether but always keep the 'data-labels'.
