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.

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Did you like this challenge?

Click on a star to rate it!

Average rating 3.7 / 5. Vote count: 24

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: