Create a table for ChessBoard. The board should be alternating colors and an eight-by-eight grid. Here are the UNICODE characters you'll need for the pieces.
- White King: ♔
- White Queen: ♕
- White Rook: ♖
- White Bishop: ♗
- White Knight: ♘
- White Pawn: ♙
- Black King: ♚
- Black Queen: ♛
- Black Rook: ♜
- Black Bishop: ♝
- Back Knight: ♞
- Black Pawn: ♟
Use CSS for providing required styles for ChessBoard.
ChessBoardUsingCSS.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chess Board using CSS</title>
<style type="text/css">
table{
border-style: solid;
width: 50%;
}
tr{
height: 80px;
}
td{
font-size: 60px;
text-align: center;
}
.bgwhite{
background-color: white;
}
.bggrey{
background-color: grey;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td class="bgwhite">♜</td>
<td class="bggrey">♞</td>
<td class="bgwhite">♝</td>
<td class="bggrey">♚</td>
<td class="bgwhite">♛</td>
<td class="bggrey">♝</td>
<td class="bgwhite">♞</td>
<td class="bggrey">♜</td>
</tr>
<tr>
<td class="bggrey">♟</td>
<td class="bgwhite">♟</td>
<td class="bggrey">♟</td>
<td class="bgwhite">♟</td>
<td class="bggrey">♟</td>
<td class="bgwhite">♟</td>
<td class="bggrey">♟</td>
<td class="bgwhite">♟</td>
</tr>
<tr>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
</tr>
<tr>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
</tr>
<tr>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
</tr>
<tr>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
<td class="bggrey"></td>
<td class="bgwhite"></td>
</tr>
<tr>
<td class="bgwhite">♙</td>
<td class="bggrey">♙</td>
<td class="bgwhite">♙</td>
<td class="bggrey">♙</td>
<td class="bgwhite">♙</td>
<td class="bggrey">♙</td>
<td class="bgwhite">♙</td>
<td class="bggrey">♙</td>
</tr>
<tr>
<td class="bggrey">♖</td>
<td class="bgwhite">♘</td>
<td class="bggrey">♗</td>
<td class="bgwhite">♔</td>
<td class="bggrey">♕</td>
<td class="bgwhite">♗</td>
<td class="bggrey">♘</td>
<td class="bgwhite">♖</td>
</tr>
</table>
</body>
</html>
