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>