Published on

How to Create Chess Board in HTML?

Before creating a Chessboard with Chess pieces we first need to know their Unicode or HTML equivalent codes.

What is Unicode?

The Unicode Standard provides a unique number for every character, no matter what platform, device, application or language. It has been adopted by all modern software providers and now allows data to be transported through many different platforms, devices and applications without corruption. Support of Unicode forms the foundation for the representation of languages and symbols in all major operating systems, search engines, browsers, laptops, and smart phones—plus the Internet and World Wide Web (URLs, HTML, XML, CSS, JSON, etc.).

There are around 12 symbols that are needed to create a Chessboard in HTML.

These symbols are available in Unicode range U+2654 to U+265F

Note : to display these symbols you need to have the font that supports this unicode range.

Symbol Unicode Hex Code Name
♔ U+2654 ♔ White King
♕ U+2655 ♕ White Queen
♖ U+2656 ♖ White Rook
♗ U+2657 ♗ White Bishop
♘ U+2658 ♘ White Knight
♙ U+2659 ♙ White Pawn
♚ U+265A ♚ Black King
♛ U+265B ♛ Black Queen
♜ U+265C ♜ Black Rook
♝ U+265D ♝ Black Bishop
♞ U+265E ♞ Black Knight
♟ U+265F ♟ Black Pawn

Step 1 - Create Chessboard single Square Box

<table border="1">
  <tr height="60px">
    <td width="60px" bgcolor="#000"></td>
  </tr>
</table>
in-html-chessboard-square

Step 2 - Create Chessboard single Row

<table border="1">
  <tr height="60px">
    <td width="60px" bgcolor="#000"></td>
    <td width="60px"></td>
    <td width="60px" bgcolor="#000"></td>
    <td width="60px"></td>
    <td width="60px" bgcolor="#000"></td>
    <td width="60px"></td>
    <td width="60px" bgcolor="#000"></td>
    <td width="60px"></td>
  </tr>
</table>
in-html-chessboard-row

Step 2 - Assign a Chess symbols

<table border="1">
  <tr height="60px">
    <td width="60px" style="font-size:40px; text-align:center;color:#fff" bgcolor="#000">
      &#9814;
    </td>
    <td width="60px" style="font-size:40px; text-align:center;">&#9816;</td>
    <td width="60px" style="font-size:40px; text-align:center;color:#fff" bgcolor="#000">
      &#9815;
    </td>
    <td width="60px" style="font-size:40px; text-align:center;">&#9812;</td>
    <td width="60px" style="font-size:40px; text-align:center;color:#fff" bgcolor="#000">
      &#9813;
    </td>
    <td width="60px" style="font-size:40px; text-align:center;">&#9815;</td>
    <td width="60px" style="font-size:40px; text-align:center;color:#fff" bgcolor="#000">
      &#9816;
    </td>
    <td width="60px" style="font-size:40px; text-align:center;">&#9814;</td>
  </tr>
</table>
in-html-chessboard-row

Step 4 - Repeat Columns And Rows

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ChessBoard</title>
  </head>
  <body>
    <table border="1">
      <tr height="60px">
        <td width="60px" style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">
          &#9814;
        </td>
        <td width="60px" style="font-size:40px; text-align:center;">&#9816;</td>
        <td width="60px" style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">
          &#9815;
        </td>
        <td width="60px" style="font-size:40px; text-align:center;">&#9812;</td>
        <td width="60px" style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">
          &#9813;
        </td>
        <td width="60px" style="font-size:40px; text-align:center;">&#9815;</td>
        <td width="60px" style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">
          &#9816;
        </td>
        <td width="60px" style="font-size:40px; text-align:center;">&#9814;</td>
      </tr>
      <tr height="60px">
        <td style="font-size:40px; text-align:center;">&#9817;</td>
        <td style="font-size:40px; text-align:center;color: #fff;" bgcolor="#000">&#9817;</td>
        <td style="font-size:40px; text-align:center;">&#9817;</td>
        <td style="font-size:40px; text-align:center;color: #fff;" bgcolor="#000">&#9817;</td>
        <td style="font-size:40px; text-align:center;">&#9817;</td>
        <td style="font-size:40px; text-align:center;color: #fff;" bgcolor="#000">&#9817;</td>
        <td style="font-size:40px; text-align:center;">&#9817;</td>
        <td style="font-size:40px; text-align:center;color: #fff;" bgcolor="#000">&#9817;</td>
      </tr>
      <tr height="60px">
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
      </tr>
      <tr height="60px">
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
      </tr>
      <tr height="60px">
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
      </tr>
      <tr height="60px">
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
        <td></td>
        <td bgcolor="#000"></td>
      </tr>
      <tr height="60px">
        <td style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">&#9823;</td>
        <td style="font-size:40px; text-align:center;">&#9823;</td>
        <td style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">&#9823;</td>
        <td style="font-size:40px; text-align:center;">&#9823;</td>
        <td style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">&#9823;</td>
        <td style="font-size:40px; text-align:center;">&#9823;</td>
        <td style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">&#9823;</td>
        <td style="font-size:40px; text-align:center;">&#9823;</td>
      </tr>
      <tr height="60px">
        <td style="font-size:40px; text-align:center;">&#9820;</td>
        <td style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">&#9822;</td>
        <td style="font-size:40px; text-align:center;">&#9821;</td>
        <td style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">&#9819;</td>
        <td style="font-size:40px; text-align:center;">&#9818;</td>
        <td style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">&#9821;</td>
        <td style="font-size:40px; text-align:center;">&#9822;</td>
        <td style="font-size:40px; text-align:center;color:#fff;" bgcolor="#000">&#9820;</td>
      </tr>
    </table>
  </body>
</html>
in-html-chessboard

Note: You can simply use the Unicode pieces within your Html code provided your page supports UTF-8 Character set. To do so just include <meta charset="UTF-8" > in the <head> section of your webpage.

HTML encodings

What is HTML?

How to use HTML table?

Width and height attributes

Discuss on Twitter • View on GitHub