Family Tree Toyhou.se

<!--------------------------
      Add/Remove Generations
        as you need them.

      Feel free to edit the
       code, this is just
        a basic idea!

        When adding pictures
         it's recommended
         to use a small
        headshot or icon
      (maybe 100 x 100 pixels)

         This is my first
         code so I'm sorry
           it's sloppy;;;;
------------------------------->

<!------------------------------
        Generation 1
------------------------------->

  <table style="width: 100%;"><tbody><tr><td style="width: 10%; border-width: 1px;"><div style="text-align: center;">
  <img src="[URL HERE]" class="fr-fic fr-dib" width="76" height="61">[Name]<br>(status)</div></td>

  <td style="width: 10%; border-width: 1px;"><div style="text-align: center;">-------?-------</div></td>

  <td style="width: 10.0079%; border-width: 1px;"><div style="text-align: center;">[name]<br>(status)</div></td>

  <td style="width: 10.0079%; border-width: 1px;"><br></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;"><strong>Generation 1</strong><br><strong>(Great-Great-Great Grandparents)</strong></div></td>

  <td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">
    [name]<br>(status)</div></td>

  <td style="width: 10.0000%;"><div style="text-align: center;">-------?-------</div></td>

  <td style="width: 10.0000%;"><div style="text-align: center;">[name]<br>(status)</div></td></tr>

  <!-------------------------
           Divider 1
  ------------------------->

  <tr><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">-------------------</div></td><td style="width: 10.0079%;"><div data-empty="true" style="text-align: center;">-------------------</div></td><td style="width: 10.0079%;"><div data-empty="true" style="text-align: center;">-------------------</div></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">-------------------</div></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">-------------------</div></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">-------------------</div></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">-------------------</div></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">------------------</div></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">------------------</div></td></tr>

  <!------------------------>
        Generation 2
  ----------------------->

  <tr><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">
    [name]<br>(status)</div></td>

    <td style="width: 10.0000%;"><div style="text-align: center;">-------?-------</div></td><td style="width: 10.0079%;"><div data-empty="true" style="text-align: center;">
      [name]<br>(status)</div></td><td style="width: 10.0079%;"><br></td>

    <td style="width: 10.0000%;"><div style="text-align: center;"><strong>Generation 2<br>(Great-Great Grandparents)</strong></div></td>

    <td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">
    [name]<br>(status)</div></td>

    <td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">-------?-------</div></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">[name]<br>(status)</div></td></tr>

  <!------------------------>
          Divider 2
  ------------------------>

  <tr><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0079%;">-------------------</td><td style="width: 10.0079%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">------------------</td><td style="width: 10.0000%;">------------------</td></tr>

  <!------------------------>
         Generation 3
  ------------------------>

  <tr><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">
    [name]<br>(status)</div></td>

    <td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">-------?-------</div></td><td style="width: 10.0079%;"><div data-empty="true" style="text-align: center;">
      [name]<br>(status)</div></td><td style="width: 10.0079%;"><br></td>

      <td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;"><strong>Generation 3</strong><br><strong>(Great Grandparents)</strong></div></td>

      <td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">
        [name]<br>(status)</div></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">-------?-------</div></td>

        <td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">[name]<br>(status)</div></td></tr>

  <!------------------------>
         Divider 3
  ------------------------>

  <tr><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0079%;">-------------------</td><td style="width: 10.0079%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">------------------</td><td style="width: 10.0000%;">------------------</td></tr>

  <!----------------------->
  Generation 4 (Grandparents)
  ----------------------->

  <tr><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">
    <img src="URL HERE" class="fr-fic fr-dib" width="70" height="60"></div><p style="text-align: center;">[name]</p></td>

    <td style="width: 10%; border-color: rgb(252, 208, 99); border-style: double; border-width: 1px;"><div style="text-align: center;"><strong><span style="color: #fcd063;">-------&hearts;-------</span></strong><br><strong><span style="color: #fcd063;">Married</span></strong></div></td>

    <td style="width: 10.0079%;"><div data-empty="true" style="text-align: center;">
      <img src="URL HERE" class="fr-fic fr-dib" width="72" height="52"></div><p style="text-align: center;">[name]</p></td>

      <td style="width: 10.0079%;"><br></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;"><strong>Generation 4</strong><br><strong>(Grandparents)</strong></div></td>

      <td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">
        <img src="URL HERE" class="fr-fic fr-dib" width="60" height="57"></div><p style="text-align: center;">[name]</p></td><td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">-------?-------</div></td>

        <td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">
          [name]<br>(status)</div>

  <!----------------------
        Divider 4
  ---------------------->

  </td></tr><tr><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0079%;">-------------------</td><td style="width: 10.0079%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">-------------------</td><td style="width: 10.0000%;">------------------</td><td style="width: 10.0000%;">------------------</td></tr><tr><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td>

  <!--------------------->
   Generation 5 (Parents)
  --------------------->

  <td style="width: 10.0079%;"><br></td><td style="width: 10.0079%;"><br></td><td style="width: 10.0000%;"><div style="text-align: center;"><strong>Generation 5</strong><br><strong>(Parents)</strong></div></td>

  <td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td></tr>

  <tr><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0079%;"><br></td><td style="width: 10.0079%;"><div style="text-align: center;">
    <img src="URL HERE" class="fr-fic fr-dib" width="77" height="57">[name]</div></td>

    <td style="width: 10%; border-color: rgb(191, 21, 21); border-style: double; border-width: 1px;"><div data-empty="true" style="text-align: center;"><span style="color: #bf1515;"><strong>-------X-------</strong></span><br><span style="color: #bf1515;"><strong>Divorced</strong></span></div></td>

    <td style="width: 10.0000%;"><div style="text-align: center;">
      <img src="URL HERE" class="fr-fic fr-dib" width="60" height="82">[name]</div></td><td style="width: 10.0000%;"><br></td>

      <td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td></tr></tbody></table><table style="width: 100%;"><tbody><tr><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td>

  <!-------------------->
    Present Generation
  -------------------->

  <td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;"><strong>Generation 6</strong><br><strong>(Present)</strong></div></td>

  <td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td></tr>

  <tr><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><div style="text-align: center;">
    <img src="URL HERE" class="fr-fic fr-dib" width="81" height="63">[name]</div></td>

    <td style="width: 10.0000%;"><div style="text-align: center;"><strong><span style="color: #1a6732;">-------&diams;-------</span></strong><br><strong><span style="color: #1a6732;">Siblings</span></strong></div></td>

    <td style="width: 10.0000%;"><div data-empty="true" style="text-align: center;">
      <img src="URL HERE" class="fr-fic fr-dib" width="79" height="55"></div><p style="text-align: center;">[name]</p></td>

      <td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td><td style="width: 10.0000%;"><br></td></tr></tbody></table>
Code by @Jeanify