How should I build a simple 4x4 table with fill-able blocks

Using Jquery, I want to build a table of size 4x4 with equal sized blocks, which I can "fill" with a color.

Visual example:

The circle does not have to be included for this question.

I'm looking for advice, links, or suggestions on how to build this. I'm not very famil开发者_运维百科iar with Jquery's canvas/draw functionality but I think that may be a possible solution. The determinate for which boxes are filled will be set by how many levels of a job a player has finished. For example the first column shows that the player has completed all 4 levels.

However, I can worry about how to send in the information. What I'm unsure of is (again) the best way to make a simple table like this.

Here you go:

HTML:

<table>
    <tr>
        <td class="a"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="a"></td>
        <td></td>
        <td class="c"></td>
        <td></td>
    </tr>
    <tr>
        <td class="a"></td>
        <td class="b"></td>
        <td class="c"></td>
        <td></td>
    </tr>
    <tr>
        <td class="a"></td>
        <td class="b"></td>
        <td class="c"></td>
        <td class="d"></td>
    </tr>
</table>

CSS:

td { width:40px; height:40px; border:1px solid #333; }
td.a { background-color:red; }
td.b { background-color:blue; }
td.c { background-color:purple; }
td.d { background-color:green; }

Additionally, you may want to use a CSS Reset style sheet in order to make the table appear the same cross-browser.

Live demo: http://jsfiddle.net/simevidas/hdBZY/

Here's a working jsFiddle, it uses jQuery and Tables to do exactly as you asked. From an array of items, it will automagically build the graph, all you have to provide is the array and the css.

http://jsfiddle.net/Z7Ds6/3/

I agree with the comments you've gotten, I don't see anything wrong with using plain old html tables for this.

You could either create the table and css like Sime Vidas suggested and manipulate class names with jquery, or you could create the html elements via jquery with something like $('<table>') etc, and use the .append() method to create child elements and/or dump the code to the page somewhere.