Semantisch beste structuur voor een treetable

[Verwijderd]

Er zijn nogal wat dingetjes te vinden die een treetable maken. Die varieren van ronduit beroerd tot redelijk aardig, maar ze hebben allemaal als eigenschap dat de html die ze produceren een rommel is.

Wat ik eigenlijk wil is beginnen met een nette "treetable" in html, en daar vervolgens de behaviour aan hangen die ik wil (in en uitklappen van de tree, sorteren van de kolommen)

Maar ja, in html heb je geen treetable, enkel nested lists ('tree') en tables ('table'). Hoe maken we daarvan een nette tree table.

Ik heb twee suggesties:
1) sla de table plat en maak van de rij een lijst:

HTML:

<ul class="treetable">
  <li>map 1
    <ul>
      <li>submap 1
        <ul class="properties">
          <li>eigenschap 1</li>
          <li>eigenschap 2</li>
          <li>eigenschap 3</li>
          <li>eigenschap 4</li>
        </ul>
      </li>
      <li>submap 2
        <ul class="properties">
          <li>eigenschap 1</li>
          <li>eigenschap 2</li>
          <li>eigenschap 3</li>
          <li>eigenschap 4</li>
        </ul>
      </li>
    </ul>
    <ul class="properties">
      <li>eigenschap 1</li>
      <li>eigenschap 2</li>
      <li>eigenschap 3</li>
      <li>eigenschap 4</li>
    </ul>
  </li>
</ul>

Je bent hier wel je kolommenstructuur kwijt (en je headers). Merk bovendien op dat er in "map 1" twee lijsten staan, 1 voor de subtree en 1 voor de kolommen (met een aparte klasse)

2) De andere mogelijkheid is een tabel, waarbij je gebruik maakt van het headers attribuut en daarmee de treerelatie aangeeft:

HTML:

<table>
  <col id="tree">
  <colgroup>
    <col id="eigenschap1">
    <col id="eigenschap2">
    <col id="eigenschap3">
    <col id="eigenschap4">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Eigenschap 1</th>
      <th scope="col">Eigenschap 2</th>
      <th scope="col">Eigenschap 3</th>
      <th scope="col">Eigenschap 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="map1" scope="row">Map 1</th>
      <td>Eigenschap 1</td>
      <td>Eigenschap 2</td>
      <td>Eigenschap 3</td>
      <td>Eigenschap 4</td>
    </tr>
    <tr>
      <th scope="row" headers="map1">submap 1</th>
      <td>Eigenschap 1</td>
      <td>Eigenschap 2</td>
      <td>Eigenschap 3</td>
      <td>Eigenschap 4</td>
    </tr>
    <tr>
      <th scope="row" headers="map1">submap 2</th>
      <td>Eigenschap 1</td>
      <td>Eigenschap 2</td>
      <td>Eigenschap 3</td>
      <td>Eigenschap 4</td>
    </tr>
  </tbody>
</table>

Ik wil graag een beetje discussieren wat het handigste zou zijn. Misschien zijn er andere ideeen?

[Erkens]

Nog een ander mogelijkheid is het gebruik maken van een definition list binnen je tree.

[Bosmonster]

Ligt er een beetje aan waar je in je treetable de meeste waarde aan hecht. Is dat de hierarchische structuur of is dat de verbondenheid van de kolommen.

Die verbondenheid van de kolommen is imho minder belangrijk. De data is ook aan het hoofditem te linken met een extra ul zoals je al doet of met een dl zoals Erkens voorstelt.

Met een table kun je nooit de hierarchie terugwinnen op een dergelijke manier.

[r0bert]

Edit: Euh Eerst zoeken, dan typen;

[ Voor 131% gewijzigd door r0bert op 25-08-2008 15:05 ]