How do I draw the lines of a family tree using HTML CSS?

Question

I'm trying to implement something similar to what http://www.ancestry.com has, but I'm not sure how to draw the lines.

Here is a rough ascii sketch of what I want to do:

                 +----GrDAD1
                 |
     +----DAD----+
     |           +----GrMOM1
ME --+
     |           +----GrDAD2
     +----MOM----+
                 |
                 +----GrMOM2

I think one way to do this is to create a table of cells, and create images of the lines, connecting each of the children to their parents. I'm guessing there's an easier way to do this though, but my knowledge of CSS is quite limited. Does anyone have a suggestion on how I can implement this?

Answer 1

You can do it with pure css. Here is an example :

http://thecodeplayer.com/walkthrough/css3-family-tree

Answer 2

I'll throw one more answer in, although the answers above are all in the ballpark.

Let's assume you want to work on all browsers. If you need to work on Internet Explorer, and you code your own Canvas solution, you may want to include ExplorerCanvas.

Family trees are essentially binary trees -- I know, real life is tricky with adoptions, divorces, ugh, but let's just assume for a second that they're binary going in one direction (ancestors) from a particular person.

A good tool that uses Canvas, has the bridge to work on IE included, and uses a simple and general data format is the JavaScript InfoVis Toolkit.

Check out the sample at: http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html

It may not be exactly what you want out of the box, but you can tweak the look and feel.

The data payload to plug-in is very simple, and your example would look something like this:

var tree = {
  id: "ME",   // Needs to be internally unique 
  name: "ME", // Visual label, does not need to match id 
  data: {},   // not really used here, but parameter needed
  children: [
    {id: "DAD", 
    name: "DAD", 
    data: {},
    children: [
      {id: "GrDAD1", 
      name: "GrDAD1", 
      data: {},
      children: []},
      {id: "GrMOM1", 
      name: "GrMOM1", 
      data: {},
      children: []},          
    ]},
    {id: "MOM", 
    name: "MOM", 
    data: {},
    children: [
      {id: "GrDAD2", 
      name: "GrDAD2", 
      data: {},
      children: []},
      {id: "GrMOM2", 
      name: "GrMOM2", 
      data: {},
      children: []},          
    ]}
  ]
};

I'm sure there are other solutions out there, and I hope you find one that works for you.