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

  5. Coach Outlet Store Online Michael Kors Outlet Coach Factory Outlet Toms Shoes Cheap Jerseys Michael Kors Coach Outlet Coach Factory Outlet Coach Outlet Coach Handbags Giuseppe Zanotti Coach Factory Outlet Online Coach Outet Store Online Coach Factory Outlet Michael Kors Outlet Online Celine Outlet Michael Kors Michael Kors Store Tomss Hoes Prada Outlet Fitflop Footwear Celine Bags Fitflops Flipflops Fitflops Giuseppe Zanotti Designer Fitflops Giuseppe Zanotti Sneakersmen Fitflops

  6. Excellent and decent post. I found this much informative. I'm impressed by the details that you have on this web site. Thank you for this post. movers and packers jaipur .