Family tree layout

Question

css

Tell me, how would it be logical to make up a family tree? The emphasis is on the fact that the data will come from the MySql database, therefore complex and heterogeneous structures will not work. Here are my thoughts on a simple tree. But when brothers and sisters, relatives of parents and their families appear in the branches, everything turns out to be not so simple.

Answer 1

I would do it stupidly on the forehead - a person is drawn by any element, even a div, even a button, but according to the coordinates calculated in the javascript.
Trick a recursive (and rather head-recursive) function, say, draw_ancestors(). In it, when the lower, obviously more populated level is drawn, and only then, using the coordinates received from below, already calculate the coordinates for the current one and return them to the top level in the stack.
How to optimize the database structure and communication with it in this case is a separate issue. For the sake of general interest, I would try a no-sql solution with getting the entire tree at once in JSON.

Answer 2

The first thing that came to mind was a spreadsheet. The number of columns is the maximum width of the tree (just the same horizontal "sprouts" in the form of sisters, brothers), the number of rows is the maximum height of the tree (mothers, fathers, grandparents). Something like this.