html - 国际象棋 + 使用表格

Question

我一直在研究表格，以便可以使用 html 中的表格创建棋盘。这是我在网上找到的一些代码:HTML 代码:

    <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 代码:

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);
}

我想知道是否有人对我如何更改此代码以合并坐标系有任何想法，如下所示:http://h2g2.com/oldblobs/white/1072987.gif

Answer 1

是这样的吗？

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>