Prog-Info > (X)HTML/CSS > Cours de HTML 4 > Les tableaux.

Les tableaux

Note : Un certain nombre de balises (font, basefont, center, s, u, b, i, ...) et propriétés (align, width & height (associées à certaines balises), size, color, border, background, bgcolor, face, name, target, ...) sont dépréciées. Il est fortement recommandé de ne pas les utiliser car elles pourraient devenir obsolètes dans un futur proche. En fait, ils ne sont plus pris en charge par les normes actuelles du langage HTML (W3C) donc plus sous garantie. L'objectif des Standards est de séparer le contenu de la mise en forme dans les sites Web en utilisant les feuilles de style CSS. Il est donc recommandé de les utiliser au maximum.

Présentation des tableaux

Les tableaux permettent de mieux présenter un certain nombre d'informations.
La balise qui permet de définir un tableau est <table>. Un tableau est composé de lignes et de colonnes. Pour ajouter une nouvelle ligne à un tableau, il faut utiliser la balise <tr> ; en ce qui concerne les colonnes, ce sont les balises <td> et <th> qui sont utilisées.

Comprendre les balises de base

- <table> </table> : Ces balises HTML sont les conteneurs pour l'ensemble des données du tableau.
- <tr> </tr> : Ces balises sont des conteneurs de lignes.
- <td> </td> : Ces balises définissent une cellule. C'est à l'intérieur d'une cellule que sont les données du tableau. Vous pouvez bien sûr, insérer un tableau dans une cellule.
- <th> </th> : Ces balises définissent une cellule-titre. Elles sont en général utilisées par la première ligne et / ou colonne. La plupart des navigateurs mettent le texte de ces cellules en gras et centré.

Quelques attributs de la balise <table> :
- border : Cet attribut permet de définir une bordure (en pixel) au tableau. Si border prend la valeur 0, le tableau n'aura pas de bordure.
- align : Cet attribut permet de centrer un tableau (center), de positionner un tableau à gauche (left) : valeur par défaut ou de positionner un tableau à droite (right).

Exemple :

Source Résultat

<table border="1" align="center">

              <tr>

                <th>Couleurs</th>

                <th>Codes RVB</th>

              </tr>

              <tr>

                <td>Rouge</td>

                <td>FF0000</td>

              </tr>

              <tr>

                <td>Vert</td>

                <td>00FF00</td>

              </tr>

              <tr>

                <td>Bleu</td>

                <td>0000FF</td>

              </tr>

            </table>

Couleurs	Codes RVB
Rouge	FF0000
Vert	00FF00
Bleu	0000FF

Aligner les éléments du tableau

<caption> : Cette balise définit un titre au tableau. L'attribut align vous permet de placer ce titre au dessus du tableau (top) ou en dessous du tableau (bottom). Par défaut ce titre se trouve au-dessus du tableau.

<tr> : L'attribut align de cette balise permet grâce aux valeurs left, right, center d'aligner toutes les cellules de la ligne à gauche, à droite, au milieu. Par défaut, les cellules sont alignées à gauche.
L'attribut valign peut prendre les valeurs top, bottom, middle, baseline (middle par défaut). Cet attribut permet d'aligner verticalement le texte de tous les éléments de la ligne.

<th>, <td> : L'attribut align peut être spécifié pour ces balises avec les valeurs par suivantes : left, right, center (par défaut left pour <td> et center pour <th>).
L'attribut valign peut être spécifié avec les valeurs suivantes : top, bottom, middle (par défaut middle)

Exemple :

Source Résultat

<table border="1">

              <caption align="bottom">

                Correspondance de couleurs.

              </caption>

              <tr>

                <th>Couleurs</th>

                <th>Code RVB</th>

              </tr>

              <tr align="left">

                <td>Rouge</td>

                <td align="center">FF0000</td>

              </tr>

              <tr align="left">

                <td>Vert</td>

                <td align="center">00FF00</td>

              </tr>

              <tr align="left">

                <td>Bleu</td>

                <td align="center">0000FF</td>

              </tr>

            </table>

Correspondance de couleurs.
Couleurs	Code RVB
Rouge	FF0000
Vert	00FF00
Bleu	0000FF

Travailler avec des tableaux complexes

L'attribut frame de la balise <table> indique les côtés d'un cadre à afficher. Les valeurs possibles de frame sont les suivantes :
- void : pas de cadre.
- above : côté supérieur.
- below : côté inférieur.
- hsides : côtés horizontaux.
- lhs : côté gauche.
- rhs : côté droit.
- vsides : côtés verticaux.
- box ou border : les 4 côtés.

