Accueil > HTML > HTML – Tableaux

HTML – Tableaux

25/03/2002 cybwarrior Commenter Allez aux commentaires
This entry is part 13 of 23 in the series HTML - Tutoriel

HTML - Tutoriel
  1. Les attributs de la balise <TABLE>
    1. ALIGN (alignement horizontal)
    2. BGCOLOR (couleur d’arrière plan)
    3. BORDER (bordure du tableau)
    4. CELLPADDING (espacement dans la cellule)
    5. CELLSPACING (espacement entre les cellules)
    6. FRAME (emplacement de la bordure)
    7. RULES (bordures intérieures)
    8. WIDTH (largeur du tableau)
  2. Les attributs de la balise <TR>
    1. ALIGN (alignement horizontal)
    2. BGCOLOR (couleur d’arrière plan)
    3. VALIGN (alignement vertical)
  3. Les attributs des balises <TH> et <TD>
    1. ALIGN (alignement horizontal)
    2. BGCOLOR (couleur d’arrière plan)
    3. COLSPAN (groupement de colonnes)
    4. HEIGHT (hauteur de la cellule)
    5. NOWRAP (pas de rupture de ligne)
    6. ROWSPAN (groupent de lignes)
    7. VALIGN (alignement vertical)
  4. Les attributs de la balise <CAPTION>
    1. ALIGN (alignement du titre autour du tableau)
  5. Exemple d’application des attributs

Comme on la remarqué quelques parties auparavant, les espaces et les sauts de lignes ne sont
pas pris en compte, sauf dans la balise <PRE>.

Réaliser une mise en page sérieuse était donc un casse tête, avant que l’HTML permette d’inclure
des tableaux dans les documents.

La mise en page est devenue depuis un jeu d’enfant.

Voici ce que l’on est suceptible de trouver dans un tableau :


  • Début du Tableau (<TABLE>)

    • Titre (<CAPTION>Mon Titre</CAPTION>)

    • Début de la Ligne (<TR>)

      • Cellule d’en-tête (<TH>En-tête</TH>)

      • Cellule d’en-tête (<TH>En-tête</TH>)

      • Cellule d’en-tête (<TH>En-tête</TH>)

      • Cellule d’en-tête (<TH>En-tête</TH>)

      • Cellule d’en-tête (<TH>En-tête</TH>)


      • Fin de la Ligne (</TR>)

    • Début de la Ligne (<TR>)

      • Cellule d’en-tête (<TH>En-tête</TH>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)


      • Fin de la Ligne (</TR>)

    • Début de la Ligne (<TR>)

      • Cellule d’en-tête (<TH>En-tête</TH>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)


      • Fin de la Ligne (</TR>)

    • Début de la Ligne (<TR>)

      • Cellule d’en-tête (<TH>En-tête</TH>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)


      • Fin de la Ligne (</TR>)

    • Début de la Ligne (<TR>)

      • Cellule d’en-tête (<TH>En-tête</TH>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)

      • Cellule (<TD>Contenu de la cellule</TD>)


      • Fin de la Ligne (</TR>)

    Fin du tableau (</TABLE>)

Explication :

La création d’un tableau se fait grâce à la balise du type conteneur <TABLE>. Le contenu
du tableau se trouvera à l’intérieur (entre <TABLE> et </TABLE>).
Le contenu, c’est les lignes dans un premier temps, puis les cellules.

Pour créer une ligne, on utilise la balise du type conteneur <TR>. Et c’est à l’intérieur
de cette dernière (entre <TR> et </TR>) que ce trouvera les cellules.

Les cellules peuvent être de deux types :

  • D’en-tête, avec la balise du type conteneur <TH>. Elles sont généralement utilisées
    pour indiquer le titre d’une colonne ou d’une ligne.

  • Normal, avec la balise du type conteneur <TD>. C’est elles qui reçoivent les
    données à afficher, qui peuvent être du texte, des images, des formulaires, des listes,
    ou bien même des tableaux.


Et enfin, on peut donner un titre au tableau. Il sera contenu dans la balise du type conteneur
<CAPTION>, c’est à dire entre <CAPTION> et </CAPTION>).



Petite remarque :

Dans HTML 4, il est possible de réaliser un groupement de lignes dans un tableau, de telle sorte
qu’une partie représente l’en-tête, une autre le corps du tableau et une dernière le pied de page.
À ma connaissance, les navigateurs ne semblent pas reconnaître les trois balise du type conteneur
qui suivent :

  • <THEAD> destinée à recevoir l’en-tête.

  • <TBODY> contient le corps du tableau.

  • <TFOOT> pour le pied de page.


