In this tutorial, you will come to know how to create dynamic tables in HTML. There are some situations when you don't know the contents of the table at design time while creating the table. In this condition, you want to load and fill the table at run time. Here in this code we will write javascript code to create the table at runtime.
Code Snippet
<!DOCTYPE html>
<html>
<head>
<html>
<head>
<script type="text/javascript">
function CreateTable()
{
var tablecontents = "";
tablecontents = "<table>";
for (var i = 0; i < 5; i ++)
{
tablecontents += "<tr>";
tablecontents += "<td>" + i + "</td>";
tablecontents += "<td>" + i * 100 + "</td>";
tablecontents += "<td>" + i * 1000 + "</td>";
tablecontents += "</tr>";
}
tablecontents += "</table>";
document.getElementById("tablespace").innerHTML = tablecontents;
}
</script>
</head>
<body onload="CreateTable()">
<h1>My First Web Page</h1>
<p id="tablespace"></p>
<p id="tablespace"></p>
</body>
</html>
</html>
Explanation: Here in this code snippet, in the body of the html page, there is a <p> tag in which we want to place a table at runtime. So, we are calling a javascript function 'CreateTable' on the load of page. It will create table at runtine and will change the innerHTML of <p> tag at runtime.