listes et tableaux

références

          Tutoriel sur les tableaux

          Un Nouveau Guide Internet - une antiquité, mais utile



création de listes

  • Une liste à puces (Unordered List)

    • Chaque item identifié par un <li> .... </li> (list item) et affiche une puce (bullet)

    • Puce différente pour chaque niveau

    • Chaque liste commence par un <ul> et fini par un </ul>

    • Le </li> est nouveau en xhtml

  • Une liste numérotée (Ordered List)

    1. J'ai maintenant un numéro pour chaque item de la liste

    2. J'utilise le tag <ol> pour commencer la liste

    3. Remarquez que le code est presque le même que dans la <ul>



Voici comment la liste que vous venez de lire a été produite :

Code de listes








les tableaux

Le tableau est un des éléments les plus utiles pour afficher des informations spécialisées sur la page.

Dans le passé on s'en est servi beaucoup pour faire la mise en page au complet. Maintenant les experts recommande de ne pas faire cela - la mise en page devrait être faite au moyen du stylesheet.


CECI EST UNE DÉMONSTRATION D'UN TABLEAU
On peut modifier toutes les parties du tableau.
Le tableau est un outil utile pour la mise en page de mon site. Il me permet de disposer du texte et des images lorsque j'ai des informations qui se prêtent à une présentation tabulaire.
En disposant le texte et les images dans les cellules on peut construire une page qui possède les effets spéciaux désirés. jackhammer animation


La structure du tableau

  • Le tableau de base se décrit au moyen de trois tags simples:

    1. le tag <table> décrit le tableau

    2. le tag <tr> (Table Row) décrit chaque ligne ou rangée du tableau - il faut un <tr> pour chaque ligne

    3. le tag <td> (Table Data) décrit chaque élément (cellule) dans une ligne

    4. en plus, on peut ajouter un <caption> ou un <th>


  • Voici le code qui affiche le tableau ci-haut :

code du tableau


  • Notez qu'il y a 3 <tr> et 2 <td> à l'intérieur de chaque <tr> pour construire un tableau
    de 3 lignes x 2 colonnes.

  • Notez aussi que chaque tag a un tag de fin </...> correspondant.

  • Un petit truc en passant : ne laissez pas une cellule du tableau complètement vide car ça va changer les marges - mettez-y au moins un espace avec &nbsp;



Les attributs

Les tableaux peuvent posséder les attributs suivants:

ALIGN=CENTER | LEFT | RIGHT
Permet au tableau d'être aligné à gauche, à droite ou au centre.

BACKGROUND=image
Permet d'insérer une image à l'arrière plan du tableau.

BGCOLOR=couleur
Permet d'attribuer une couleur au fond du tableau.

BORDER=nombre
Permet de mettre une bordure autour du tableau.

BORDERCOLOR=couleur
Permet d'attribuer une couleur à la bordure du tableau.

BORDERCOLORLIGHT=couleur
Permet d'attribuer une couleur aux points culminants de la bordure du tableau.

BORDERCOLORDARK=couleur
Permet d'attribuer une couleur à l'ombre de la bordure du tableau.

HEIGHT=nombre | %
Permet de faire varier la hauteur du tableau. La valeur peut être en pixels ou en pourcentage.

WIDTH=nombre | %
Permet de faire varier la largeur du tableau. La valeur peut être en pixels ou en pourcentage.

CELLSPACING=unNombre
Permet de jouer sur la quantité d'espace entre les cellules du tableau.

CELLPADDING=unNombre
Permet de jouer sur l'espace entre la bordure et le contenu de la cellule du tableau.

CLASS=nom
Spécifie le nom de la classe donnée à la feuille de style.

ID=nom
Associe un nom à une cible dans un lien hypertexte ou à un élément particulier dans une feuille de style associée.

STYLE=nom
Spécifie une feuille de style intraligne.



Haut de la page

Précédente            Suivante