Voici un exemple de tableau, melant images et textes :


<TABLE>                                                   <!– Début du tableau –>

<CAPTION>Quelques images…</CAPTION>                     <!– Titre –>

<TR>                                                      <!– Début de ligne –>

  <TH>Nom</TH>                                            <!– En-têtes avec TH –>

  <TH>Chemin</TH>

  <TH>Image</TH>

</TR>                                                     <!– Fin de ligne –>

<TR>

  <TH>Assembleur</TH>                                     <!– Le nom en en-tête –>

  <TD>http://www.cybwarrior.com/langages/images/assembleur.gif</TD>

  <TD><IMG src= »http://www.cybwarrior.com/langages/images/assembleur.gif »></TD>

</TR>

<TR>

  <TH>C++</TH>

  <TD>http://www.cybwarrior.com/langages/images/cp.gif</TD>

  <TD><IMG src= »http://www.cybwarrior.com/langages/images/cp.gif »></TD>

</TR>

<TR>

  <TH>Delphi</TH>

  <TD>http://www.cybwarrior.com/langages/images/delphi.gif</TD>

  <TD><IMG src= »http://www.cybwarrior.com/langages/images/delphi.gif »></TD>

</TR>

<TR>

  <TH>HTML</TH>

  <TD>http://www.cybwarrior.com/langages/images/html.gif</TD>

  <TD><IMG src= »http://www.cybwarrior.com/langages/images/html.gif »></TD>

</TR>

<TR>

  <TH>QBasic</TH>

  <TD>http://www.cybwarrior.com/langages/images/qbasic.gif</TD>

  <TD><IMG src= »http://www.cybwarrior.com/langages/images/qbasic.gif »></TD>

</TR>

<TR>

  <TH>Turbo Pascal</TH>

  <TD>http://www.cybwarrior.com/langages/images/pascal.gif</TD>

  <TD><IMG src= »http://www.cybwarrior.com/langages/images/pascal.gif »></TD>

</TR>

<TR>

  <TH>Visual Basic</TH>

  <TD>http://www.cybwarrior.com/langages/images/visualbasic.gif</TD>

  <TD><IMG src= »http://www.cybwarrior.com/langages/images/visualbasic.gif »></TD>

</TR>

</TABLE>                                                    <!– Fin du tableau –>

Résultat :















































Quelques images…
Nom Chemin Image
Assembleur http://www.cybwarrior.com/langages/images/assembleur.gif
C++ http://www.cybwarrior.com/langages/images/cp.gif
Delphi http://www.cybwarrior.com/langages/images/delphi.gif
HTML http://www.cybwarrior.com/langages/images/html.gif
QBasic http://www.cybwarrior.com/langages/images/qbasic.gif
Turbo Pascal http://www.cybwarrior.com/langages/images/pascal.gif
Visual Basic http://www.cybwarrior.com/langages/images/visualbasic.gif






Comme toute balise qui se respecte, les balises utilisées par les tableaux possédent des dizaines
d’arguments, dont certains se retrouvent dans toutes les balises. Ce qui suit peut donc paraître
rébarbatif. Vous n’êtes pas oubligé de le lire. Vous pouvez allez directement à l’exemple de tableau,
en bas de la page. Examinez bien le code, puis reportez vous ensuite au descriptif des attributs.







Les attributs de la balise <TABLE>



ALIGN (alignement horizontal)

Cette attribut définit l’alignement horizontal du tableau sur le document. Il peut avoir l’une
de ces trois valeurs :

  • left pour le placer à gauche (option par défaut).

  • center pour le centrer.

  • right pour le placer à droite.


BGCOLOR (couleur d’arrière plan)

bgcolor définit la couleur d’arrière plan à utiliser. Reportez-vous à la section traitant
des couleurs.


BORDER (bordure du tableau)

L’attribut border permet de spécifier une certain épaisseur de bordure autour du tableau.
Elle doit être exprimée en pixels.

CELLPADDING (espacement dans la cellule)

cellpadding définit l’espacement entre le contenu d’une cellule et ses bords. La valeur
est exprimée en pixels.

CELLSPACING (espacement entre les cellules)

cellspacing définit l’espacement (en pixels) à laisser entre chaque cellule d’un tableau.


FRAME (emplacement de la bordure)

