Tablero de ajedrez en Html con tablas
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:
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>
5
Puntos
Puntos
16298
Visitas
Visitas
4
Resp
Resp
Por jorgevip hace 115 meses
Principiante
Respuesta #1
Hola jorge, está bueno. Pero para recordar, el atributo bgcolor ya no se usa, ni la etiqueta font. Para eso se usa CSS mediante clases. Por ejemplo podría ser así
.negro { background: #000; color: #fff; } .blanco { background: #fff; color: #000; }Y solo hay que colocarle las clases a cada td
<tr> <td class="negro">1</td> <td class="blanco">2</td> <td class="negro">3</td> <td class="blanco">4</td> </tr>
Respuesta #2
Aquí dejo un código que me parece bastante práctico para generar un tablero de ajedrez, usando PHP (-:
El problema está en que si quieres llenar con una información diferente, cada casilla, no podrás utilizando este código.
El problema está en que si quieres llenar con una información diferente, cada casilla, no podrás utilizando este código.
<html lang="es"> <head> <title> Tablero de Ajedrez </title> <style> body { background: #fff; } .casilla { width: 150px; height: 150px; text-align: center; line-height: 150px; font-size: 36pt; float: left; color: #1b1b1b; } .casilla:nth-child(even) { background: #141414; color: white; } .tablero { background: #f7f7f7; width: 1050px; overflow: hidden; margin: auto; box-shadow: 0px 0px 20px #ccc; } </style> </head> <body> <br> <h1 class="h1 center">Tablero de Ajedrez</h1> <br> <div class="tablero"> <?php $i = 1; while ($i <= 35) { echo "<div class=\"casilla\">".$i."</div>"; $i++; } ?> </div> </body> </html>
Respuesta #3
muy bien pensado este código
0
Puntos
Puntos
Por jorgevip hace 115 meses
Principiante
Respuesta #4
gracias a los dos por el aporte
0
Puntos
Puntos
Por zerodarck hace 115 meses
Experto