Create Table With Javascript

I'm creating some kind of 'Mario puzzle' all in one file for now. I managed to create a table using window prompt. I don't know how to make height and width fixed so it will be the

Solution 1:

As mentioned, do not use document.write. Create the elements in memory and then append to the DOM when ready.

As for height and width; 1) set the inline style of the tds or 2) apply height and width CSS.

Make sure that wherever you set the dimensions, to make it the same as the images above. Option #2 is the preferred approach.

Option #1

functionel( tagName ) {
  returndocument.createElement( tagName );
}

var rows  = 5;
var cols  = 10;
var table = el( 'table' );

for ( var i = 0; i < rows; i++ ) {

  var tr = el( 'tr' );
  
  for ( var j = 0; j < cols; j++ ) {
  
    var td = el( 'td' );

    td.style.width  = '20px';
    td.style.height = '20px';

    tr.appendChild( td );
    
  }
  
  table.appendChild( tr );
  
}

document.body.appendChild( table );

td {
  border: 1px solid #ccc;
}

Option #2

functionel( tagName ) {
  returndocument.createElement( tagName );
}

var rows  = 5;
var cols  = 10;
var table = el( 'table' );

for ( var i = 0; i < rows; i++ ) {

  var tr = el( 'tr' );
  
  for ( var j = 0; j < cols; j++ ) {
    tr.appendChild( el( 'td' ) );        
  }
  
  table.appendChild( tr );
  
}

document.body.appendChild( table );

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