I have successfully written some code that is functioning perfectly. My goal is to display the multiplication table using HTML tables and apply Bootstrap to style it with borders on each line represented as a table row 'tr'. The table should be styled using the Bootstrap table-bordered class.
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<h2>MultiplicationTable</h2
<form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br>
Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br>
Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>
<br><br>
<button onclick="myFunction()">Print Table</button>
<p id="MT"></p>
<script>
function myFunction()
{
var text = "";
var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
for (T = I; T <= E; T++) {
text += Number + "*" + T + "=" + Number*T + "<br>";
}
document.getElementById("MT").innerHTML = text;
}
</script>