How can I create a table with Javascript and jQuery so that each cell is droppable?
<p>This code works fine to create a grid of divs:
<code></p>

<pre><code>for (var i = 0; i &lt; 10; i++) { // rows
    for (var j = 0; j &lt; 6; j++) { // columns
        var id = String.fromCharCode(65 + j) + i; // e.g., B1
        $('&lt;div&gt;&lt;/div&gt;').data('accepts', id).appendTo("#cardSlots").droppable({
            accept: '#cardPile div',
            hoverClass: 'hovered',
            drop: handleCardDrop
        }); 
    }
$("cardSlots").append("&lt;br /&gt;");
}
</code></pre>

<p></code></p>

<p>...but when I resize the window, the divs sometimes slip on to the next line. I want a table with a fixed 6x10 size, but when I try to build a table instead of divs, I break the "droppable" property.</p>

<p>How can I rewrite the code above so that it creates a 6x10 html table where each cell is droppable?</p>
