Help creating div for drag and drop

[apgriffiths]

I am trying to create a drag and drop area. The theme for the area is a football pitch, the picture is broken up into a grid, please see the attached picture for what ive done so far,
So far i have only done it using a table using the following code,

<table id="pitch" class="dropZoneContainer">
            <tr id="gk" align="center" valign="middle">
                <td>
                    <div id="goalkeeper" class="dropZone" />
                </td>
            </tr>
            <tr id="def" align="center" valign="middle">
                <td>
                    <div id="defender1" class="dropZone" />
                </td>
                <td>
                    <div id="defender2" class="dropZone" />
                </td>
                <td>
                    <div id="defender3" class="dropZone" />
                </td>
                <td>
                    <div id="defender4" class="dropZone" />
                </td>
            </tr>
            <tr id="mid" align="center" valign="middle">
                <td>
                    <div id="midfielder1" class="dropZone" />
                </td>
                <td>
                    <div id="midfielder2" class="dropZone" />
                </td>
                <td>
                    <div id="midfielder3" class="dropZone" />
                </td>
            </tr>
            <tr id="str" align="center" valign="middle">
                <td>
                    <div id="striker1" class="dropZone" />
                </td>
                <td>
                    <div id="striker2" class="dropZone" />
                </td>
                <td>
                    <div id="striker3" class="dropZone" />
                </td>
            </tr>
        </table>

But the table is not very flexible so i want to use just div and css, any help on this is very welcome as i am a newbie at this.