<html>
   <head><title>🚢 Schiffe versenken</title></head>

   <body>
      <form><label><input type='checkbox' id='fertig'>Sind alle 🚢 gesetzt?</label></form>

      <script>
         var tabellenRandFarbe = ["green","red"];
         var tabellenZellenFarbe = new Array();
         tabellenZellenFarbe[false] = {white:"green",green:"white"};
         tabellenZellenFarbe[true] = {white:"blue",blue:"red",red:"black",black:"white",green:"red"};

         for(var Feld=1;Feld<=2;Feld++) {
            document.write('<table border=10 style="border-color:'+tabellenRandFarbe[Feld-1]+';margin-bottom:20px;">');
            for(var Zeilen=10;Zeilen>=1;Zeilen--) {
               document.write('<tr height=50>');
               for(var Spalten=1;Spalten<=10;Spalten++) {
                  document.write('<td align="center" valign="middle" width=50 style="background-color:white;"' +
                  'onclick="javascript:this.style.backgroundColor=tabellenZellenFarbe'+
                  '[document.getElementById(\'fertig\').checked][this.style.backgroundColor];">');
                  document.write(String.fromCharCode(64+Spalten)+' '+Zeilen);
                  document.write('</td>');
                  }
               document.write('</tr>');
               }
            document.write('</table>');
            }
      </script>
   </body>
</html>