Web Tutorials

</>   HTML Tutorial

HTML Forms

Tables

Form Practicals

Practicals

HTML

Hypertext Markup Language

Chess Practical

To create a Chessboard with Chess pieces we first need to know their unicode or HTML equivalent codes.

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.

Source Code HTML + CSS

HTML Code of the above Diagram

Click for download images Images Zip

  • <html>
  • <head>
  • <title>Chessboard using Pure HTML</title>
  • </head>
  • <body>
  • <table width="640px" height="640px" margin="20px" border="15px solid #333" align="center" >
  • <tr>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/white1.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/white2.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/white3.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/white4.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/white5.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/white6.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/white7.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/white8.png"></td>
    •
  • </tr>
  • <tr>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/white9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/white9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/white9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/white9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/white9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/white9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" ><img src="img/white9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/white9.png"></td>
    •
  • </tr>
  • <tr>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
    •
  • </tr>
  • <tr>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
    •
  • </tr>
  • <tr>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
    •
  • </tr>
  • <tr>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle" > </td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle" > </td>
    •
  • </tr>
  • <tr>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/black9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/black9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/black9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/black9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/black9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/black9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/black9.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/black9.png"></td>
    •
  • </tr>
  • <tr>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/black1.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/black2.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/black3.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/black4.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/black5.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/black6.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#fff" font="50px" align="center" display="table cell" valign="middle"><img src="img/black7.png"></td>
  • <td width="73.7px" height="73.7px" bgcolor="#999" font="50px" align="center" display="table cell" valign="middle"><img src="img/black8.png"></td>
    •
  • </tr>
  • </table>
  • </body>
  • </html>