HTML MC Inventorius

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style>
            .table {
                background-color: #f1f1f1;
                min-width: 500px;
                height: 250px;
                border: 0.5px solid #000;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
            }
            tbody td {
                background-color: #c4c4c4;
            }

            .space {
                margin: 0px 5px;
                background-color: #f1f1f1;
                width: 5px;
                height: 5px;
                max-height: 5px;
                max-width: 5px;
            }

            .space1 {
                background-color: #f1f1f1;
                width: 5px;
            }

            td {
                text-align: center;
                max-width: 60px;
                max-height: 53px;
                width: 60px;
                height: 53px;
            }

            .drop {
                max-width: 60px;
                max-height: 53px;
                width: 60px;
                height: 53px;
                padding-top: 3px;
            }

            .space2 {
                width: 5px;
                height: 5px;
                max-height: 5px;
                max-width: 5px;
            }

        </style>
        <script>
            function allowDrop(ev) {
                ev.preventDefault();
            }

            function drag(ev) {
                ev.dataTransfer.setData("Text", ev.target.id);
            }

            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>
        <table class='table'>
            <thead>
                <tr>
                    <td colspan=11><center style='color: #c4c4c4'><b>Mano</b> Inventorius</center></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class='space1'> </td>
<?php
for($i=1;$i<10;$i++) {
    echo "<td><div class='drop' ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"></div></td>";
}
?>
                    <td class='space'> </td>
                </tr>
                <tr>
                    <td class='space1'> </td>
<?php
for($i=10;$i<19;$i++) {
    echo "<td><div class='drop' ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"></div></td>";
}
?>
                    <td class='space'> </td>
                </tr>
                <tr>
                    <td class='space1'> </td>
<?php
for($i=19;$i<28;$i++) {
    echo "<td><div class='drop' ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"></div></td>";
}
?>
                    <td class='space'> </td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <td colspan=11 class='space2'></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class='space1'> </td>
<?php
for($i=28;$i<37;$i++) {
    echo "<td><div class='drop' ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"></div></td>";
}
?>
                    <td class='space'> </td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <td colspan=11 class='space2'> </td>
                </tr>
            </thead>
        </table>
<img id="drag1" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag2" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag3" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag4" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag5" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag6" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag7" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag8" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag9" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag10" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
<img id="drag11" src="http://www.laboratory424.com/files/images/build/mcpp/panels/wood-th.png" draggable="true" ondragstart="drag(event)">
    </body>
</html>