function drawTable() { var rows = parseInt(document.getElementById("numRows").value); var cols = parseInt(document.getElementById("numColumns").value); var theHtmlCode = ""; theHtmlCode = "<table>"; theHtmlCode += "<tr>"; for ( var i=1 ; i<=cols ; i++ ) { theHtmlCode += "<th>"; theHtmlCode += "Column " + i; theHtmlCode += "</th>"; } theHtmlCode += "</tr>"; // create table rows for ( var j=1 ; j<=rows ; j++ ) { theHtmlCode += "<tr>"; // create table cells for ( var k=1 ; k<=cols ; k++ ) { if (k==j) { theHtmlCode += "<td class='across'>"; } else { theHtmlCode += "<td>"; } theHtmlCode += j + "." + k; theHtmlCode += "</td>"; } theHtmlCode += "</tr>"; } // close table tag theHtmlCode += "</table>"; document.getElementById("whereTheTableGoes").innerHTML = theHtmlCode; }

 body { background-color: lightblue} h1 {text-align: center} td { border: 2px blue solid} th { border: 3px red solid} img {border: 1px solid black} .across {background-color: pink} tr:nth-child(even) {background-color: #eb00ff;}

 <label>How Many Rows Do You Want in the Table?</label> <input type="number" min="1" id="numRows" placeholder="1 or more"> <br><br> <label>How Many Columns Do You Want in the Table?</label> <input type="number" min="1" id="numColumns" placeholder="1 or more"> <br><br> <button onclick="drawTable()">Click to Draw the Table</button><br><br> <div id="whereTheTableGoes"></div>