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