Binären Baum dynamisch in HTML darstellen

[EKKi]

Mahlzeit Joachim B.,

Dazu muss ich sagen, dass ich nicht in diesem Muster das darstellen möchte:

P
|C
||C
|C
||C
|||C
|||C

Aber gerade für derartige Bäume (jeweilige Kind-Anzahl immer gleich bzw. vorhersehbar) bieten sich doch entsprechend formatierte Listen geradezu an ... ich habe da mal eben auf die Schnelle was zusammengeklimpert (müsstest Du hier und da Deinen Vorstellungen entsprechend anpassen):

<style type="text/css">[code lang=css]  
  
ul.tree,  
ul.tree li,  
ul.tree ul {  
  margin:   0;  
  padding:  0;  
}  
  
ul.tree li {  
  display:  inline;  
  float:    left;  
}  
  
ul.tree div {  
  display:          inline-block;  
  margin:           2px;  
  width:            100%;  
  border:           1px outset blue;  
  text-align:       center;  
}

</style>

<ul class="tree">
  <li>
    <div>Eltern</div>
    <ul>
      <li>
        <div>Kind 1</div>
        <ul>
          <li>
            <div>Enkel 1</div>
            <ul>
              <li>
                <div>Urenkel 1</div>
                <ul>
                  <li><div>...</div></li>
                  <li><div>...</div></li>
                </ul>
              </li>
              <li>
                <div>Urenkel 2</div>
                <ul>
                  <li><div>...</div></li>
                  <li><div>...</div></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <div>Enkel 2</div>
            <ul>
              <li>
                <div>Urenkel 1</div>
                <ul>
                  <li><div>...</div></li>
                  <li><div>...</div></li>
                </ul>
              </li>
              <li>
                <div>Urenkel 2</div>
                <ul>
                  <li><div>...</div></li>
                  <li><div>...</div></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <div>Kind 2</div>
        <ul>
          <li>
            <div>Enkel 1</div>
            <ul>
              <li>
                <div>Urenkel 1</div>
                <ul>
                  <li><div>...</div></li>
                  <li><div>...</div></li>
                </ul>
              </li>
              <li>
                <div>Urenkel 2</div>
                <ul>
                  <li><div>...</div></li>
                  <li><div>...</div></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <div>Enkel 2</div>
            <ul>
              <li>
                <div>Urenkel 1</div>
                <ul>
                  <li><div>...</div></li>
                  <li><div>...</div></li>
                </ul>
              </li>
              <li>
                <div>Urenkel 2</div>
                <ul>
                  <li><div>...</div></li>
                  <li><div>...</div></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>[/code]

Der PHP-Code, der diese Struktur erstellt, sollte recht einfach zu stricken sein ...

MfG,
EKKi