Drupal 7: Dividize HTML Table Module

David G - DrupalRecently I found myself importing pages and pages of static HTML which was designed using tables for the layout, and contains HTML tables of statistical information. Unfortunately, when nesting tables in this fashion it can be very difficult to target the tables within tables to be responsive across devices. I stumbled across a jQuery plugin which offers a solution to import these legacy tables into my CMS architecture, while allowing me a simple method to make the tables somewhat responsive. The jQuery plugin is called Dividize. I was interested in attempting to create a Drupal module of this plugin, but someone beat me to the punch!

The newly released Dividize module for Drupal takes a legacy HTML table and converts the rows and data elements of a table into DIV elements. This is benefitial because then these DIVs can easily be targetted using CSS media queries to make the DIVs responsive across multimedia devices.

After installing the module you can go over to the Configuration page for it and configure how it works across tables of your website:

Example Dividize configuration page.

Global Dividize configuration page.

As an example above for the website in question I will only be targetting tables within a specific set of pages of my website. All these tables will contain the class election_data in them so that Dividize can affect them across devices. Note, that Dividize supports targeting more than 1 table using multiple CSS selectors to enumerate the list of tables you want to affect.

Once the configuration is all set up you can see the module in action. I have an example page on my website I’m testing out this module with — so by default the HTML table is rendered as so using HTML table elements and inline styling.

Sample HTML table from legacy website with lots of rows and lots of columns which by its nature is not responsive.

Sample HTML table from legacy website with lots of rows and lots of columns which by its nature is not responsive.

Upon hitting the pre-defined breakpoint the Dividize markup replaces the default table markup and without any developer effort yet, the table visibily changes:

Dividized table after resizing the window below the configured breakpoint.

Dividized table after resizing the window below the configured breakpoint.

As we can see the Diviize markup is now in place by viewing the document source:

<div class="dividize-box dividize-processed">
<div class="dividize-82 dividize-row dividize-row-0 even first-row">
  <div class="dividize-83 dividize-cell dividize-cell-0 first-cell dividize-dim-cell" style="line-height: 81px; height: 81px; width: 141px;">
    <div class="dividize-84 dividize-label dividize-label-0 dividize-hidden"></div>
    <div class="dividize-85 dividize-data dividize-data-0 dividize-dim-data"><strong>STATE</strong></div>
  </div>
  <div class="dividize-86 dividize-cell dividize-cell-1 dividize-dim-cell" style="line-height: 81px; height: 81px; width: 127px;">
    <div class="dividize-87 dividize-label dividize-label-1 dividize-hidden"></div>
    <div class="dividize-88 dividize-data dividize-data-1 dividize-dim-data"><strong>TOTAL VOTE</strong></div>
  </div>
  <div class="dividize-89 dividize-cell dividize-cell-2 dividize-dim-cell" style="line-height: 27px; height: 27px; width: 209px;">
    <div class="dividize-90 dividize-label dividize-label-2 dividize-hidden"></div>
    <div class="dividize-91 dividize-data dividize-data-2 dividize-dim-data"><span class="style3">Republican</span></div>
  </div>
  <div class="dividize-92 dividize-cell dividize-cell-3 last-cell dividize-dim-cell" style="line-height: 27px; height: 27px; width: 212px;">
    <div class="dividize-93 dividize-label dividize-label-3 dividize-hidden"></div>
    <div class="dividize-94 dividize-data dividize-data-3 dividize-dim-data"><span class="style3">Democratic</span></div>
  </div>
</div>
<div class="dividize-95 dividize-row dividize-row-1 odd">
<div class="dividize-96 dividize-cell dividize-cell-0 first-cell dividize-dim-cell" style="line-height: 27px; height: 27px; width: 209px;">
  <div class="dividize-97 dividize-label dividize-label-0 dividize-hidden"></div>
  <div class="dividize-98 dividize-data dividize-data-0 dividize-dim-data"><strong>ULYSSES S. GRANT</strong></div>
</div>
<!-- ... Lots, Lots more rows .... -->

In this case we loose all the styling because the styling was all inline and stripped by the plugin. In general that will be OK for my usecase because I will be attempting to provide per-table CSS markup as my content is imported from the legacy system into the new CMS system. This module is simply enabling a fast way to make these legacy HTML tables responsive without recreating their content from scratch!

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , | Posted under Drupal, Programming/Coding | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *