Creating tables in Internet Explorer

Posted on 2006-04-23
Last Modified: 2008-02-01
I wrote the following code as a learning experiment to create a simple table using createElement and insertBefore.  The code simply creates a button which then lets you add more tables to the page.  The table appears as a simple blue box.

But I want each new table to appear next to the previous table, so if you keep clicking the create table button, new tables appear left to right.  This is how the code behaves in Firefox.  But in Internet Explorer, the tables appear vertically, as if it does not understand the "float" property.

Why does this happen in Internet Explorer, and what are some fixes?

.adboxdiv {
      float: left;
      margin: 0px 15px 15px 0px

<script language = "Javascript">

function addelement() {
      var pdiv = document.createElement("div");
      var ptable = document.createElement("table");
      var ptbody = document.createElement("tbody");
      var prow = document.createElement("tr");
      var pcell = document.createElement("td");



      document.getElementById("maincell").insertBefore(pdiv, document.getElementById('tablediv'));            


<table id = "maintable" border = "0" cellspacing = "0" cellpadding = "0" width = "100%">
<tr><td id = "maincell">

<div id = "tablediv" class = "adboxdiv"><table border = "0"><tr><td width = "100" height = "50" bgColor = =#FF0000"></td></tr></table></div>



<input type = "submit" value = "add a table" onclick = "addelement()">
<input type = "submit" value = "delete table" onclick = "removeelement()">

Question by:chsalvia
    LVL 49

    Accepted Solution

    Try using the className property as an extension to setAttribute("class"):

         pdiv.className = "adboxdiv"

    LVL 49

    Expert Comment

    I am not sure about the technical reasons why msIE behaves this way, but I know msIE has difficulties which some of the basic dom operations like setAttribute.


    Author Comment

    Thanks!  That worked nicely.  

    Featured Post

    Training Course: Java/J2EE and SOA

    This course will cover both core and advanced Java concepts like Database connectivity, Threads, Exception Handling, Collections, JSP, Servlets, XMLHandling, and more. You'll also learn various Java frameworks like Hibernate and Spring.

    Join & Write a Comment

    Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
    In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now