Spacing Table Cells using CSS/Javascript/JQuery

Question

What I'm trying to do is have a grid layout - that you can edit the number of rows/columns you want, and that part works fine for the most part. But whatever I do I can't seem to get the individual cells to space properly. Originally I had it built as a table- but was told divs could behave like a table, and figured they would be easier to manipulate CSS but no avail.

The problems I run into is trying to change the width/padding/margin/etc of the cells to create a spacing, generally warps the height/width of the thumbnail.

Also another problem I had was the spacing between rows seems to just randomly have extra height for no reason-

Is there a better way to go about what I'm trying to do - some sort of simple customizable grid layout or how can I get the spacing to be the way I want it?

Background - still trying to build a customizable image gallery based off jQuery/Javascript so I can create a database to upload images to because I couldn't find anything I liked, here's what I have so far if your interested: http://drewswinson.com/DP/

Answer 1

HTML:

<table>
    <tr>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
    </tr>
    <tr>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
    </tr>
</table>

CSS:

td { padding:6px; }
img { border:3px solid white; display:block; }

Live demo: http://jsfiddle.net/simevidas/Rmj3w/