Vamos a crear un tablero de ajedrez con tablas en html. Comenzamos creando una tabla de de 400 pixel de ancho por 400 pixel de alto.
Numeramos cada celda desde el 1 al 64. Vamos a ir creando celdas de color blanco y de color negro, el texto en las celdas cuidado, cuando el fondo de la celda es negro el color del texto debe de ser blanco y cuando el fondo de la celda es blanco el color del texto debe de ser negro.
El código fuente de la tabla es el siguiente:
<table width="400" height="400px"; border="0" cellspacing="2" cellpadding="2" bgcolor="#000000"> <tr align="center"> <td><font color="#ffffff">1</font></td> <td bgcolor="#ffffff">2</td> <td><font color="#ffffff">3</font></td> <td bgcolor="#ffffff">4</td> <td><font color="#ffffff">5</font></td> <td bgcolor="#ffffff">6</td> <td><font color="#ffffff">7</font></td> <td bgcolor="#ffffff">8</td> </tr> <tr align="center"> <td bgcolor="#ffffff">9</td> <td><font color="#ffffff">10</font></td> <td bgcolor="#ffffff">11</td> <td><font color="#ffffff">12</font></td> <td bgcolor="#ffffff">13</td> <td><font color="#ffffff">14</font></td> <td bgcolor="#ffffff">15</td> <td><font color="#ffffff">16</font></td> </tr> <tr align="center"> <td><font color="#ffffff">17</font></td> <td bgcolor="#ffffff">18</td> <td><font color="#ffffff">19</font></td> <td bgcolor="#ffffff">20</td> <td><font color="#ffffff">21</font></td> <td bgcolor="#ffffff">22</td> <td><font color="#ffffff">23</font></td> <td bgcolor="#ffffff">24</td> </tr> <tr align="center"> <td bgcolor="#ffffff">25</td> <td><font color="#ffffff">26</font></td> <td bgcolor="#ffffff">27</td> <td><font color="#ffffff">28</font></td> <td bgcolor="#ffffff">29</td> <td><font color="#ffffff">30</font></td> <td bgcolor="#ffffff">31</td> <td><font color="#ffffff">32</font></td> </tr> <tr align="center"> <td><font color="#ffffff">33</font></td> <td bgcolor="#ffffff">34</td> <td><font color="#ffffff">35</font></td> <td bgcolor="#ffffff">36</td> <td><font color="#ffffff">37</font></td> <td bgcolor="#ffffff">38</td> <td><font color="#ffffff">39</font></td> <td bgcolor="#ffffff">40</td> </tr> <tr align="center"> <td bgcolor="#ffffff">41</td> <td><font color="#ffffff">42</font></td> <td bgcolor="#ffffff">43</td> <td><font color="#ffffff">44</font></td> <td bgcolor="#ffffff">45</td> <td><font color="#ffffff">46</font></td> <td bgcolor="#ffffff">47</td> <td><font color="#ffffff">48</font></td> </tr> <tr align="center"> <td><font color="#ffffff">49</font></td> <td bgcolor="#ffffff">50</td> <td><font color="#ffffff">51</font></td> <td bgcolor="#ffffff">52</td> <td><font color="#ffffff">53</font></td> <td bgcolor="#ffffff">54</td> <td><font color="#ffffff">55</font></td> <td bgcolor="#ffffff">56</td> </tr> <tr align="center"> <td bgcolor="#ffffff">57</td> <td><font color="#ffffff">58</font></td> <td bgcolor="#ffffff">59</td> <td><font color="#ffffff">60</font></td> <td bgcolor="#ffffff">61</td> <td><font color="#ffffff">62</font></td> <td bgcolor="#ffffff">63</td> <td><font color="#ffffff">64</font></td> </tr> </table>
El resultado lo podemos ver en la imagen de abajo
Vamos a crear un tablero de ajedrez con tablas en html. Comenzamos creando una tabla de de 400 pixel de ancho por 400 pixel de alto.
Numeramos cada celda desde el 1 al 64. Vamos a ir creando celdas de color blanco y de color negro, el texto en las celdas cuidado, cuando el fondo de la celda es negro el color del texto debe de ser blanco y cuando el fondo de la celda es blanco el color del texto debe de ser negro.
El código fuente de la tabla es el siguiente:
<table width="400" height="400px"; border="0" cellspacing="2" cellpadding="2" bgcolor="#000000"> <tr align="center"> <td><font color="#ffffff">1</font></td> <td bgcolor="#ffffff">2</td> <td><font color="#ffffff">3</font></td> <td bgcolor="#ffffff">4</td> <td><font color="#ffffff">5</font></td> <td bgcolor="#ffffff">6</td> <td><font color="#ffffff">7</font></td> <td bgcolor="#ffffff">8</td> </tr> <tr align="center"> <td bgcolor="#ffffff">9</td> <td><font color="#ffffff">10</font></td> <td bgcolor="#ffffff">11</td> <td><font color="#ffffff">12</font></td> <td bgcolor="#ffffff">13</td> <td><font color="#ffffff">14</font></td> <td bgcolor="#ffffff">15</td> <td><font color="#ffffff">16</font></td> </tr> <tr align="center"> <td><font color="#ffffff">17</font></td> <td bgcolor="#ffffff">18</td> <td><font color="#ffffff">19</font></td> <td bgcolor="#ffffff">20</td> <td><font color="#ffffff">21</font></td> <td bgcolor="#ffffff">22</td> <td><font color="#ffffff">23</font></td> <td bgcolor="#ffffff">24</td> </tr> <tr align="center"> <td bgcolor="#ffffff">25</td> <td><font color="#ffffff">26</font></td> <td bgcolor="#ffffff">27</td> <td><font color="#ffffff">28</font></td> <td bgcolor="#ffffff">29</td> <td><font color="#ffffff">30</font></td> <td bgcolor="#ffffff">31</td> <td><font color="#ffffff">32</font></td> </tr> <tr align="center"> <td><font color="#ffffff">33</font></td> <td bgcolor="#ffffff">34</td> <td><font color="#ffffff">35</font></td> <td bgcolor="#ffffff">36</td> <td><font color="#ffffff">37</font></td> <td bgcolor="#ffffff">38</td> <td><font color="#ffffff">39</font></td> <td bgcolor="#ffffff">40</td> </tr> <tr align="center"> <td bgcolor="#ffffff">41</td> <td><font color="#ffffff">42</font></td> <td bgcolor="#ffffff">43</td> <td><font color="#ffffff">44</font></td> <td bgcolor="#ffffff">45</td> <td><font color="#ffffff">46</font></td> <td bgcolor="#ffffff">47</td> <td><font color="#ffffff">48</font></td> </tr> <tr align="center"> <td><font color="#ffffff">49</font></td> <td bgcolor="#ffffff">50</td> <td><font color="#ffffff">51</font></td> <td bgcolor="#ffffff">52</td> <td><font color="#ffffff">53</font></td> <td bgcolor="#ffffff">54</td> <td><font color="#ffffff">55</font></td> <td bgcolor="#ffffff">56</td> </tr> <tr align="center"> <td bgcolor="#ffffff">57</td> <td><font color="#ffffff">58</font></td> <td bgcolor="#ffffff">59</td> <td><font color="#ffffff">60</font></td> <td bgcolor="#ffffff">61</td> <td><font color="#ffffff">62</font></td> <td bgcolor="#ffffff">63</td> <td><font color="#ffffff">64</font></td> </tr> </table>
El resultado lo podemos ver en la imagen de abajo
