Listes et tableaux

Avant de passer à la conception d'un menu, le départ d'une application Web, il est utilise de voir comment se définit une liste, ou un tableau qui est une liste à deux dimensions.

Listbox

La balise listbox contient des elements de type listitem. Elle définit une liste et les éléments de la liste.

<listbox>
    <listem label="Julia" />
    <listem label="Sandra" />
    <listem label="Sharon" />
</listbox>

Pour définir un tableau, il faut des balises plus diverses...

Tableau

Les composantes d'une listbox, outre listbox et listitem, sont les balises suivantes:

listcols

Balise contenant la définition des colonnes, leur fonction est organisatrice, elles ne contiennent pas les éléments des colonnes.

listcol

Représente une colonne. Autant de listcol que de colonnes dans le tableau.

listcell

Cellule du tableau, elle est composante de listem qui représente une ligne dans un tableau (mais un seul élément dans une liste).

listhead

Balise contenant la liste des en-têtes. Il y a une en-tête par colonne.

listheader

Balise d'en-tête définissant le titre d'une colonne.

De façon synthétique on aura l'organisation suivante pour un tableau de trois lignes et trois colonnes:

listhead	listheader	listheader	listheader
listcols	listcol	listcol	listcol
listitem	listcell	listcell	listcell
listitem	listcell	listcell	listcell
listitem	listcell	listcell	listcell

Ce qui donne le code suivant:

<listbox>
    <listhead>
        <listheader></listheader>
        <listheader></listheader>
        <listheader></listheader>
    </listhead>
    <listcols>
        <listcol></listcol>
        <listcol></listcol>
        <listcol></listcol>
    </listcols>
    <listitem>
        <listcell></listcell>
        <listcell></listcell>
        <listcell></listcell>
    </listitem>
    <listitem>
        <listcell></listcell>
        <listcell></listcell>
        <listcell></listcell>
    </listitem>
    <listitem>
        <listcell></listcell>
        <listcell></listcell>
        <listcell></listcell>
    </listitem>
</listbox>

Si par example les listheaders contiennent Nom, Age, Ville, alors chaque groupe de listcell contiendra dans l'ordre un nom, un age, une ville.

Example et code

• Démo: code.zip