Avec cette attribut, il est possible de définir l’emplacement de la bordure. Il semble que seul
Internet Explorer reconnaisse cet attribut. La valeur a employer doit être une de celle-ci :

  • above bordure en haut

  • below bordure en bas

  • box bordure sur les quatres cotés

  • hsides bordure en haut et en bas

  • lhs bordure à gauche

  • rhs bordure à droite

  • void aucune border (option par défaut)

  • vsides bordure à gauche et à droite


RULES (bordures intérieures)

rules permet de spécfier l’aspect des bordures internes au tableaux, c’est à dire les bordures
entre les cellules. Malheuresement, comme pour l’attribut frame, seul Microsoft Internet
Explorer semble reconnaître cet attribut. La valeur a utiliser doit être une de celle-ci :

  • all entre les lignes et les colonnes

  • cols entre les colonnes

  • none aucune bordure (option par défaut)

  • rows entre les lignes


WIDTH (largeur du tableau)

L’attribut width définit la largeur à allouer au tableau. La valeur peut être donnée en
pixels ou bien en pourcentage.







Les attributs de la balise <TR>



ALIGN (alignement horizontal)

Cette attribut definit l’alignement horizontal à l’intérieur des cellules d’une même ligne. Les
valeurs à utiliser sont :

  • left à gauche (option par défaut)

  • center au centre

  • right à droite


BGCOLOR (couleur d’arrière plan)

Comme pour la balise <TABLE>, cet attribut permet de définir la couleur d’arrière
plan, mais d’une seul ligne. Reportez-vous à la section traitant des couleurs.


VALIGN (alignement vertical)

valign spécifie l’alignement vertical à l’intérieur des cellules d’une même ligne. Les
valeurs à employer sont :

  • top alignement en haut

  • middle alignement au centre

  • bottom alignement en bas








Les attributs des balises <TH> et <TD>



ALIGN (alignement horizontal)

align permet de définir l’alignement horizontal à utiliser à l’intérieur d’une seule cellule.
La valeur utilisée doit être une de celle-ci :

  • left à gauche

  • center au centre

  • right à droite


BGCOLOR (couleur d’arrière plan)

L’attribut bgcolor définie la couleur d’arrière plan à utiliser. Reportez-vous à la partie
consacrée au couleurs.


COLSPAN (groupement de colonnes)

colspan permet de réaliser des groupements de colonnes. Très utile lorsque une cellule
est inocupée. La valeur est composée du nombre de colonnes à regrouper.


HEIGHT (hauteur de la cellule)

Cet attribut specifie la hauteur de la cellule en pixels. Attention! Toutes les cellules d’une
ligne prennent la hauteur de la plus grande cellule.


NOWRAP (pas de rupture de ligne)

L’attribut nowrap précise qu’il ne doit pas y avoir de rupture de ligne dans la cellule
où il est spécifié. On dit que ce type d’attribut est un attribut booléan, c’est à dire
qu’il n’a pas de valeur et son unique présence suffit à influencer la tournure que prendra la cellule.


ROWSPAN (groupent de lignes)

rowspan est le complément de colspan. Il permet de grouper des lignes. La
valeur est constituée du nombre de lignes à regouper.


VALIGN (alignement vertical)

valign définie l’alignement vertical à l’intérieur d’une cellule. Les valeurs autorisées
sont :

  • top en haut

  • middle au milieu

  • bottom en bas


WIDTH (largeur de la cellule)

L’attribut width permet de définir la largeur de la cellule en pixels. Attention! Comme
pour l’attribut height, toutes les cellules d’une colonne prennent la largeur de
la plus grande cellule.







Les attributs de la balise <CAPTION>



ALIGN (alignement du titre autour du tableau)

La balise <CAPTION> ne posséde qu’un seul et unique attribut : l’attribut
align. Cet attribut permet de spécifier l’alignement du titre autour du tableau horizontalement
et verticalement. La valeur a utiliser est :

  • top centré, au dessus du tableau (option par défaut)

  • bottom centré, au dessous du tableau

  • left à gauche, au dessus du tableau

  • right à droite, au dessus du tableau








Exemple d’application des attributs


Voici maintenant un exemple d’application visant à montrer l’utilisation des différents attributs.
Ce tableau est un reproduction partielle du tableau Traitements et revêtements de surface
publié dans le merveilleux et très complet GUIDE DU DESSINATEUR INDUSTRIEL écrit
par A. CHEVALIER.


<TABLE border= »1″>

