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!
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>
How about this one:
<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>
Result:
a
b
c
d
e
f
g
h
8
□
■
□
■
□
■
□
■
8
7
■
□
■
□
■
□
■
□
7
6
□
■
□
■
□
■
□
■
6
5
■
□
■
□
■
□
■
□
5
4
□
■
□
■
□
■
□
■
4
3
■
□
■
□
■
□
■
□
3
2
□
■
□
■
□
■
□
■
2
1
■
□
■
□
■
□
■
□
1
a
b
c
d
e
f
g
h
you may try this:
<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>
with css style:
.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; }
You could fill a div with 81 square divs, all floated left.
Check out the 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>
