htmlchess
Chessboard - HTML(5) only
I'm new in HTML and I came to the exercise, where I have to make chess board in HTML only. I searched a lot on the google and I found many solutions with Canvas and CSS, but I want to do it with HTML and then write the names of the rows and columns (on the sides). Can you give me few suggestions how to do it?
Thanks!
Solution
Use a table element.
Each square is represented with a td element. Each row and column element is represented with a th.
In the example I also added CSS to style the chess board.
<!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>
(ADDED)
If you want to add the pieces:
<!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>
