0

I've just been researching tables so that I can create a chess board using tables in html. Here is some code I found online: HTML CODE:

    <table id="chess_board" cellpadding="0" cellspacing="0">
<tr>
    <td id="A8"><a href="#" class="rook black">&#9820;</a></td>
    <td id="B8"><a href="#" class="night black">&#9822;</a></td>
    <td id="C8"><a href="#" class="bishop black">&#9821;</a></td>
    <td id="D8"><a href="#" class="king black">&#9819;</a></td>
    <td id="E8"><a href="#" class="queen black">&#9818;</a></td>
    <td id="F8"><a href="#" class="bishop black">&#9821;</a></td>
    <td id="G8"><a href="#" class="night black">&#9822;</a></td>
    <td id="H8"><a href="#" class="rook black">&#9820;</a></td>
</tr>
<tr>
    <td id="A7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="B7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="C7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="D7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="E7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="F7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="G7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="H7"><a href="#" class="pawn black">&#9823;</a></td>
</tr>
<tr>
    <td id="A6"></td>
    <td id="B6"></td>
    <td id="C6"></td>
    <td id="D6"></td>
    <td id="E6"></td>
    <td id="F6"></td>
    <td id="G6"></td>
    <td id="H6"></td>
</tr>
<tr>
    <td id="A5"></td>
    <td id="B5"></td>
    <td id="C5"></td>
    <td id="D5"></td>
    <td id="E5"></td>
    <td id="F5"></td>
    <td id="G5"></td>
    <td id="H5"></td>
</tr>
<tr>
    <td id="A4"></td>
    <td id="B4"></td>
    <td id="C4"></td>
    <td id="D4"></td>
    <td id="E4"></td>
    <td id="F4"></td>
    <td id="G4"></td>
    <td id="H4"></td>
</tr>
<tr>
    <td id="A3"></td>
    <td id="B3"></td>
    <td id="C3"></td>
    <td id="D3"></td>
    <td id="E3"></td>
    <td id="F3"></td>
    <td id="G3"></td>
    <td id="H3"></td>
</tr>
<tr>
    <td id="A2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="B2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="C2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="D2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="E2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="F2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="G2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="H2"><a href="#" class="pawn white">&#9817;</a></td>
</tr>
<tr>
    <td id="A1"><a href="#" class="rook white">&#9814;</a></td>
    <td id="B1"><a href="#" class="night white">&#9816;</a></td>
    <td id="C1"><a href="#" class="bishop white">&#9815;</a></td>
    <td id="D1"><a href="#" class="king white">&#9813;</a></td>
    <td id="E1"><a href="#" class="wife white">&#9812;</a></td>
    <td id="F1"><a href="#" class="bishop white">&#9815;</a></td>
    <td id="G1"><a href="#" class="night white">&#9816;</a></td>
    <td id="H1"><a href="#" class="rook white">&#9814;</a></td>
</tr>

CSS CODE:

a {
color:#000;
display:block;
font-size:60px;
height:80px;
position:relative;
text-decoration:none;
text-shadow:0 1px #fff;
width:80px;
}
#chess_board { border:5px solid #333; }
#chess_board td {
background:#fff;
background:-moz-linear-gradient(top, #fff, #eee);
background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee));
box-shadow:inset 0 0 0 1px #fff;
-moz-box-shadow:inset 0 0 0 1px #fff;
-webkit-box-shadow:inset 0 0 0 1px #fff;
height:80px;
text-align:center;
vertical-align:middle;
width:80px;
}
#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd) {
background:#ccc;
background:-moz-linear-gradient(top, #ccc, #eee);
background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
box-shadow:inset 0 0 10px rgba(0,0,0,.4);
-moz-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
}

I was wondering if anyone would have any ideas as to how I could change this code to incorporate a coordinate system as shown here: http://h2g2.com/oldblobs/white/1072987.gif

1 Answer 1

5

Something like this?

jsfiddle: http://jsfiddle.net/M6pfq/

