Using a table to lay out a grid of squares with fixed spacing where the width of each square is a percentage of the screen width

Question

I'm laying out a simple grid of squares where the width of each square is 50% of the screen width and there's a fixed amount of spacing between each square. I've found a very intuitive way to do this using tables and one line of JavaScript (here's a fiddle):

HTML

<table width="100%" cellspacing="10">
  <tr>
    <td width="50%"></td>
    <td width="50%"></td>
  </tr>
  <tr>
    <td width="50%"></td>
    <td width="50%"></td>
  </tr>
</table>

JavaScript

$('td').height($('td').width());

This seems like a sane, semantic use of tables, but I'm almost certain I would be ripped apart by my fellow programmers for using tables for anything but tabular textual data. Is there any valid reason not to use the approach outlined above?

Tables are less flexible. It's easier to go to a mobile friendly design (e.g. one 100% width when the screens smaller than a certain size), if you app allows. — Brigand, Feb 26 '13 at 06:37
I would replace the `width` attribute by CSS, and if a table isn't semantic, consider a `div{display:table}` istead. — John Dvorak, Feb 26 '13 at 06:37
@JanDvorak: Good call on the width attribute – that will save a lot of markup. I'll change that now... — David Jones, Feb 26 '13 at 06:38
@FakeRainBrigand you can totally revamp tables to use non-tabular layout as well. `` is just a tag with some default CSS and associated semantics. — John Dvorak, Feb 26 '13 at 06:38

score 1 · Accepted Answer · answered Feb 26 '13 at 06:45

When your HTML is going to contain tabular data, I don't think it's a problem to use tables. If you're using a table just to design your layout, you should go with "normal" elements (div, section, article etc.).

But, what I do want to point out, is that you're using layout-styles inside your HTML - now that's wrong. You should place your design inside CSS, and keep your HTML clean. Example:

HTML

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table {
    width:100%;
    border-collapse: seperate;
    border-spacing : 10px;
}
td {
    width:50%;
    background-color:red;
}

jQuery

$('td').height($('td').width());

JSFiddle.

Saw that you just updated your question at the time I posted my answer ;) . For more info about `border-collapse` (and more `table-stuff`), check out this [SO answer](http://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css). — MarcoK, Feb 26 '13 at 06:48
Haha - yeah I actually removed my update because you covered it all and more! Thanks. — David Jones, Feb 26 '13 at 06:49

Using a table to lay out a grid of squares with fixed spacing where the width of each square is a percentage of the screen width

1 Answers1