Generating an HTML table with colspan and rowspan from a one-dimensional array
I really wanted to find a purely functional solution to this problem, but I wasn't able to.  Nevertheless, your basic idea is pretty simple, and can be made even shorter and more declarative:

// Cell calculations as pure data.  "cells" is the variable containing
// all cells, which we are filling in
var width     = 3,
    numCells  = input.reduce((m,x) =&gt; m += x.rowspan + x.colspan -1, 0),
    cells     = new Array(numCells).fill(false),
    dummy     = { dummy: true}, 
    addAcross = (i,n) =&gt; R.times(j =&gt; cells[i+j+1] = dummy, n),
    addDown   = (i,n) =&gt; R.times(j =&gt; cells[i+(j+1)*width] = dummy, n),
    nextIndex = () =&gt; cells.findIndex(x =&gt; !x);

 // Everything happens here.  We fill in "cells" with the real
 // cells and dummy cells for the span cells

 input.forEach(x =&gt; {
   var i = nextIndex();
   cells[i] = x;
   addAcross(i, x.colspan-1);
   addDown(i, x.rowspan-1);
 })

// HTML View Helpers
// Once we have the data, just split the array into subarrays
// for each row, and filter out the dummy cells.  In this format
// constructing the html itself is trivial

var rows = R.splitEvery(width, cells).map(r =&gt; r.filter(x =&gt; !x.dummy)),
    asTd = c =&gt; `&lt;td rowspan=${c.rowspan} colspan=${c.colspan}&gt;${c.value}&lt;/td&gt;`,
    asTr = row =&gt; `&lt;tr&gt;${row.map(asTd).join('')}&lt;/tr&gt;`,
    asTable = rows =&gt; `&lt;table border=1&gt;${rows.map(asTr).join('')}&lt;/table&gt;`;

document.querySelector('body').innerHTML = asTable(rows);


Note: I used one ramda library function just to break the array into subarrays.  Lodash has a similar one, but I prefer ramda.

Here's a working bin of the final solution:
http://jsbin.com/nimuca/2/edit?js,output