In my previous post, I explained how to embed very simple spreadsheets in a WordPress blog, using that cool little piece of Free Software called Gelsheet.

This time, as promised, I’ll show you how to do the same thing with a different technique, easily extendable to any web page, based on another “online spreadsheets” package. Since the
embedding technique and the spreadsheet software are completely
independent from each other, I’ll explain them one at a time.

The iframe HTML element

Inline frames, or iframes, are HTML elements that are used to embed another document within the current HTML document. Being part
of the language standard, iframes have nothing specific to online
spreadsheets — or to WordPress for that matter. If you know the
corresponding HTML markup, which can be as simple as this:

<iframe src="URL_OF_DOCUMENT_TO_BE_EMBEDDED"></iframe>

you can use iframes wherever you want. To make life even simpler, most
web content management systems (CMS) have standard functions or third-party
extensions that make the insertion of iframes a no-brainer. WordPress
has at least two plugins for this task. The one I used for this post,
for the simple reason that it was already installed on my testing blog,
is called iframe.

Its installation procedure is the standard one for these plugins: upload
the ZIP archive available on that page to the wp-content/plugins
subfolders of your WordPress installation, and then activate it from the
plugin page of the Dashboard. At that point, all you have to do to embed
a document is to add this code in the right place of your post:

[iframe src="URL_OF_DOCUMENT_TO_BE_EMBEDDED" width="100%" height="480"]

Play as you wish with the width and height parameters, but don’t forget to do it in the HTML view of the WordPress post editor instead of the visual one, otherwise you may mess up the source code of the post.

Enter jQuery.sheet

jQuery.sheet is an easy-to-use JavaScript/PHP Excel-like spreadsheet
plugin for the web browser. This package is very different from
Gelsheet. First of all, it’s designed to create spreadsheets that, by
default, are editable by all the visitors of the corresponding web page.

Secondly, jQuery.sheet is much more flexible than Gelsheet. Among other things, you get:

  • freezable cells
  • many formulas and formatting options
  • multiple sheets and cross-sheet calculations
  • support for custom formulas and variables
  • in-line controls like buttons, checkboxes, and drop-down lists
  • graphic themes and charts

jQuery.sheet inside WordPress? Here’s how to do it!

Let me explain in detail how I got to what you can see in
Figure A — that is, a dynamic spreadsheet stuck in the middle of a sample
WordPress post.

Figure A

A dynamic spreadsheet stuck in the middle of a sample WordPress post.

First, I uploaded and unpacked the last version of jQuery.sheeet in a dedicated folder of my web server, which I called for the sake of simplicity. Next, inside
the “examples” subfolder, I made my own copy of one of the sample
spreadsheets (mortgage.estimator.html) distributed with jQuery.sheet. Finally, I put the following code into my WordPress post:

[iframe src="" width="100%" height="480"]

Unlike what happens with Gelsheet, I got a
spreadsheet that any reader of the post can play with, adding his or her own
data (Figure B).

Figure B

Any reader of the post can add data to the spreadsheet.

How do you make your own spreadsheets?

Right now, the main defect of jQuery.sheet may be its documentation. You
do get quite a few very cool examples with the software, all shown in the online demo. However, there seems to be nothing between a too synthetic end-user documentation
and the reference material for developers. Besides, jQuery is more
complicated than Gelsheet, precisely because it is more flexible.
Having said that, it’s still possible to create spreadsheets from scratch with
this software without being a real programmer. You must, however, know
the basics of HTML and how spreadsheets generally work.

In practice,
you should follow these steps:

  1. Write an HTML table with all the cells of your spreadsheet (you can use any HTML editor for this)
  2. In the HTML header of that page, load the jQuery.sheet functions (as explained here)
  3. Following the example in that same page, put the HTML table inside a div element, with an identity that marks it as THE table that jQuery.sheet should manage
  4. Write normal numbers as plain text inside their cells
  5. Place formulas, instead, inside the TD marker, following this syntax: <td data-formula="SUM(A1:A2)"></td>

Yes, this is just a bare outline of the general procedure, due to a lack of space. However, if the TechRepublic community expresses enough interest, I’d be happy to provide another post with a step-by-step
explanation on how to build a jQuery.sheet spreadsheet from scratch. Please share your interest and/or any questions you may have in the discussion thread below.