Cross Browser Compatible Dynamic Table Using DIV tags

Here is a function for createing a table using DIV tags ::

Call the function number of row times with the passing argument as array of contents to be inserted into cells.


for(i=0; i < No_Of_rows;i++)
addrow(CellContent);

function addrow(arr) {
var row = __createElement("div","myul","myul");
for (r = 0; r < arr.length; r++)
var cell = __createElement("div","myulDiv1Hist","myulDiv1Hist");
row.appendChild(cell);
cell.innerHTML = arr[r];
}
Container.appendChild(row);
}


function __createElement(tag, cls, id) {
if(tag != "")
ele = document.createElement(tag);
if(cls != "")
ele.className=cls;
if(id != "")
ele.id=id;
return ele;
}



CSS ::

.myul{
background-color:#EAEAEA;
display:block;
float:none;
font-size:8px;
color:#000000;
}

.myulDivHist{
background-color:#9E9E9E;
color:#000000;
float: left;
width: 80px;
height:24px;
border-style: outset;
border-width: 1px;
}


I think this function will help you to get out of table incompatibilities on IE and firefox. This function is very useful when you parsing an AJAX responeXML and displaying the XML data as table.

Here is a table created with the above code ::