Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

  • Blog Navigation
Now I understand what they mean by tabular data (or: building a relational database using jQuery and <TABLE> tags)

Today I was thinking aloud about Tree Regular Expressions and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got inner joins working.

Let’s start with a few tables:

<table class="users">
    <td class="id">1</td>
    <td class="first_name">amy</td>
    <td class="last_name">bobamy</td>
<table class="photos">
    <td class="id">1</td>
    <td class="user_id">1</td>
    <td class="url"></td>

Now we can express some queries:


This is equivalent to SELECT * FROM users WHERE id = 1

  .select('.id, .name')

This is equivalent to SELECT id, name FROM users WHERE id = 1. Here is something slightly more complicated:


But here is the crowning glory, the inner join:


This is equivalent to:

SELECT photos.url FROM users, photos
WHERE photos.user_id =
  AND = 1

Download the fun at Github.

  • Cute.

  • Hahahahahha, now I have to find an excuse….

  • Aman Gupta

    No benchmarks? =)

  • We’re not in 2002 anymore. Seriously, relational database in html? I gotta go play with this.

  • Haha, that’s great. Rock on man.

  • Alex Chaffee

    Hey, and with the right stylesheet, your data dumps are going to look *real* pretty…

    Soon you can even use [CSS3 to style tables](
    )… But darn, that would *totally* violate model-view separation :-)

  • Geeez… this is seriously cool and fun. But dude, you have too much free time man.

  • On my side, I ended up writing a CSS3 engine which used a relational database on the server side. The two worlds MUST NEVER COLLIDE!!

  • seb

    this might actually be quite usefull for teaching database queries to students. like some sort of interactive web-based tutorial.

  • That’s it, I’m sold! I’m with Yegge, Resig and the rest. JavaScript is the only language that’ll matter in a few years’ time!

  • That’s awesome. Really awesome… Couple that with things like JS based table sort, you could have a hot little data search engine there…

  • SFdude

    Very nice, using the output to Firebug Console.

    But…from a practical angle,
    what’s the code to display the 3 query results
    in the web page itself,
    not in the Firebug Console?

    (3 results displayed in the page
    containing the 2 tables, “users” and “photos”…).


  • Very cool :)

    For similar fun in a different syntax, you can play with Jan Grant’s ‘javascript prolog’; eg. I made using

  • Very clever! I made a tablelib, a jQuery library for serializing javascript object into html tables, and/or querying tables. The querying language is just JSON, and of course there is no joining.

Share This