<table id="chess_board" cellpadding="0" cellspacing="0">
<tr>
    <td><a href="#">8</a></td>
    <td id="A8"><a href="#" class="rook black">&#9820;</a></td>
    <td id="B8"><a href="#" class="night black">&#9822;</a></td>
    <td id="C8"><a href="#" class="bishop black">&#9821;</a></td>
    <td id="D8"><a href="#" class="king black">&#9819;</a></td>
    <td id="E8"><a href="#" class="queen black">&#9818;</a></td>
    <td id="F8"><a href="#" class="bishop black">&#9821;</a></td>
    <td id="G8"><a href="#" class="night black">&#9822;</a></td>
    <td id="H8"><a href="#" class="rook black">&#9820;</a></td>
</tr>
<tr>
    <td><a href="#">7</a></td>
    <td id="A7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="B7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="C7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="D7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="E7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="F7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="G7"><a href="#" class="pawn black">&#9823;</a></td>
    <td id="H7"><a href="#" class="pawn black">&#9823;</a></td>
</tr>
<tr>
    <td><a href="#">6</a></td>
    <td id="A6"></td>
    <td id="B6"></td>
    <td id="C6"></td>
    <td id="D6"></td>
    <td id="E6"></td>
    <td id="F6"></td>
    <td id="G6"></td>
    <td id="H6"></td>
</tr>
<tr>
    <td><a href="#">5</a></td>
    <td id="A5"></td>
    <td id="B5"></td>
    <td id="C5"></td>
    <td id="D5"></td>
    <td id="E5"></td>
    <td id="F5"></td>
    <td id="G5"></td>
    <td id="H5"></td>
</tr>
<tr>
    <td><a href="#">4</a></td>
    <td id="A4"></td>
    <td id="B4"></td>
    <td id="C4"></td>
    <td id="D4"></td>
    <td id="E4"></td>
    <td id="F4"></td>
    <td id="G4"></td>
    <td id="H4"></td>
</tr>
<tr>
    <td><a href="#">3</a></td>
    <td id="A3"></td>
    <td id="B3"></td>
    <td id="C3"></td>
    <td id="D3"></td>
    <td id="E3"></td>
    <td id="F3"></td>
    <td id="G3"></td>
    <td id="H3"></td>
</tr>
<tr>
    <td><a href="#">2</a></td>
    <td id="A2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="B2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="C2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="D2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="E2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="F2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="G2"><a href="#" class="pawn white">&#9817;</a></td>
    <td id="H2"><a href="#" class="pawn white">&#9817;</a></td>
</tr>
<tr>
    <td><a href="#">1</a></td>
    <td id="A1"><a href="#" class="rook white">&#9814;</a></td>
    <td id="B1"><a href="#" class="night white">&#9816;</a></td>
    <td id="C1"><a href="#" class="bishop white">&#9815;</a></td>
    <td id="D1"><a href="#" class="king white">&#9813;</a></td>
    <td id="E1"><a href="#" class="wife white">&#9812;</a></td>
    <td id="F1"><a href="#" class="bishop white">&#9815;</a></td>
    <td id="G1"><a href="#" class="night white">&#9816;</a></td>
    <td id="H1"><a href="#" class="rook white">&#9814;</a></td>
</tr>
<tr>
    <td></td>
    <td><a href="#">A</a></td>
    <td><a href="#">B</a></td>
    <td><a href="#">C</a></td>
    <td><a href="#">D</a></td>
    <td><a href="#">E</a></td>
    <td><a href="#">F</a></td>
    <td><a href="#">G</a></td>
    <td><a href="#">H</a></td>
</tr>
4
  • :) that's it. you just have multiple IDs Aug 29, 2013 at 8:37
  • Okay removed the id's sorry was a quick reply so rushed it a bit ;) Aug 29, 2013 at 8:38
  • I was trying to get it so the black border of the table only covers the literal chess board, not the coordinates (So the coordinates just have a white background). Do you think that's possible?
    – Sev
    Aug 29, 2013 at 8:39
  • I mean, like, the black border is only around the actual chess board where the chess pieces are, leaving the letters and numbers outside the black border.
    – Sev
    Aug 29, 2013 at 8:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.