This should do it, you had a bunch of syntax errors and some missteps in logic, but I've kept the overall format of the program the same:
function loading () {
function nameBox () {
var bigBox = document.getElementById("puzzlearea");
var divs = bigBox.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].className = "boxes";
}
// Notice I return the node list of divs so you can use it to populate
// your grid in tableCreate
return divs;
}
function tableCreate () {
var body = document.getElementById('puzzlearea'),
tbl = document.createElement('table'),
boxes = nameBox();
// I would recommend removing this block and simply setting these
// style attributes in CSS under an id that you give to your table
tbl.style.width = '400px';
tbl.style.height = '400px';
tbl.cellPadding = '0';
tbl.cellSpacing = '0';
tbl.setAttribute('border', '2');
var tbdy = document.createElement('tbody');
for (var i = 0; i < 4; i++) {
var tr = document.createElement('tr');
// Notice how I've added boxes.length as a loop condition
// this will automatically break the loop once the boxes
// node list is empty
for (var j = 0; j < 4 && boxes.length; j++) {
var td = document.createElement('td');
// You were appending the string "boxes" here
// I've changed it to append the first div
// remaining in the boxes node list
td.appendChild([].shift.call(boxes););
tr.appendChild(td)
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
}
tableCreate();
};
window.onload = function () {
loading();
};