Griddled to perfection

Want to replicate your finest-but-complexist tabular data on the web? You'll no doubt want a grid provide visual clarity. Seeing as it's the year 2010(ish) of course CSS is the way to go. But when the Poorhouse wanted such an effect, it wasn't quite so obvious how to achieve. In an effort to spare the highs and lows of the technique for other amateur web-kidz, here's how we did it.

Assuming you don't want all your tables to look like grids, you'll want to work on a new class of <table>, called perhaps, pick word at random, "grid". Each cell aka <td> of the table wants to be entirely surrounded by borders to give the impression of individual rectangles. Let's use the power of CSS inheritance to make it so:

table.grid td {
border: thin solid #000000;

This alone isn't enough though, as you get a dodgy separate-squares effect like that illustrated on the left, even setting all the margins to 0. Instead, make use of the CSS property border-collapse. This can either be set to separate, giving the effect we already have, or more usefully for this task, to collapse. In this latter mode, illustrated on the right, the borders..ermmm...collapse onto each other, giving a perfect grid, fully stylable via CSS. Yay!Broken gridBroken gridFixed grid!Fixed grid!

Here's da code:

table.grid {
border-collapse: collapse;

Then whenever you create a table in your HTML file, simply make it of class "grid" as below.

<table class="grid">

...and you too can easily create unlimited graph paper on the Internet.

Not confusing enough for you? See what the W3 have to say on the subject.


Adam dear, just the thing I

Adam dear, just the thing I needed :)
What fortune!
Grids for all that's what I say....

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <del>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You may use [acidfree:xx] tags to display acidfree videos or images inline.
  • Images can be added to this post.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.