Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Table</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
</head>
<body>
  <label for="rows">Number of rows:</label>
  <input type="number" id="rows" min="1" max="10">
  <label for="columns">Number of columns:</label>
  <input type="number" id="columns" min="1" max="10">
  <button onclick="createTable()">Create Table</button>

  <table id="myTable">
    <!-- Table content will be added dynamically -->
  </table>

  <script>
    function createTable() {
      var rows = document.getElementById("rows").value;
      var columns = document.getElementById("columns").value;
      var table = document.getElementById("myTable");

      // Clear existing table content
      table.innerHTML = "";

      for (var i = 0; i < rows; i++) {
        var row = table.insertRow(i);
        for (var j = 0; j < columns; j++) {
          var cell = row.insertCell(j);
          cell.textContent = "Row " + (i + 1) + ", Column " + (j + 1);
        }
      }
    }
  </script>
</body>
</html>
Editor is loading...