Cladogramme HTML / CSS

Comment figurer les liens de parenté des plantes sur une page web ?

1) Emploi de la balise <pre>

<pre>
                  |===== Amaryllidaceae
            |=====|
            |     |===== Agapanthaceae
       =====|
            |=========== Alliaceae
</pre>

Exemple d'emploi : Arbre des tribus et genres d'Amaryllidaceae

Avantages : Fabrication facile à comprendre, souplesse pour varier la longueur des branches au sein d'un même arbre afin de rendre compte plus précisément de l'histoire évolutive. Représentation reproduite à l'identique par le navigatueur texte Lynx.

Inconvénients : Sur le plan sémantique, c'est très mauvais. La lecture linéaire fait perdre les relations. (comprendriez vous ceci : |===== Amaryllidaceae |=====| | |===== Agapanthaceae =====| |=========== Alliaceae ?)
De plus, c'est beau comme un pou et finalement laborieux à faire ou à modifier.

2) Emploi d'un tableau <table><tr><td rowspan="">

Exemple d'emploi : Ancienne classification des Iris

Avantages : présentation améliorée.

Inconvénients : Perte de souplesse (longueur des "branches" non individualisable). La présentation pose des problèmes sur le plan sémantique (?).

Un tel tableau hiérarchique évoque une liste imbriquée. Franchissons le pas.

<ul>
 <li>Famille
  <ul>
   <li>Tribu
    <ul>
     <li>Genre</li>
     <li>Genre</li>
     <li>Genre</li>
     <li>Genre</li>
    </ul>
   </li>
   <li>Tribu
    <ul>
     <li>Genre</li>
     <li>Genre</li>
     <li>Genre</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

B) Transformons la liste en "tableau"

C'est EXACTEMENT le même code html que précédemment, mais il s'y applique en plus le style suivant :

ul, li {
	display: block;
	position: relative;
	margin: 0;	
	padding: 0; 
	}
ul {
	left: 70px;
	top:-1.4em;
	}
li {
	width: 65px;
	}

Notre liste "tableau" ressemble déjà à un arbre (couché) : on en devine le tronc et deux branches.

C) Dessinons les branches de l'arbre.

ul ul { border-left: 1px solid #000;}
li { border-top: 1px solid #000;}
ul ul ul li {border-top: none;}

La liste devenue tableau devient maintenant un cladogramme (du grec klados : rameau). Il n'est pas encore beau ; c'est juste didactique.

D) Améliorons le style de la "liste-arbre".

Recommençons avec un code un peu différent (attributs ajoutés au html) et une feuille de style plus complète.

Voici un arbre / cladogramme, pas trop vilain sous Gecko avec ses angles arrondis.

Bref aperçu du résultat :

Autres exemples d'emploi : Arbre des Haemantheae, arbre des Clivia.

Pour améliorer encore l'arbre et retrouver la possibilité de branches de longueurs différentes, cherchez du coté d'un positionnement "x" (left:;) individualisé des éléments, ainsi qu'une largeur individualisée.

Pour l'aspect sémantique, aux yeux d'un navigateur textuel cela restera toujours une LISTE !