5. LES TABLEAUX

1. Insertion d'un tableau simple
2. Propriétés du tableau 		3. Propriétés de la cellule
4. Tableaux imbriqués

Insertion d'un tableau simple

Les tableaux sont d'une très grande utilité en HTML principalement parce qu'ils permettent de faire une mise en page (dans ce cas, c'est un tableau dont on cache les bordures).
Source Aperçu
Le tableau le plus simple qu'il soit est de la forme suivante (ici, il va faire 4 lignes * 3 colonnes) :

<TABLE BORDER="2">
  <TR>
    <TD>contenu 1</TD>
    <TD>contenu 2</TD>
    <TD>contenu 3</TD>
  </TR>
  <TR>
    <TD>contenu 4</TD>
    <TD>contenu 5</TD>
    <TD>contenu 6</TD>
  </TR>
  <TR>
    <TD>contenu 7</TD>
    <TD>contenu 8</TD>
    <TD>contenu 9</TD>
  </TR>
  <TR>
    <TD>contenu 10</TD>
    <TD>contenu 11</TD>
    <TD>contenu 12</TD>
  </TR>
</TABLE>
Le contenu peut aussi bien être une image, du texte, un lien, etc... Ici, c'est un très court texte que j'ai utilisé pour l'exemple.
  • Vous pouvez donc déduire de cet exemple que <TR> et </TR> marquent le début et la fin d'une ligne, et que <TD> et </TD> le début et la fin d'une colonne. Remarquez bien que l'on définit d'abord la ligne puis les colonnes contenues dans la ligne, il est donc impossible d'avoir des <TR> et </TR> entre des <TD> et </TD>.
  • On met des tabulations en débuts de ligne pour que le tableau soit bien structuré et que donc sa source soit plus facile à relire. Cela n'a aucune conséquence visible lors du lancement de la page HTML.
  • Il n'y a pas besoin de définir explicitement le nombre de lignes et de colonnes du tableau : le navigateur le comprend au nombre de <TR> et <TD>.


    • Attention !
  • On écrit tout d'abord les TR puis à l'intérieur des balises <TR> et </TR> on met les <TD> et </TD>, et jamais l'inverse. Cela est logique, car ressemblant à la lecture que l'on fait d'un texte : on lit le de gauche à droite (cela représente les TD, c'est-à-dire les colonnes) puis on passe à la ligne suivante (un nouveau TR) pour lire la suite.
  • Ne pas oublier de refermer chaque <TD>, <TR> et même <TABLE> par les balises </TD>, </TR> et </TABLE>. Sans cela, le navigateur s'y perderait !


    • Les propriétés du tableau
    Il faut tout d'abord savoir que toutes les propriétés peuvent être ajoutées les unes à la suite des autres.

    Les propriétés de la cellule
    Nous étudierons ici les propriétés de la balise <TD>. Ces propriétés concernent uniquement la cellule, et n'affectent pas le tableau en entier. Remarquez que si une propriété de cellule "contredit" celle du tableau, c'est celle de la cellule qui l'emporte (par exemple, si le fond du tableau est le rouge (définit par BGCOLOR), et que pour une cellule on définit du vert, alors le fond de cette cellule sera du vert).


    Tableaux imbriqués
    Les tableaux, comme je l'ai déjà dit dans ce chapitre sont extrêmement utiles pour les mises en page de site web, ils permettent certaines mises en pages, ou alignements qui seraient autrement impossibles à faire (pour cela, on utilise la plupart du temps des tableaux sans bordures, avec la propriété BORDER="0").
    Mais parfois, même s'ils sont très utiles, on est encore limité, on ne peut pas obtenir la présentation que l'on souhaite. Pour remédier à cela, on peut créer des tableaux dans des tableaux, et là on n'est quasiment plus jamais bloqué. Voici un exemple assez simple :

    <TABLE BORDER="2" BGCOLOR="#A0B0B0" WIDTH="400">
   <TR>
      <TD>
         <B>Essai de tableau dans un tableau</B>
      </TD>
   </TR>
   <TR>
      <TD BGCOLOR="#B0B0B0">
         Voici le tableau imbriqué dans l'actuel tableau :<BR>
         <TABLE BORDER="1" BGCOLOR="#F0F0F0" WIDTH="50%" ALIGN="center">
            <TR>
               <TD WIDTH="30%">1ère colonne du sous-tableau</TD>
               <TD>2ème colonne du sous-tableau</TD>
            </TR>
         </TABLE>
         Le sous-tableau est fini.
      </TD>
   </TR>
</TABLE>

    Et voici le résultat de cet exemple :
    Essai de tableau dans un tableau
    Voici le tableau imbriqué dans l'actuel tableau :
    1ère colonne du sous-tableau 2ème colonne du sous-tableau
    Le sous-tableau est fini.

    Remarques :
  • On remarque que pour s'y repérer dans les sources, il est vraiment indispensable de mettre des tabulations, sans cela on s'y perderait totalement !
  • Lorqu'on définit que WIDTH="50%" pour le 2ème tableau, c'est 50% des 400 pixels de large du tableau dans lequel il se trouve. Et les 30% de la 1ère colonne du sous-tableau correspond à 30% du sous-tableau, c'est-à-dire 30% des 50% des 400 pixels !
  • Vous avez donc peut-être remarqué qu'il y a, rien que sur cette page, beaucoup de tableaux imbriqués (par exemple le tableau qui explique la propriété COLSPAN de <TD> par un exemple).