Pedigree/Family Tree using HTML table

For my recent project, i wanted to create a family tree structure for parent-child relationships. After a lot searches, i decided to build it using HTML table.

Lets begin…

First of all, we are going to write a render function which has an array of data to be shown.

$arrPedigree = array(
    array(
        'name' => 'Parent',
        'children' => array(
            array(
                'name' => 'Child 1',
                'children' => array(
                    array(
                        'name' => 'Sub Child 11',
                        'children' => array(
                            array(
                                'name' => 'Sub Sub Child 111',
                            ),
                            array(
                                'name' => 'Sub Sub Child 112',
                            ),
                        )
                    ),
                    array(
                        'name' => 'Sub Child 12'
                    )
                )
            ),
            array(
                'name' => 'Child 2',
                'children' => array(
                    array(
                        'name' => 'Sub Child 21'
                    ),
                    array(
                        'name' => 'Sub Child 22'
                    )
                )
            )
        )
    )
);

Finally we need to loop through the array to create the structure and we’ll use some CSS classes to draw some lines for connecting parent to its children.

Pedigree/Family Tree

Download Code Here

---