L'attribut rules de la balise <table> permet de spécifier des règles supplémentaires à l'intérieur du tableau. Les valeurs de rules possibles sont :
- none : aucune règle.
- groups : une règle horizontale entre chaque groupe de lignes et une règle verticale entre chaque groupe de colonnes.
- rows : les règles de groups plus les règles horizontales entre chaque lignes.
- cols : les règles de groups plus les règles verticales entre chaque colonnes.
- all : des règles entre toutes les lignes et toutes les colonnes.

Fusionner les lignes et les colonnes

Il est possible de fusionner des lignes et des colonnes dans un tableau en combinant des cellules adjacentes.
- L'attribut rowspan avec les balises <td> et <th> permet de fusionner 2 cellules adjacentes sur 1 ligne.
- L'attribut colspan avec les balises <td> et <th> permet de fusionner 2 cellules adjacentes sur 1 colonne.

Exemple 1 :

Source Résultat

<table border="1">

              <tr>

                <td> &amp; 
            </td>

                <td> &amp; 
            </td>

                <td> &amp; 
            </td>

              </tr>

              <tr>

                <td> &amp; 
            </td>

                <td  
            colspan="2"> &amp;
            </td>

              </tr>

            </table>

Exemple 2 :

Source Résultat

<table border="1">

              <tr>

                <td> &amp; 
            </td>

                <td> &amp; 
            </td>

              </tr>

              <tr>

                <td> &amp; 
            </td>

                <td 
            rowspan="2"> 
            &amp; </td>

              </tr>

              <tr>

                <td> &amp; 
            </td>

              </tr>

            </table>

Contrôler la mise en page

Des attributs permettent de mieux contrôler l'affichage des tableaux :
- width : indique la largeur du tableau en pixels ou en pourcentage. On peut l'utiliser avec les balises <table>, <th>, <td>.
- height : indique la hauteur du tableau en pixels ou en pourcentage. On peut l'utiliser avec les balises <table>, <th>, <td>.
- border : précise la largeur de la bordure du tableau en pixels. Utilisable avec la balise <table>.
- cellpadding : indique l'espace entre le contenu de la cellule et le bord de la cellule en pixels. Utilisable avec les balises <th> et <td>.
- cellspacing : fixe l'espace des cellules entre elles (en pixels). Utilisable avec les balises <th> et <td>.

Exemple :

Source Résultat

<table width="80%" border="5" cellspacing="12" cellpadding="5">

              <tr>

                <td>Un</td>

                <td>Deux</td>

              </tr>

              <tr>

                <td>Trois</td>

                <td>Quatre</td>

              </tr>

            </table>

Un	Deux
Trois	Quatre

Les couleurs dans les tableaux

Vous pouvez en HTML changer la couleur de fond et le bordure des cellules d'un tableau. L'attribut bgcolor permet de changer la couleur de fond d'une cellule, d'une ligne ou d'un tableau entier. L'attribut bordercolor permet de changer la couleur des bordures. Ces deux attributs peuvent être utilisés dans les balises <table>, <tr>, <th>, <td>

Exemple :

Source Résultat

<table border="1" bordercolor="#FF0000" fontcolor="#FFFFFF">

              <tr>

                <td> &nbsp; </td>

                <td> &nbsp; </td>

                <td> &nbsp; </td>

              </tr>

              <tr bgcolor="#0000FF">

                <td> &nbsp; </td>

                <td> &nbsp; </td>

                <td> &nbsp; </td>

              </tr>

              <tr>

                <td> &nbsp; </td>

                <td> &nbsp; </td>

                <td bordercolor="#000000" bgcolor="#00FF00"> &nbsp; </td>

              </tr>

            </table>

Imbrication de tableaux

Il est tout à fait possible d'imbriquer des tableaux. Evitez quand même d'imbriquer plus de trois tableaux : les tableaux ne sont affiché par le navigateur que lorsque celui-ci sait exactement dans quelle hauteur et quelle largeur le tableau doit être affiché.

Exemple :

Source Résultat

<table width="80%" border="1" bordercolor="#000000">

              <tr>

                <td> &nbsp; </td>

                <td> &nbsp; </td>

              </tr>

              <tr>

                <td> &nbsp; </td>

                <td>

                  <table width="80%" border="1" bordercolor="#000000">

                    <tr>
            

                      <td> &nbsp; </td>
            

                      <td> &nbsp; </td>
            

                    </tr>
            

                    <tr>
            

                      <td> &nbsp; </td>
            

                      <td> &nbsp; </td>
            

                    </tr>

                  </table>

                </td>

              </tr>

            </table>