HTML Chess Challenge

chessboard2

Learning Objectives


In this challenge you are going to learn how to create and format a table using HTML. You will also learn how to insert special characters (using UNICODE characters) on to a webpage.
First you may want to learn about the three HTML tags used to create a table: <TABLE>,<TR> and <TD>

  • Tables are defined with the <TABLE> tag,
  • Tables are divided into table rows with the <TR> tag,
  • Table rows are divided into table cells with the <TD> tag.

Find out more about HTML tables…

HTML Chess Symbols



SymbolHTML CodeSymbolHTML Code
White King&#9812;White Queen&#9813;
White Rook&#9814;White Bishop&#9815;
White Knight&#9816;White Pawn&#9817;
Black King&#9818;Black Queen&#9819;
Black Rook&#9820;Black Bishop&#9821;
Black Knight&#9822;Black Pawn&#9823;

Challenge


Complete the code below to display a full 8×8 chessboard. (Click “Edit with CodePen” to be able to edit the code)

See the Pen vOOdgg by 101 Computing (@101Computing) on CodePen.

Share Button
Posted in Computer Science, HTML / CSS

Our Latest Book

Follow this blog