How to dynamically populate multi column of a div in html? -

based on content available in 'div',i want divide , show in no.of columns .please tell me how acheive this?

any samples please tell me know.

edit:

$(document).ready(function () {          tab_div = $('#id_of_table');         (i = 0; < 3; i++) {             debugger;             $('<tr>').appendto(tab_div);             (j = 0; j < 3; j++) {                 $('<td>'+ j + '</td>').appendto(tab_div);             }             $('</tr>').appendto(tab_div);         } 

fiddle: http://jsfiddle.net/ef2bf/3/

the answer depends on how data structured in div, , if want first 60 items first column, 60 next second, etc. simplest way alternate between columns, in fashion:

column 1 | column 2 | column 3 item 0   | item 1   | item 2 item 3   | item 4   | item 5 

i have provided jsfiddle example: http://jsfiddle.net/ef2bf/3/ main part of code bit:

//loop through each row (60 times) (i = numitems * j; < numitems * numcolumns; = + numcolumns) {     tablehtml += '<tr>';     //loop through al each column (3 times)     (j = 0; j < numcolumns; j = j + 1) {         index = + j;         tablehtml += '<td>' + $($items[index]).text() + '</td>'     }     tablehtml += '</tr>';  } 

edit

i updated fiddle second solution items 0-59 in first column, 60-119 in second, etc. can find @ bottom:

//solution 2 tablehtml = '<table>'; (i = 0; < numitems; = + 1) {      tablehtml += '<tr>';      for(j = 0; j < numcolumns; j = j+1){         tablehtml += '<td>' + $($items[i + (j * numitems)]).text() + '</td>';     }     tablehtml += '</tr>';  } tablehtml += '</table>';  $("#table2").html(tablehtml);