family tree html5,Family Tree with pure HTML and CSS (or with minimal JS)

Here is my css/html/jQuery family tree solution that builds the tree to the right of the base person/couple. People are connected to their parents by connectors which are created using some png files (not included) that measure 2px high and 10 px wide. centerPixels has the center 4 filled in and pointRight and pointLeft do just that by filling in their left or right halves. It's not perfect, but it works with the sample data provided.

.table_Node {border-collapse:collapse; border-spacing:0px; border:0px; padding:0px; vertical-align:middle;}

.th_Node {border:0px; padding:0px; padding-left:4px; vertical-align:middle;}

.td_Node {border:0px; padding:5px; vertical-align:middle; position:relative;}

.lbl_NodeName {font-size:14px;}

.lbl_NodeBirthDeath {font-size:12px;}

.divPerson {

display:block;

width:100%;

color:#eeeeee;

border:1px solid black;

padding:3px 4px 5px 4px;

left:8px;

min-width:75px;

border-radius:8px;

background-color: #333;

}

.div_AnchorLine {

display:block;

position:absolute;

width:10px;

left:0px;

background-image: url("/img/centerPixels.png");

}

.div_AnchorTop {

display:block;

position:absolute;

width:10px;

height:2px;

top:0px;

background-image: url("/img/pointRight.png");

}

.div_AnchorBottom {

display:block;

position:absolute;

width:10px;

height:2px;

bottom:0px;

background-image: url("/img/pointRight.png");

}

.table_EmptyParent {

height:28px;

vertical-align:middle;

}

.table_Dad {

margin-left:10px;

margin-bottom:2px;

}

.div_DadLine {

display:block;

position:absolute;

width:10px;

left:9px;

background-image: url("/img/centerPixels.png");

}

.div_DadTop {

display:block;

position:absolute;

width:10px;

height:2px;

top:0px;

background-image: url("/img/pointRight.png");

}

.div_DadBottom {

display:block;

position:absolute;

width:10px;

height:2px;

bottom:0px;

background-image: url("/img/pointLeft.png");

}

.table_Mom {

margin-left:10px;

margin-top:2px;

}

.div_MomLine {

display:block;

position:absolute;

width:10px;

/*height:25%;

top:50%;*/

left:9px;

background-image: url("/img/centerPixels.png");

}

.div_MomTop {

display:block;

position:absolute;

width:10px;

height:2px;

top:0px;

background-image: url("/img/pointLeft.png");

}

.div_MomBottom {

display:block;

position:absolute;

width:10px;

height:2px;

bottom:0px;

background-image: url("/img/pointRight.png");

}