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

Download Code Here

Advertisement