Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Webmaster Html

Tablero de ajedrez en Html con tablas

18 mayo, 2011
en Html
0
Tablero de ajedrez en Html con tablas
Share on FacebookShare on Twitter

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

Tablero de Ajedrez en HTML
Tablero de Ajedrez en HTML
Etiquetas: ajedrezHTMLtablastable
ANUNCIO
Post anterior

Cambio de Servidor

Próximo Post

Ejemplos con Div

Otros Posts

Web semantica con HTML5

Enlace para llamar por teléfono HTML5

13 marzo, 2016
1

¿Sabes marcar un número de teléfono desde un enlace? Te decimos como hacerlo con una etiqueta HTML5

Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Manual HTML: Cómo insertar espacios en blanco y saltos de línea

20 febrero, 2016
0

Continuamos con nuestro manual de HTML, en esta ocasión veremos los espacios en blanco y los saltos de línea. en su día ya vimos como dar formato básico a un texto con HTML, hoy terminaremos...

Recomendados

Web semantica con HTML5

Web semantica con HTML5

11 febrero, 2016
SEO Básico: ¿Qué es el Permanlink (enlaces permanentes)?

La importancia del link building para SEO

24 mayo, 2022
OpenStreetMap

OpenStreetMap

27 octubre, 2013
pwa

Qué son las PWA y cómo crear una

12 mayo, 2020

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .