LES TABLEAUX


La création de tableaux est sans doute l'exercice le plus difficile à réussir en HTML et n'a été développé que plus récemment

Pour insérer un tableau, il y a trois possibilités:
 

  • - soit reprendre le tableau créé par un traitement de texte et le transformer en image GIF.
  • - soit faire un tableau rudimentaire par la balise PRE ( voir plus haut)

    •  
  • - soit utiliser un assistant permettant de créer des tableaux.


    • Quoiqu'il en soit, nous donnons ci-après la manière de procéder en HTML. Les divers paramètres dont il faut tenir compte sont résumés ci-après.

    Ce tableau indique la complexité des variables.
    Les balises essentielles sont :
    TABLE
    TR
    TH
    TD

    Ces 4 balises acceptent l'attribut BGCOLOR pour mettre en couleur, soit tout le tableau, soit une rangée, soit une cellule.
    Il va de soi que du texte peut être placé dans le conteneur FONT COLOR=

    Il est utile de dessiner le tableau avant de commencer, si on fait des fusions de cellules.

    Il y a souvent intérêt à commencer par <CENTER> pour centrer le tableau sur l'écran. A défaut, le tableau se place à gauche.

    La balise TABLE

    De préférence précédé par <P>

    Les attributs sont ALIGN - BORDER - WIDTH - HEIGHT - RULES et CELLPADDING

    ALIGN= est accompagné de <left> , <center> ou <right>.

    BORDER consiste à tracer un bord ou le cadre . En son absence, le tableau n'a pas de bord. BORDER="0" (tableau sans cadre).
    Sans autre indication après BORDER, le bord a une largeur de 1.
    On peut augmenter le bord et écrire BORDER="2"

    WITDH se rapporte à la largeur et s'exprime le mieux en % de l'écran (par défaut, c 'est 100 %)

    HEIGHT se rapporte à la hauteur et s'exprime le mieux en pixels, sachant qu'un écran normal comporte 480 pixels, dont il faut soustraire la hauteur de la barre d'outils du navigateur.

    RULES permet d'opter pour la présence ou non des barres séparant les ligne et colonnes internes du tableau.
    Il accepte les valeurs : ALL ( par défaut) : RULES=ALL
    ainsi que jNONE, ROWS, COLS

    CELLPADDING est optionnel. C'est l'espace en pixels entre le cadre et le contenu de la cellule. Par défaut, c'est 1.

    Ex.: <TABLE BORDER="2" WIDTH="90%" HEIGHT="300">

    Ce tableau a un bord un peu plus épais, occupe 90 % de la largeur de l'écran et une hauteur de 300 pixels (3/4 d'un écran normal)

    -- TABLE ne peut contenir que deux autres balises: CAPTION et TR.
    ------------------------
    La balise CAPTION

    C'est le titre qui par défaut se trouve au dessus du tableau. On peut utiliser l'attribut ALIGN = TOP,BOTTOM, LEFT, RIGHT
    On peut le mettre sur deux lignes par <BR>, en grasses par <B> et en couleur par <FONT COLOR="#.......">
    -----------------------
    La balise TR (Table Row)

    Ce sont les rangées du tableau qui à leur tour contiennent des TH (Table Header) et des TD (Table Data), mais rien n'empêche d'utiliser TH pour les résultats. Les TH se présentent en caractère gras, contrairement aux TD qui sont présentés en caractère normal.

    Chaque rangée se termine par </TR> sauf la dernière rangée après laquelle on trouvera </TABLE>

    Pour chaque rangée, on donne les attributs:

    ALIGN="left" - ou - "right" - ou - "center" (left par défaut)

    VALIGN="top" - ou - "middle" - ou "bottom" (middle par défaut)

    Ex.: <TR ALIGN="center" VALIGN="top">

    N.B. :
    - Il va de soi que le nombre de cellules de la première rangée détermine le nombre de cellules de tout le tableau.

    - Attention, si on effectue une fusion de cellules. Il faut en tenir compte dans le nombre de données à introduire dans les rangées de cellules.
    ------------------------
    La balise TH (Table Header)

    La balise TH détermine le contenu des cellules en tête de colonne. Il est en caractère gras.
    </TH> n'est pas nécessaire, parce qu'il est impliqué dans un autre TH ou TD ou TR.

    Outre ALIGN et VALIGN, TH peut avoir deux autres attributs : ROWSPAN et COLSPAN.
    Quand les attributs ALIGN et VALIGN sont utilisés sous TH, ils surpassent et annulent ceux qui accompagnent TR

    ROWSPAN définit combien de rangées une cellule plus haute occupera dans le tableau en comptant de haut en bas

    Ex.: <TH ROWSPAN="2"> occupe deux cellules verticalement.

    COLSPAN définit combien de colonnes une cellule plus large occupera dans le tableau en comptant de gauche à droite.

    Ex: <TH COLSPAN="2"> occupe deux cellules horizontalement.

    Les deux attributs peuvent être combinés

    Ex.: <TH ROWSPAN="2" COLSPAN="2">

    Une cellule peut contenir : A - IMG - BR - ADDRESS - BLOCKQUOTE - P - PRE - Hn - OL - UL
    -------------------------------------------
    La balise TD

    La balise TD détermine le contenu des cellules. Elle est en caractère normal.
    </TD> n'est pas nécessaire, parce que il est impliqué dans un autre TD ou TH ou TR.

    Outre ALIGN et VALIGN, TD peut avoir deux autres attributs : ROWSPAN et COLSPAN.
    Quand les attributs ALIGN et VALIGN sont utilisés sous TD, ils surpassent et annulent ceux qui accompagnent TR

    ROWSPAN définit combien de rangées une cellule plus haute occupera dans le tableau en comptant de haut en bas.

    Ex.: <TD ROWSPAN="2"> cfr. supra

    COLSPAN définit combien de colonnes une cellule plus large occupera dans le tableau en comptant de gauche à droite .

    Ex: <TD COLSPAN="2"> cfr. supra

    Les deux attributs peuvent être combinés

    Ex.: TD ROWSPAN="2" COLSPAN="2">

    Dans une cellule, tant TH que TD, on peut créer des liens par <A HREF...> , on peut y mettre une image... <TD><IMG.SRC=".logo.gif">
    et aussi des <BR>, ADDRESS, BLOCKQUOTE, P, PRE, Hn , OL, UL.

    N.B.: Une cellule ne peut pas rester vide, si on veut lui garder sa forme lors de la lecture par tous les navigateurs.
    Pour ce faire, on y place un espace insécable : " &nbsp; " (numbering space).

    Exemple de tableau simple:
     

    SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ

    <HTML>
    <HEAD>
    <TITLE> Tableau simple </TITLE>
    <CENTER><H1> Exemple de tableau simple</H1>
    <P>
    <TABLE WIDTH="50%" BORDER="1">
    <CAPTION><B>Premier exemple</B></CAPTION
    <TR>
    <TH ROWSPAN="2">Logiciels<TH COLSPAN="2">TOTAL</TR>
    <TR><TH>BYTES <TH>Kbytes</TR>
    <TR>
    <TD>Word <TD ALIGN="right">780 <TD>2</TR>
    <TR>
    <TD>Excell<TD ALIGN="right">1.750 <TD>2,8</TR>
    <TR>
    <TD>PowerPoint <TD ALIGN="right">2.400 <TD>3,2 </TR>
    <TR>
    <TD COLSPAN="2" ALIGN="left">Usage total <TD>8 Kb</TR>
    </TABLE>
    </CENTER>
    </BODY>
    </HTML>

    ----------------------------------------------------

    Pour voir comment cet exemple est reproduit par le navigateur, cliquez I.C.I.

    ----------------------------------------------------
    Commentaires:

    Ce tableau est centré et occupe la moitié de la largeur de l'écran.

    CAPTION donne le titre en gras <B>

    La première cellule a une hauteur de 2 cellules et la suivante a une largeur de 2 cellules. Chaque rangée a donc une largeur de 3 colonnes.

    Les </TH> ne sont pas obligatoires.

    Word et 2 s'alignent à gauche par défaut.

    Le dernier ALIGN="left" est superflu.

    Exemple de tableau complexe:
     

    SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ

    <HTML>
    <HEAD>
    <TITLE>Tableau Complexe</TITLE>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF">

    <CENTER>
    <P>
    <TABLE WIDTH="75%" BORDER="4" CELLPADDING="2" HEIGHT="300" >
    <CAPTION><B><FONT Color="#FF0000">Here is the caption <BR>of this table</FONT></B></CAPTION>
    <TR ALIGN="center" VALIGN="top">
    <TD COLSPAN="2"><B>Heading 1</B>
    <TD ><B>Heading 3</B></TR>

    <TR ALIGN="center" VALIGN="middle">
    <TD ROWSPAN="2"><B>Item 1</B>
    <TD ><B>Item 2</B>
    <TD><B>Item 3</B></TR>

    <TR ALIGN="center" VALIGN="middle">
    <TD ><B>Item 4</B>
    <TD><B>Item 5</B></TR>

    <TR ALIGN="center" VALIGN="bottom">
    <TD ><B>Item 6</B>
    <TD><B>Item 7</B>
    <TD><B>Item 8</B></TR>

    <TR ALIGN="center" VALIGN="top">
    <TD> <B>Item 9</B>
    <TD ROWSPAN="2" COLSPAN="2"><B>Item 10</B></TR>

    <TR ALIGN="center" VALIGN="top">
    <TD> <B>Item 1</B></TR>

    <TR>
    <TD COLSPAN="3"><B><FONT COLOR=#"00FF00">a big wide item 11</FONT></B></TR>

    </TABLE>
    </CENTER>
    </BODY>
    </HTML>
    ----------------------------------------------------

    Pour voir comment cet exemple est reproduit par le navigateur, cliquez I.C.I.

    ----------------------------------------------------
    Commentaires:

    Le tableau se présente avec un titre en rouge.

    Il est centré, occupe 75 % de largeur d'écran et une hauteur de 300 pixels.

    Dans la première rangée, la première cellule occupe deux colonnes de largeur et les textes se trouvent alignés au sommet (VALIGN="top")

    La première cellule de la 2 ème rangée (item 1) a 2 cellules de haut, donc la troisième rangée ne pourra plus contenir que deux cellules (item 4 et 5)

    A la 5 ème rangée, c'est l'item 10 qui comporte 2 cellules de haut et 2 cellules de large, ce qui entraîne que la 6 ème rangée ne comporte plus qu'une cellule.

    Dans la dernière rangée, il y a une fusion de trois cellules et <TR> n'a aucun attribut, donc par défaut le texte se place à gauche et à mi-hauteur. Les caractères sont en vert.
     

    Retour au sommaire