<TR bgcolor= »orange »>

  <TH rowspan= »2″>Désignation</TH>

  <TH rowspan= »2″>Support</TH>

  <TH rowspan= »2″>&Eacute;paisseur</TH>

  <TH colspan= »2″>Dureté</TH>

  <TH rowspan= »2″>Principales propriétés</TH>

</TR>

<TR bgcolor= »orange »>

  <TH>Vickers</TH>

  <TH>Rockwell</TH>

</TR>

<TR bgcolor= »white » align= »center »>

  <TH bgcolor= »orange »>Chromage</TH>

  <TD rowspan= »4″>Métaux ferreux<BR>

                  <BR>

                  Cuivre<BR>

                  et ses alliages<BR>

                  <BR>

                  Alluminum<BR>

                  et ses alliages<BR>

                  <BR>

                  Zinc et ses alliages</TD>

  <TD>5&micro;m à 50&micro;m</TD>

  <TD>-</TD>

  <TD>-</TD>

  <TD align= »left »>Bonne résistance à la corrosion. Bel aspect

                   (satiné ou brillant). Dépot normalisé: 10&micro;m

                   de nickel plus 5&micro;m de chrome.</TD>

</TR>

<TR bgcolor= »white » align= »center »>

  <TH bgcolor= »orange »>Chromage dur</TH>

  <TD>50&micro;m à 500&micro;m</TD>

  <TD>1000</TD>

  <TD>70</TD>

  <TD align= »left »>Très bonne protection contre l’usure et la corrosion

                   (épaisseur courante: 50&micro;m). Bonnes qualités

                   frottantes.</TD>

</TR>

<TR bgcolor= »white » align= »center »>

  <TH bgcolor= »orange »>&Eacute;tamage</TH>

  <TD>5&micro;m à 30&micro;m env.</TD>

  <TD>-</TD>

  <TD>-</TD>

  <TD align= »left »>Bonne résistance à la corrosion. S’utilise en

                   particulier pour les pièces devant être soudées à

                   l’étain.</TD>

</TR>

<TR bgcolor= »white » align= »center »>

  <TH bgcolor= »orange »>Nickelage</TH>

  <TD>2&micro;m à 30&micro;m env.</TD>

  <TD>200 à 800</TD>

  <TD>17 à 63</TD>

  <TD align= »left »>Bonne résistance à l’usure et à la corrosion.</TD>

</TR>

<TR bgcolor= »white » align= »center »>

  <TH bgcolor= »orange »>Trempe superficielle</TH>

  <TD>Aciers trempants</TD>

  <TD>0.3 mm à 6 mm</TD>

  <TD colspan= »2″>Fonction de l’acier utilisé</TD>

  <TD align= »left »>Grande résilience dans le c&oelig;ur de la pièce.

                   Grande dureté de la surface.</TD>

</TR>

</TABLE>

Résultat :



















































Désignation Support Épaisseur Dureté Principales propriétés
Vickers Rockwell
Chromage Métaux ferreux

Cuivre
et ses alliages

Alluminum
et ses alliages

Zinc et ses alliages		 5µm à 50µm - - Bonne résistance à la corrosion. Bel aspect (satiné ou brillant). Dépot normalisé: 10µm de nickel plus 5µm de chrome.
Chromage dur 50µm à 500µm 1000 70 Très bonne protection contre l’usure et la corrosion (épaisseur courante: 50µm). Bonnes qualités frottantes.
Étamage 5µm à 30µm env. - - Bonne résistance à la corrosion. S’utilise en particulier pour les pièces devant être soudées à l’étain.
Nickelage 2µm à 30µm env. 200 à 800 17 à 63 Bonne résistance à l’usure et à la corrosion.
Trempe superficielle Aciers trempants 0.3 mm à 6 mm Fonction de l’acier utilisé Grande résilience dans le cœur de la pièce. Grande dureté de la surface.

Series Navigation«HTML – Les listesHTML – Les cadres (FRAMES)»
Categories: HTML Tags:
  1. BRYON
    11/07/2002 à 14:35 | #1
    Répondre | Citer

    Je suis en train de modifier ton tableau pour intégrer le mien. En revanche je n’arrive pas à changer la taille de police des caractères (j’ai 10 colonnes en tout à intégrer !). Merci d’avance de ton aide.

  2. webmaster
    11/07/2002 à 18:15 | #2
    Répondre | Citer

    Pour changer la taille de la police, tu peux utiliser la balise à l’interieur, par exemple :

    Du très petit texte

    Tu peux aussi utiliser une régle de style, par exemple :

  1. Pas encore de trackbacks