♟️ How to Make a Chessboard Using Only HTML
Why Only HTML?
Most people think you need CSS or JavaScript to build anything visual. But what if I told you that you can create a full chessboard using just HTML? No CSS. No JavaScript. Just pure HTML tags. This blog will show you how — and why it’s a great exercise for beginners learning HTML structure and semantic tags.
Step 1: Understand the Chessboard Layout
A chessboard has:
- 8 rows (called ranks)
- 8 columns (called files)
- Alternating black and white squares
- 64 squares in total
We’ll use the <table> element to create this grid.
___________________________________________________________________________________
Step 2: Create the Basic Table
<table border="1">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<!-- Repeat the <tr> block 8 times for 8 rows -->
</table>
This gives us an 8x8 grid. But all the cells look the same. How do we alternate colors?
___________________________________________________________________________________
Step 3: Add Inline Background Colors
Since we can’t use CSS files or <style> tags, we’ll use the bgcolor attribute directly in each <td>.
"example code"
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<td bgcolor="white"></td>
<td bgcolor="black"></td>
<td bgcolor="white"></td>
<td bgcolor="black"></td>
<td bgcolor="white"></td>
<td bgcolor="black"></td>
<td bgcolor="white"></td>
<td bgcolor="black"></td>
</tr>
<!-- Repeat with alternating pattern for 8 rows -->
</table>
___________________________________________________________________________________
Alternate the colors row by row:
- Even rows: start with white
- Odd rows: start with black
Step 4: Add Chess Pieces (Optional)
You can use Unicode characters to represent chess pieces:
- ♔ ♕ ♖ ♗ ♘ ♙ (White)
- ♚ ♛ ♜ ♝ ♞ ♟ (Black)
Example:
"<td bgcolor="white">♜</td>"
___________________________________________________________________________________
full code:-
<!DOCTYPE html>
<html>
<head>
<title> Chessboard</title>
</head>
<body>
<h2>Chessboard Made with Only HTML</h2>
<table border="1" cellspacing="0" cellpadding="20">
<!-- Row 1 -->
<tr>
<td bgcolor="white">♜</td>
<td bgcolor="black">♞</td>
<td bgcolor="white">♝</td>
<td bgcolor="black">♛</td>
<td bgcolor="white">♚</td>
<td bgcolor="black">♝</td>
<td bgcolor="white">♞</td>
<td bgcolor="black">♜</td>
</tr>
<!-- Row 2 -->
<tr>
<td bgcolor="black">♟</td>
<td bgcolor="white">♟</td>
<td bgcolor="black">♟</td>
<td bgcolor="white">♟</td>
<td bgcolor="black">♟</td>
<td bgcolor="white">♟</td>
<td bgcolor="black">♟</td>
<td bgcolor="white">♟</td>
</tr>
<!-- Row 3 to 6: Empty squares -->
<tr>
<td bgcolor="white"></td><td bgcolor="black"></td><td bgcolor="white"></td><td bgcolor="black"></td>
<td bgcolor="white"></td><td bgcolor="black"></td><td bgcolor="white"></td><td bgcolor="black"></td>
</tr>
<tr>
<td bgcolor="black"></td><td bgcolor="white"></td><td bgcolor="black"></td><td bgcolor="white"></td>
<td bgcolor="black"></td><td bgcolor="white"></td><td bgcolor="black"></td><td bgcolor="white"></td>
</tr>
<tr>
<td bgcolor="white"></td><td bgcolor="black"></td><td bgcolor="white"></td><td bgcolor="black"></td>
<td bgcolor="white"></td><td bgcolor="black"></td><td bgcolor="white"></td><td bgcolor="black"></td>
</tr>
<tr>
<td bgcolor="black"></td><td bgcolor="white"></td><td bgcolor="black"></td><td bgcolor="white"></td>
<td bgcolor="black"></td><td bgcolor="white"></td><td bgcolor="black"></td><td bgcolor="white"></td>
</tr>
<!-- Row 7 -->
<tr>
<td bgcolor="white">♙</td>
<td bgcolor="black">♙</td>
<td bgcolor="white">♙</td>
<td bgcolor="black">♙</td>
<td bgcolor="white">♙</td>
<td bgcolor="black">♙</td>
<td bgcolor="white">♙</td>
<td bgcolor="black">♙</td>
</tr>
<!-- Row 8 -->
<tr>
<td bgcolor="black">♖</td>
<td bgcolor="white">♘</td>
<td bgcolor="black">♗</td>
<td bgcolor="white">♕</td>
<td bgcolor="black">♔</td>
<td bgcolor="white">♗</td>
<td bgcolor="black">♘</td>
<td bgcolor="white">♖</td>
</tr>
</table>
</body>
</html>