Take the 2-minute tour ×

I'm working on a browser-game and I can't help but wonder about what's the lightest way to make the grid/board on which the game takes place.

Right now, as a mere sample, I'll show you this:

-link no longer active, it was basically a 25x25 table+tr+td grid-

Now, as the grid gets bigger and bigger, the table and its td's create a very heavy filepage which in turn...sucks in more resources from the browser engine and computer.

So, is a table with td's the most lightweight way to craft a huge grid-like board or is there something lighter that you recommend?

Cheers Sotkra

share|improve this question
What kind of lightweight do you mean? Some interpreted your question as performance optimization of HTML sent from the server to the browser. But I believe that the DOM size in the browser might be an issue as well, which might be unrelated. –  Grzegorz Oledzki Apr 6 '10 at 10:52
Both ways: Both the 'burden' on the server when dispatching and the user's computer when loading up the html. –  Sotkra Apr 7 '10 at 20:21
add comment

7 Answers

up vote 4 down vote accepted

Computing a table layout is a very complex work for a browser, because it has to know the dimensions of the last cell to calculate the exact width of each column. So, if you use a table, add table-layout:fixed early.

Floating boxes or relative positioning may be faster to render.

share|improve this answer
I did some tests and wow. The loading time with layout set to fixed is incredibly faster. I'll try all the other suggestions too. I'm afraid I can only 'approve' one answer. Thanks to all! –  Sotkra Apr 8 '10 at 2:18
add comment

You could try getting rid of the table, instead positioning the pieces with CSS {position: relative; top: 20px; left: 20px} etc. and draw a repeating backrgound grid.

share|improve this answer
Yes but, keep in mind that, table or no table, we'd still have LOTS of individual pieces. Imagine 400x400 for instance. Last time I tried that with a table, my browser froze for 20 seconds while loading it. I wonder if using individual 'pieces', be them divs or span's or whatever will actually reduce the file size/load. –  Sotkra Apr 3 '10 at 18:51
Thinking about it, he needs to have triggers to select each square. –  ANeves Apr 6 '10 at 9:55
add comment

Removing the links and handling them via the click event in Javascript (preferably with something like JQuery) should cut down a lot on the filesize.

share|improve this answer
add comment

You could build the table by using JavaScript to manipulate the DOM. If the grid's contents are very regular, the code to do that would be much smaller than having 400x400 times <td></td> plus markup. Of course performance then depends on the JavaScript engine. But if that does not suck completely, it could even be faster than parsing all the HTML, independant of the network transfer time.

share|improve this answer
add comment

My suggestion is having the tiles absolutely positioned inside the board, to save on HTML (transfer time) and position calculations (load time) by the browser. JS to register the clicks and handle it (less HTML = less transfer and load time).

So, you could have this base CSS:

#board {
  display: block;
  width: [BoardWidth]px; /* TileWidth * NumberOrColumns */
  height: [BoardHeight]px; /* TileHeight * NumberOfRows */
  position: relative;
.tile {
  display: block;
  width: [TileWidth]px;
  height: [TileHeight]px;
  float: left;

Then having the html generated like that:

<div id="board">
<div class="tile" style="position: absolute; left:0px; top:0px;"></div>
<div class="tile" style="position: absolute; left:20px; top:0px;"></div>
<div class="tile" style="position: absolute; left:40px; top:0px;"></div>
<div class="tile" style="position: absolute; left:60px; top:0px;"></div>
<div class="tile" style="position: absolute; left:0px; top:20px;"></div>
<div class="tile" style="position: absolute; left:20px; top:20px;"></div>
<div class="tile" style="position: absolute; left:40px; top:20px;"></div>
<div class="tile" style="position: absolute; left:60px; top:20px;"></div>
<div class="tile" style="position: absolute; left:0px; top:40px;"></div>

In which every tile has position left: [X*TileWidth]px; top: [Y*TileHeight]px;.
That, or David M's suggestion.

You can also cut on page load time if you make the page size smaller - so, like suggested, using JQuery or another JavaScript framework to create the trigger for the click on each div would be ideal.
I'm not very savvy, but using JQuery it would be something like:

$(document).ready(function() {
  $(".tile").click(function() {
    // find out which square was clicked, and perhaps redirect to a page with get variables
share|improve this answer
add comment

You could build it with CSS floats, e.g if the squares are 20x20px:

<style type="text/css">
div.container {
width: Xpx; /* 20px [square box width]+1px [border width of each square])) * number of squares */
height: Xpx; /* similar to above] */
border: solid black;
border-width: 1px 0px 0px 1px;} /* North East South West */

div.square {
float: left;
width: 20px;
height: 20px;
border: solid black;
border-width: 0px 1px 1px 0px;}

div.row {
clear: both;}

<div class="container">
    <div class="row">
        <div class="square">

Remember to use IE with a valid doctype http://htmlhelp.com/tools/validator/doctype.html or to use box model hacks in quirks mode [http://tantek.com/CSS/Examples/boxmodelhack.html].

You could probably make the above take up less if you use IDs instead of classes and use single letters in the CSS.

What's fastest usually depends wildly on the browser though, e.g. I wouldn't be surprised if IE performs better with tables, while other browsers perform better with relative DIVs/floats.

(I haven't tested the above, but something similar should work.)

You could then convert the above to JavaScript to reduce page load times, e.g:

function GenHTML(NumRows, NumCols) {
    var LRows = []
    for (var x=0; x<NumRows; x++) {
        var LCols = []
        for (var y=0; y<NumCols; y++) {
            var HTML = '<div class="square"></div>'

        LRows.push('<div class="row">'+ LCols.join('') +'</div>')}
    return LRows.join('')}

function SetHTML(NumRows, NumCols) {
    document.getElementById('container').innerHTML = GenHTML(NumRows, NumCols)}
share|improve this answer
add comment



<map name="planetmap">

If you use an imagemap to produce the triggers for your checkered board you would just need the repeated background and a transparent image that fills the total with and height.

share|improve this answer
add comment

Your Answer


