Tablero de ajedrez en Html con tablas

Por Bernardo
18 mayo, 2011 - 20:30

Categoría : Html
Etiquetas : , , ,

Comentarios : No hay comentarios

Artículos Relacionados


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 arriba

Deja tu comentario