Wednesday, 25 July 2012

How to create dynamic tables in HTML using javascript at runtime?

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>

<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;


<body onload="CreateTable()">
<h1>My First Web Page</h1>
<p id="tablespace"></p>

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.


  1. very useful things i get from this blog thank s....

  2. The injection process works by prematurely terminating a text string and appending a new command. Because the inserted command may have additional strings appended to it before it is executed, the malefactor terminates the injected string with a comment mark "--". Subsequent text is ignored at execution time.
    term papers

  3. i did same thing previously but was not working properly on IE

    I will run this code again and let you know.
    createElement should work properly


  4. simple and super code thanks dude.......