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:

<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

16094
Visitas

4
Resp

Por jorgevip hace 11 años

Novice

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>

0
Puntos

Por jose hace 11 años

Master

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.

<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>

10
Puntos

Por jose hace 11 años

Master

Respuesta #3

muy bien pensado este código

0
Puntos

Por jorgevip hace 11 años

Novice

Respuesta #4

gracias a los dos por el aporte

0
Puntos

Por zerodarck hace 11 años

Master