【发布时间】：2014-10-17 19:52:27
【问题描述】：
我是 HTML 新手，我参加了这个练习，我必须只用 HTML 制作棋盘。我在谷歌上搜索了很多，我发现了很多使用 Canvas 和 CSS 的解决方案，但我想用 HTML 来做，然后写下行和列的名称（在侧面）。 你能给我一些建议吗？
谢谢！
【问题讨论】：
-
一张 9x9 的桌子？
【发布时间】：2014-10-17 19:52:27
【问题描述】：
使用表格元素。
每个方块都用一个 td 元素表示。每个行和列元素都用一个 th 表示。
在示例中，我还添加了 CSS 来设置棋盘样式。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
.chess-board { border-spacing: 0; border-collapse: collapse; }
.chess-board th { padding: .5em; }
.chess-board td { border: 1px solid; width: 2em; height: 2em; }
.chess-board .light { background: #eee; }
.chess-board .dark { background: #000; }
</style>
</head>
<body>
<table class="chess-board">
<tbody>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
</tr>
<tr>
<th>8</th>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
</tr>
<tr>
<th>7</th>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
</tr>
<tr>
<th>6</th>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
</tr>
<tr>
<th>5</th>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
</tr>
<tr>
<th>4</th>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
</tr>
<tr>
<th>3</th>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
</tr>
<tr>
<th>2</th>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
</tr>
<tr>
<th>1</th>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
</tr>
</tbody>
</table>
</body>
</html>
（添加）
如果你想添加碎片：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
.chess-board { border-spacing: 0; border-collapse: collapse; }
.chess-board th { padding: .5em; }
.chess-board th + th { border-bottom: 1px solid #000; }
.chess-board th:first-child,
.chess-board td:last-child { border-right: 1px solid #000; }
.chess-board tr:last-child td { border-bottom: 1px solid; }
.chess-board th:empty { border: none; }
.chess-board td { width: 1.5em; height: 1.5em; text-align: center; font-size: 32px; line-height: 0;}
.chess-board .light { background: #eee; }
.chess-board .dark { background: #aaa; }
</style>
</head>
<body>
<table class="chess-board">
<tbody>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
</tr>
<tr>
<th>8</th>
<td class="light">♜</td>
<td class="dark">♞</td>
<td class="light">♝</td>
<td class="dark">♛</td>
<td class="light">♚</td>
<td class="dark">♝</td>
<td class="light">♞</td>
<td class="dark">♜</td>
</tr>
<tr>
<th>7</th>
<td class="dark">♟</td>
<td class="light">♟</td>
<td class="dark">♟</td>
<td class="light">♟</td>
<td class="dark">♟</td>
<td class="light">♟</td>
<td class="dark">♟</td>
<td class="light">♟</td>
</tr>
<tr>
<th>6</th>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
</tr>
<tr>
<th>5</th>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
</tr>
<tr>
<th>4</th>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
</tr>
<tr>
<th>3</th>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
</tr>
<tr>
<th>2</th>
<td class="light">♙</td>
<td class="dark">♙</td>
<td class="light">♙</td>
<td class="dark">♙</td>
<td class="light">♙</td>
<td class="dark">♙</td>
<td class="light">♙</td>
<td class="dark">♙</td>
</tr>
<tr>
<th>1</th>
<td class="dark">♖</td>
<td class="light">♘</td>
<td class="dark">♗</td>
<td class="light">♕</td>
<td class="dark">♔</td>
<td class="light">♗</td>
<td class="dark">♘</td>
<td class="light">♖</td>
</tr>
</tbody>
</table>
</body>
</html>
【讨论】：
这个怎么样：
<html>
<body>
<table>
<tbody>
<tr>
<td></td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>8</td>
</tr>
<tr>
<td>7</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>7</td>
</tr>
<tr>
<td>6</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
结果：
一种
b
C
d
e
F
G
H
8
□
■
□
■
□
■
□
■
8
7
■
□
■
□
■
□
■
□
7
6
□
■
□
■
□
■
□
■
6
5
■
□
■
□
■
□
■
□
5
4
□
■
□
■
□
■
□
■
4
3
■
□
■
□
■
□
■
□
3
2
□
■
□
■
□
■
□
■
2
1
■
□
■
□
■
□
■
□
1
一种
b
C
d
e
F
G
H
【讨论】：
你可以试试这个：
<div class="chessboard">
<div>
<div></div><div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div><div>g</div><div>h</div>
</div>
<div>
<div>8</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div>7</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div>6</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div>5</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div>4</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div>3</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div>2</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div>1</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div>
css 风格：
.chessboard{
width: 450px; height:450px;
border-style:solid;
font-size:20px; line-height:2.5;
text-align:center;}
.chessboard>div{height:11.11%;}
.chessboard>div>div{
width:11.11%; height:100%;
display:inline-block; vertical-align:top;}
.chessboard>div:nth-child(odd)>div:nth-child(even),
.chessboard>div:nth-child(even)>div:nth-child(odd)
{background-color:black; color:white;}
.chessboard>div:nth-child(1),.chessboard>div>div:nth-child(1)
{background-color:black; color:white; }
【讨论】：
你可以用 81 个方形 div 填充一个 div，全部向左浮动。
查看 jsfiddle here。
CSS：
.board{
border: 10px solid red;
width: 450px;
height: 450px;
}
.tile{
float: left;
width: 50px;
height: 50px;
background-color: #eee;
}
.tile:nth-child(even){
background-color: black;
}
HTML：
<div class="board">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<!-- and so on... -->
</div>
【讨论】：
-
你用的是css，他说没有css :)
-
确认！你是对的。哦，好吧。