Programming Tutorials

  • View all tutorials
  • Create a simple chessboard using HTML, CSS and jQuery

    Setting up the board with HTML + jQuery

    We're going to be creating a standard 8x8 chessboard using some very simple CSS and jQuery. First, we'll create our HTML file with a table that will display our chessboard. We're going to use jQuery to create 8 table rows each containing 8 cells to create an 8x8 table, so we'll need to include a link to jQuery also.
    <!DOCTYPE html>
    <html>
    <head> 
    <title> Simple Chessboard </title>    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>     
    <script>
    $(document).ready(function(){
      // jQuery code goes here		
    });
    </script>      
    </head>
    <body>
    
    <table id='chessboard'>
    </table>
                 
    </body>  
    </html>
    
    Now we'll write a simple loop in JavaScript to create the chessboard. First we'll need to write a loop and create 8 table rows, and then for each row create 8 cells, which will require us to create a loop within a loop. We'll also number each cell, so we'll create a counter that will run from 1 to 64. We'll then append each row to the chessboard using a jQuery function.
    var space = 1;
    for (var r=0; r<8; r++) {
      var col = "";
      for (var c=0; c<8; c++) { col += "<td data-pos='"+space+"'></td>"; space++; }
      $("#chessboard").append("<tr>"+col+"</tr>");
    }
    
    If you save this HTML file and open it you won't see anything because there's no styling. Let's include a css file and make our chessboard look nice now.
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    

    Styling the board with CSS

    Then in that style.css file lets create some basic styles. These css styles get rid of any unwanted margins or padding and also set up each cell of the board to a specific width and height. The last lines style the board with a checkered look.
    * {
      margin: 0; 
      padding: 0; 
    }
    
    table { 
      border-collapse: collapse; 
      border-spacing: 0; 
    }
    
    #chessboard { 
      padding: 0px; 
      margin: 0 auto; 
      border: 2px solid #181818; 
    }
    
    #chessboard tr td { 
      width: 60px; 
      height: 60px; 
    }
    
    #chessboard tr:nth-child(2n) td:nth-child(2n+1) { 
      background: #9f9f9f; 
    }
    
    #chessboard tr:nth-child(2n+1) td:nth-child(2n) { 
      background: #9f9f9f; 
    } 
    
    Live Demo
    mrdaniel wrote this tutorial on 6/6/14 | chess, html, css, javascript, jquery, front-end
    Comments
  • +
  • 2
  • -
  • I am wondering why we have to write
    td:nth-child(2n+2)
    
    in
    #chessboard tr:nth-child(2n+1) td:nth-child(2n+2) { background: #9f9f9f; }
    
    instead of
    tr:nth-child(2n)
    
  • +
  • 2
  • -
  • cool!!
  • +
  • 1
  • -
  • Thanks for the tut!
  • +
  • 1
  • -
  • @SylvieC Actually, you're right that extra +2 isn't needed. I'll make the change now, thanks!
  • +
  • 1
  • -
  • Very nice thanks!
  • +
  • 1
  • -
  • Thanks a lot for this tutorial. I found it very helpful
  • +
  • -2
  • -
  • The files do not download when I try to download it.
    Log in to submit a comment.