HTML tables are a great way to display data in rows and columns. UNLcms has default styles already set up for you to create a responsive table. A responsive table adapts to fit the size and orientation of a user's device wether it's a desktop, mobile phone, or tablet.
Responsive Table Generator Tool
With the Responsive Table Generator tool you can easily create tables that can be viewed fully on both desktop and mobile devices.
Hand Coding Responsive Tables
To hand code an HTML responsive table in the UNLcms framework you will need to do the following:
- Add the class below to your table tag <table>:
- Add a unique row-id and column-id in the row and column header tags <th> note: ID values must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). Do not include spaces.
- Add the attributes below in the table cell tags <td>
header="row-id column-id " data-header="column header name"
<table class="wdn_responsive_table flush-left"> <caption>Number of Facebook Fans and Twitter Followers</caption> <thead> <tr> <td></td> <th id="may-2015">May 2015</th> <th id="june-2015">June 2015</th> </tr> </thead> <tbody> <tr> <th id="twitter">Twitter Followers</th> <td headers="twitter may-2015" data-header="May 2015">400</td> <td headers="twitter june-2015" data-header="June 2015">530</td> </tr> <tr> <th id="facebook">Facebook Fans</th> <td headers="facebook may-2015" data-header=" May 2015">1200</td> <td headers="facebook june-2015" data-header=" June 2015">1350</td> </tr> </tbody> </table>
|May 2015||June 2015|