codice:
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >

</head>

<link href="style.css" hreflang="it" type="text/css" rel="stylesheet">

</head>

<body bgcolor="#F4F4F4">

<div id="header">
<table cellspacing="0" cellpadding="0" width="100%" height="60px">
<tr>
<td align="center" bgcolor="#002600"><br><img src="logolup.gif" alt="" /><br><br></td>
</tr>
<tr>
<td bgcolor="green" align="center">
<font id="title"><strong>C.S.D. LUPIÆ 1970</strong></font>
<td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" width="100%" height="10px">
<tr>
<td bgcolor="#81C193" align="center">

<ul id="menu">
<li><a href="#">HOME</a></li>
<li><a href="#">STORIA</a></li>    
<li><a href="#">SOCIETÀ</a></li>
<li><a href="#">TESSERAMENTI</a></li>
<li><a href="#">TORNEI</a></li>
<li><a href="#">BANDI</a></li>
<li><a href="#">ARCHIVIO</a></li>
<li><a href="#">NOTIZIE</a></li>
<li><a href="#">CONTATTI</a></li>
<li><a href="#">BIBLIOTECA</a></li>
<li><a href="#">GALLERIA</a></li>
</td>
</tr>
<tr height="10px">
<td bgcolor="#F4F4F4"><font color="#F4F4F4">...</font></td>
</tr>
</table>

</div>

<div id="content">


<table id="scacchiera" width="1000px" height="400px" border="1" cellpadding="0" cellspacing="0" align="center" >

<caption align="center"> PARTITA UNO </caption>


<tr>
<td bgcolor="#E9E3E3" align="center" id="a8" class="casa"><font size="6" class="pezzo">♜</font></td>
<td bgcolor="#C8BFBF" align="center" id="b8" class="casa"><font size="6" class="pezzo">♞</font></td>
<td bgcolor="#E9E3E3" align="center" id="c8" class="casa"><font size="6" class="pezzo">♝</font></td>
<td bgcolor="#C8BFBF" align="center" id="d8" class="casa"><font size="6" class="pezzo">♛</font></td>
<td bgcolor="#E9E3E3" align="center" id="e8" class="casa"><font size="6" class="pezzo">♚</font></td>
<td bgcolor="#C8BFBF" align="center" id="f8" class="casa"><font size="6" class="pezzo">♝</font></td>
<td bgcolor="#E9E3E3" align="center" id="g8" class="casa"><font size="6" class="pezzo">♞</font></td>
<td bgcolor="#C8BFBF" align="center" id="h8" class="casa"><font size="6" class="pezzo">♜</font></td>

<td bgcolor="#DEE9E1" rowspan="8" width="600px" id="commento" class="commento"></td>



