Project: Writing JavaScript Chess

Create the Chess Board Using HTML and CSS

Create basic HTML structure to simulate board

Code View: <table border="1" cellspacing="2" cellpadding="10"> <tr><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td></tr> <tr><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td></tr> <tr><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td></tr> <tr><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td></tr> <tr><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td></tr> <tr><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td></tr> <tr><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td></tr> <tr><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td><td><img src="images/empty.gif"></td></tr> </table>

Because some popular browsers like to ignore empty table cells instead of drawing them, I'm having to add an IMG tag inside each TD cell to force the browser to render cell. This bloats the HTML considerably. If you've got ideas about other ways to achieve the effect, try them out and see if you can find a more graceful, less code intensive way.

Next >

Fun Stuff and Additional Resources:

• hosting >
• /games/ >
• /chess/
• JavaScript Hangman
• JavaScript Magic Square
• JavaScript Chess Program

Additional Keywords: learing to build html chess board using javascript