How to create a html table element tilemap from an array in javascript?

Question

how do I create a html table tilemap from an array? For example when I want the "0"s to be a "td" with a green background and 20px width and height and the "1"s to be a "td" with a brown background with the same size? Could anyone give an example for this array? Additionally, I would like to know how to insert a picture into a specific "td" element? for example a tree picture in the "td" element on the position table[0][0] with a green background, thanks.

var table = [
[0,1,1,1,0],
[0,1,0,0,0],
[0,1,1,0,0],
[0,0,1,0,0],
[1,1,1,0,0]
]

Answer 1

var arr = [                                        // the array
  [0, 1, 1, 1, 0],
  [0, 1, 0, 0, 0],
  [0, 1, 1, 2, 2],
  [0, 0, 1, 0, 2],
  [1, 1, 1, 0, 0]
];

var table = document.createElement("table");       // create a table element
var tbody = document.createElement("tbody");       // create a tbody element
table.appendChild(tbody);                          // add the tbody element to the table element

arr.forEach(function(sub, j) {                     // for each sub-array sub in the array arr (j is the index of this row)
  var row = document.createElement("tr");          // create a row element
  tbody.appendChild(row);                          // add the row element to the tbody element
  sub.forEach(function(num, i) {                   // for each number num in the array sub (i is the index of this column)
    var cell = document.createElement("td");       // create a cell element
    row.appendChild(cell);                         // add the cell element to this row element
    cell.className = num === 1? "brown": "green";  // if the number num is 1 then set the class to .brown, otherwise set it to .green
    cell.id = "cell-" + i + "-" + j;               // add an id to each cell so you can select it later
  });
});

// use table as you wish
document.body.appendChild(table);                  // in this example append it to the body

// ##################################################################################
// JUST AN EXAMPLE: (THE BELLOW CODE IS JUST TO GIVE YOU SOME INSIGHTS ON YOUR QUEST)
// ##################################################################################

var img = document.createElement("img");           // create the img element
img.src = "http://placehold.it/15";                // set its src

function moveTo(x, y) {                            // get a x and y and move the image to the cell at that pstion
  if(x < 0 || x > 4) return;                       // if x is out of bound, abort
  if(y < 0 || y > 4) return;                       // if y is out of bound, abort

  document.getElementById("cell-" + x + "-" + y).appendChild(img); // move the image img to cell-x-y (x from the left, and y from the top)
}

moveTo(2, 2);                                      // move to the third-third cell at start

document.addEventListener("click", function(e) {   // just an example: when clicking a td element, move the image to that cell
  var target = e.target;
  if(target.tagName === "TD")
    moveTo(target.id.match(/\d+/), target.id.match(/\d+$/));
});

.brown, .green {
  width: 20px;
  height: 20px;
}

.brown {
  background: brown;
}

.green {
  background: green;
}