​

 var num=1;

$(document).ready(function () {

  console.log("starting");

  var workarea=$("#workarea");

  var table=$("<table class='pyramid'/>");

  for (var i = 1; i<=4;i++) {

    renderrow(table,i)

  }

  for (var i = 3; i>=1;i--) {

    renderrow(table,i)

  }  

  console.log("table");

  workarea.append(table);

});

​

function renderrow(table,i) {

    var column;

    var row=$("<tr/>");

    table.append(row);

    for (var j=1;j<=7;j++) {

      column=$("<td/>");

      if (j>4-i && j<=7-(4-i)) {

        column.html(num);

        column.addClass("occupied");

        num++;

      }

      row.append(column);

    }  

}