#92: Code Walkthrough of Drawing Table

The Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many features to make this as easy and useful as possible. In this screencast we walk through the existing code looking at the finished example, the markup, and the JavaScript powering that it - feature by feature.

Links from Video:


  1. Nick P.
    Permalink to comment#

    Can’t watch video :( Corrupted file???

  2. Toni Lähdekorpi
    Permalink to comment#

    There are actually multiple reasons for the image blocking in most webmails.
    The most important is blocking information gathering, for example: A spammer spams people with an email that contains an image located in your server (http://example.com/uniqueid.jpg). Now, when the user reads the email, if the image is not blocked, the spammer can confirm that the email address is in use, and if the image is not passed through a proxy, your IP and browser are also passed to the spammer.
    This would make “brute force” emailing to aaaa@gmail.com-zzzz@gmail.com really easy.

    • Curtis Scott
      Permalink to comment#

      Thanks for that tid-bit of info, great explanation!

  3. Rafael Nascimento Sampaio
    Permalink to comment#

    The block happens cuz some developers put img tags with the src atribute point to a script that is executed if the image link are loaded.

  4. Rafael Nascimento Sampaio
    Permalink to comment#

    U really should make your comments form be submitted by ajax, now I have to browse in the video to get where I was to keep watching the video. =(

    • Chris Coyier
      Permalink to comment#

      You write an WordPress plugin for ajax comment submitting and I’ll be your first tester =)

    • Toni Lähdekorpi
      Permalink to comment#

      Why don’t you make a screencast showing how to make plugins, and do it that way? ;)

      (+ there already are AJAX comment plugins for WP)

  5. Curtis Scott
    Permalink to comment#

    This is amazing Chris! I wish I could just create little apps like this, I really need to brush up on my js. =)

  6. aboleo
    Permalink to comment#

    Your Videos aren’t working for me on Opera 10.63
    Since your redesigning i have had a lot of trouble with your site so far.

    Would you just fix the Video issue on Opera?

  7. Gustavo Bordoni
    Permalink to comment#

    Would be good to create a PHP/jQuery code that transform a image on a table, like 1px each cell to make it just like the image, what do you think?

  8. Ben
    Permalink to comment#

    For the tablebuild function, maybe this is faster. I’ve created td cells once instead of creating it every time from scratch during the cols loop. The cols loop then accesses the cached var. Here’s my (untested) example.

    function buildTable(rows=20,cols=20){
        //first build one horizontal line (row)
        var hor = ' ';
           hor = hor + ' '; 
        //next build the columns and attach the rows to each
        var vert = '';
           vert = vert + '' + hor + ''; 
    	//entire cell structure
     	return vert;
    • Ben
      Permalink to comment#

      There are some tags missing in the snippet above.
      Should’ve been:

      hor = hor + ‘<td></td>’;


      vert = vert + ‘<tr> + hor + </tr>’;

  9. Kenny V
    Permalink to comment#

    Great everything on this site!!!

  10. Bboy

    Wow amazing tricks :) Thanks you..

  11. Kyle Bradley
    Permalink to comment#

    The url changed for the markup examples (Forrst Thread on Table Markup Loops)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.