Craig McIntosh

jQuery Plugin - Tree Formatting

10 Feb 2012

As a bit of a side-project, I've been looking at how one would manage semantically-meaningful tree data in HTML. My conceptual focus has been on family trees but data is data.

I've implimented my solution as a nested list. The HTML is simple, as it should be. The visual formatting proved challenging. In the end, I created a jQuery add-on to handle the formatting of any tree. The alignment is still left-to-right rather than the traditional top-to-bottom, but I think the result is readable and self-explanatory.

JavaScript is only used for the purposes of manipulating the background images of each element, in order to draw the connections between nodes without burdenning the encoder with a different CSS class for every collection of relationships. If it is desired, Firebug or any similar tool may be used to copy the rendered code, resulting in static, semantically meaningful code that may be used in a JavaScript-free environment.

It should also be noted that this formatting relies upon CSS3 support for multiple background images.

I'll walk through a few examples to demonstrate the HTML construction of a tree, and the plugin's capabilities. They'll also demonstrate a few limitations of this tactic -- nested lists are not trees, and no amount of styling will change that -- but I've seen enough ugly table-based family trees that I wanted to produce an alternative method. Mine may still be ugly, but at least it's semantic.

If you just want to download the code, it's up at github. Now onto the examples.


  1. Basic Implimentation
  2. Advanced Usage
  3. Tree Mergers