</tr>
<tr>
<td bgcolor="#C8BFBF" align="center" id="a7" class="casa"><font size="6" class="pezzo">♟</font></td>
<td bgcolor="#E9E3E3" align="center" id="b7" class="casa"><font size="6" class="pezzo">♟</font></td>
<td bgcolor="#C8BFBF" align="center" id="c7" class="casa"><font size="6" class="pezzo">♟</font></td>
<td bgcolor="#E9E3E3" align="center" id="d7" class="casa"><font size="6" class="pezzo">♟</font></td>
<td bgcolor="#C8BFBF" align="center" id="e7" class="casa"><font size="6" class="pezzo">♟</font></td>
<td bgcolor="#E9E3E3" align="center" id="f7" class="casa"><font size="6" class="pezzo">♟</font></td>
<td bgcolor="#C8BFBF" align="center" id="g7" class="casa"><font size="6" class="pezzo">♟</font></td>
<td bgcolor="#E9E3E3"  align="center" id="h7" class="casa"><font size="6" class="pezzo">♟</font></td>
</tr>
<tr>
<td bgcolor="#E9E3E3" align="center" id="a6" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="b6" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="c6" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="d6" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="e6" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="f6" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="g6" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="h6" class="casa"><font size="6"><br></font></td>
</tr>
<tr>
<td bgcolor="#C8BFBF" align="center" id="a5" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="b5" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="c5" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="d5" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="e5" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="f5" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="g5" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="h5" class="casa"><font size="6"><br></font></td>
</tr>
<tr>
<td bgcolor="#E9E3E3" align="center" id="a4" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="b4" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="c4" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="d4" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="e4" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="f4" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="g4" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="h4" class="casa"><font size="6"><br></font></td>
</tr>
<tr>
<td bgcolor="#C8BFBF" align="center" id="a3" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="b3" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="c3" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="d3" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="e3" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="f3" class="casa"><font size="6"><br></font></td>
<td bgcolor="#C8BFBF" align="center" id="g3" class="casa"><font size="6"><br></font></td>
<td bgcolor="#E9E3E3" align="center" id="h3" class="casa"><font size="6"><br></font></td>
</tr>
<tr>
<td bgcolor="#E9E3E3" align="center" id="a2" class="casa"><font size="6" class="pezzo">♙</font></td>
<td bgcolor="#C8BFBF" align="center" id="b2" class="casa"><font size="6" class="pezzo">♙</font></td>
<td bgcolor="#E9E3E3" align="center" id="c2" class="casa"><font size="6" class="pezzo">♙</font></td>
<td bgcolor="#C8BFBF" align="center" id="d2" class="casa"><font size="6" class="pezzo">♙</font></td>
<td bgcolor="#E9E3E3" align="center" id="e2" class="casa"><font size="6" class="pezzo">♙</font></td>
<td bgcolor="#C8BFBF" align="center" id="f2" class="casa"><font size="6" class="pezzo">♙</font></td>
<td bgcolor="#E9E3E3" align="center" id="g2" class="casa"><font size="6" class="pezzo">♙</font></td>
<td bgcolor="#C8BFBF" align="center" id="h2" class="casa"><font size="6" class="pezzo">♙</font></td>
</tr>
<tr>
<td bgcolor="#C8BFBF" align="center" id="a1" class="casa"><font size="6" class="pezzo">♖</font></td>
<td bgcolor="#E9E3E3" align="center" id="b1" class="casa"><font size="6" class="pezzo">♘</font></td>
<td bgcolor="#C8BFBF" align="center" id="c1" class="casa"><font size="6" class="pezzo">♗</font></td>
<td bgcolor="#E9E3E3" align="center" id="d1" class="casa"><font size="6" class="pezzo">♕</font></td>
<td bgcolor="#C8BFBF" align="center" id="e1" class="casa"><font size="6" class="pezzo">♔</font></td>
<td bgcolor="#E9E3E3" align="center" id="f1" class="casa"><font size="6" class="pezzo">♗</font></td>
<td bgcolor="#C8BFBF" align="center" id="g1" class="casa"><font size="6" class="pezzo">♘</font></td>
<td bgcolor="#E9E3E3" align="center" id="h1" class="casa"><font size="6" class="pezzo">♖</font></td>
</tr>
<tr>
<td colspan="9" class="casa"></td>
</tr>
</table>



</div>
</body>
Salve, ulteriori questioni mi hanno fatto virare sulla soluzione "drag and drop", per permettere al visitatore di seguire l'ordine delle mosse, che verranno scritte in un div "commento" e, a mano, muovere i pezzi. Ho assegnato una classe ai font dei pezzi e nel css ho specificato, sicuramente sbagliando, draggable : "true"; mentre per le td con classe "casa" ho scritto sempre nel css target : "true";Ora, premetto di aver letto la pagina del sito riguardo all'argomento drag and drop, inoltre ho consultato la w3school ma non riesco a capire come adattare al mio testo la parte relativa alle funzioni da inserire nello script, nè tantomeno in che modo correttamente inserire le condizioni e anche se queste possono essere o meno inserite nel foglio di stile che posto subito sotto. @Ciro78 potresti darmi una piccola mano?

codice:


body{
    

    color: #153C1D;
    text-align: justify;
    
    padding: 200px 0 0 0;
    
}

#content

{
padding: 30 0 0 0;

}
#header
{
overflow:auto;  
width: 100%; 
height: 290px;  
position: fixed; 
top: 0;  
left: 0; 


}
a {

color: green;
text-decoration: none;

}
a:hover {
    
color:green;    
    
}    
a:visited    {
    
color:green;    
    
    }    
        a:active{
            
color:green;            
            
        }    
#menu { 
 
font-size: 13px;
font-weight: bolder; 
color:green; 
text-decoration:none; 
display:inline-block; 
list-style-type:none; 
margin: 5px;
 
} 

ul#menu {
    
list-style: none;    
    
    }

ul#menu li {

float: left;
display: block;
    
    } 

#menu li {
    
    
    padding: 10px;
font-weight: bold;


}

#menu li a:hover{
    
    
    color: black;
    border-bottom: 5px solid black;
font-weight: bold;

}

#title {

 font-size:25px;
 color:white;
 font-weight:bolder;
 text-shadow: -2pt 2pt 2pt black ;
 
}

#scacchiera {

border-collapse: collapse;

}

.casa {

font-size: 32px;
target: true;

}

.commento {

margin: 5px;
text-align: center;

}

.pezzo {

draggable: true;


}