How to Create a Responsive Table

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:

  1. Add the class below to your table tag <table>:
    class="wdn_responsive_table flush-left"
  2. 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.
  3. Add the attributes below in the table cell tags <td>
    header="row-id column-id " data-header="column header name"
EXAMPLE:
<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>
Number of Facebook Fans and Twitter Followers
May 2015 June 2015
Twitter Followers 400 530
Facebook Fans 1200 1350