Javascript For Loop Using AppendChild

I'm creating a pixel art maker right now for a lab assignment and I'm currently trying to create a grid from a user form (input height and width of the grid), but whenever I call the function to create the grid on the submission of the form it isn't appending any table rows to my table. I can currently do it easily using jQuery, but I am trying to become better at just using vanilla JS.

EDIT: I am just trying to get rows then do the loop for the tds. One step at a time.

function makeGrid(){
  //define grid height/width and pixelcanvas table
  var canvas = document.querySelector("#pixelCanvas");
  var height = document.querySelector("#inputHeight").value;
  var width = document.querySelector("#inputWidth").value;

  //remove all children from canvas so if makeGrid gets called again it cleans the canvas
  while (canvas.firstChild) {
    canvas.removeChild(canvas.firstChild);
  }

  //Loop for height and add tr to canvas
  for (x = 0; x > height; x++) {
    var row = document.createElement("<tr></tr>");
    canvas.appendChild(row);
  }

}

//Assign the form submit to a variable and put an eventlistener on click that runs makeGrid
// var submit = document.querySelector("#inputSubmit");

document.getElementById('sizePicker').addEventListener('submit', function(e){
  e.preventDefault;
  makeGrid();
})

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>

</html>

Solution

There are a few problems. Here I change the child element to tr from <tr></tr>. Call the function e.preventDefault() and fixed the loop condition. I also added the extra loop for columns:

function makeGrid() {
  //define grid height/width and pixelcanvas table
  var canvas = document.querySelector("#pixelCanvas");
  var height = document.querySelector("#inputHeight").value;
  var width = document.querySelector("#inputWidth").value;

  //remove all children from canvas so if makeGrid gets called again it cleans the canvas
  while (canvas.firstChild) {
    canvas.removeChild(canvas.firstChild);
  }
  //Loop for height and add tr to canvas
  for (x = 0; x < height; x++) {
    var row = document.createElement("tr");
    canvas.appendChild(row);

    for (z = 0; z < width; z++) {
      let cell = document.createElement('td')
      row.appendChild(cell)
    }
  }

}

//Assign the form submit to a variable and put an eventlistener on click that runs makeGrid
// var submit = document.querySelector("#inputSubmit");

document.getElementById('sizePicker').addEventListener('submit', function(e) {
  e.preventDefault();
  makeGrid();
})

td {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
}

<h1>Lab: Pixel Art Maker</h1>

<h2>Choose Grid Size</h2>
<form id="sizePicker">
  Grid Height:
  <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
  <input type="number" id="inputWidth" name="width" min="1" value="1">
  <input type="submit">
</form>

<h2>Pick A Color</h2>
<input type="color" id="colorPicker">

<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>