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'
)
)
)
)
)
);
view raw pedigree.php hosted with ❤ by GitHub

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
Pedigree/Family Tree

Download Code Here

3 thoughts on “Pedigree/Family Tree using HTML table

  1. Hi!

    I would like something like this but in horizontal mode!

    Do you have an example of that to?

    With regards
    Marcus

    • You might have to adjust the existing logic to render them child nodes in columns instead of rows. Or you can just apply CSS transform to rotate it to horizontally.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.