Chronique familiale




La chronique familiale pas à pas

Notions de base

 

 Avertissement


Comme je l'ai dit précédemment, les attributs de la balise <table> sont quasiment tous dépréciés et pour certains déjà plus reconnus. Nous verrons au fur et à mesure que la plupart des attributs affectés aux autres balises d'un tableau sont eux aussi dépréciés.

Il faudra donc dorénavant utiliser des propriétés conformes au HTML5 dont la pérennité devrait être bien meilleure mais au prix d'un code un petit peu plus lourd si l'on souhaite une présentation qui s'éloigne du standard.

A titre d'information, je rappellerai pour chaque propriété quel est l'attribut qu'elle remplace.

 

 Les lignes et colonnes


Nous l'avons vu dans Les tableaux prédéfinis ↗, un tableau est compris entre deux balises <table></table> et se divise en :

- En-têtes <th></th>, "table header" en anglais, en-tête de tableau.

- Lignes <tr></tr>, "table row" en anglais, "row" pour ligne.

- Cellules <td></td>. Chaque intersection d'une colonne 1 et d'une ligne correspondant à une cellule, "table data" en anglais, donnée de tableau en français.


Donc si j'écris :

<table>(J'ouvre le tableau)
<tr>  <th>Filles</th>  <th>Garçons</th>  </tr>(Je mets deux en-têtes dans la 1re ligne)
<tr>  <td>Louise</td>  <td>Justin</td>  </tr>(Je renseigne deux cellules dans la 2e ligne)
<tr>  <td>Marie</td>  <td>Raoul</td>  </tr>(Je renseigne deux cellules dans la 3e ligne)
</table>(Je ferme le tableau)


J'obtiens ceci après validation 2 :
 

Filles Garçons
Louise Justin
Marie Raoul

 




Notez que les balises <th> qui définissent les cellules d'en-tête peuvent être utilisées indifféremment à l'horizontale comme à la verticale. Exemple :


<table>

<tr> <th>Filles</th> <td>Louise</td> <td>Marie</td> </tr>

<tr> <th>Garçons</th> <td>Justin</td> <td>Raoul</td> </tr>

</table>



J'obtiens ceci après validation :
 

Filles Louise Marie
Garçons Justin Raoul

 


 

 Les bordures


L'attribut border est encore reconnu mais déprécié. En l'affectant à la balise <table>, il permettait de définir une bordure pour l'ensemble des cellules du tableau.

Si l'on veut obtenir la même chose en HTML5 il faudra non seulement affecter une bordure à la balise <table> mais également à chaque cellule du tableau.

Pour cela nous utiliserons l'attribut style et la propriété border. Commençons par définir le style de la bordure à l'aide d'une des valeurs suivantes 3 :


solid (solide) dotted (pointillé)
dashed (tirets) double (double)
groove (rainurée) ridge (relief)
inset (relief intérieur) outset (relief extérieur)



L'épaisseur de la bordure sera définie en pixels ; d'autres unités sont utilisables mais c'est la plus simple d'emploi et la plus adaptée pour cet usage précis. Si vous ne spécifiez pas de valeur, elle est par défaut de 3px (2 px avec Internet Explorer).

La couleur de la bordure sera notifiée avec le nom anglais de la couleur, sa valeur hexadécimale ou RGB 4. La valeur par défaut est la couleur noire.


Et la syntaxe de la propriété border5 sera donc la suivante, que ce soit avec la balise <table>, <th> ou <td>. Ici un exemple avec la balise <td> :

<td style="border:solid 4px grey;">Ici le contenu de la cellule</td>

Notez que les valeurs sont séparées par un intervalle et qu'un point-virgule clôture leur énumération. L'ordre des valeurs n'a aucune importance (même s'il semble quand même plus logique de définir d'abord le style, ensuite l'épaisseur et pour finir la couleur).


Voici un exemple :


<table style="border:double 4px blue;">

<tr>

<th style="border:solid 2px grey;">Filles</th>

<th style="border:solid 2px grey;">Garçons</th>

</tr>

<tr>

<td style="border:solid 2px grey;">Louise</td>

<td style="border:solid 2px grey;">Justin</td>

</tr>

<tr>

<td style="border:solid 2px grey;">Marie</td>

<td style="border:solid 2px grey;">Raoul</td>

</tr>

</table>



Et le résultat :
 
FillesGarçons
LouiseJustin
MarieRaoul

 


 

 Les dimensions du tableau


Les attributs width et height (qui définissaient respectivement la largeur et la hauteur d'un tableau ou de ses lignes et colonnes) sont encore reconnus par les divers navigateurs mais sont dépréciés.

Il convient donc d'utiliser dès à présent l'attribut style avec les propriétés width et height.

Faisons le tour des unités de taille qu'admettent ces deux propriétés. Commençons par la propriété width :

- elle admet des valeurs en pixels (px) qui définissent avec précision la taille du tableau mais ne seront pas forcément adaptées à toutes les tailles d'écran ; un tableau de 100 px de large paraîtra convenir sur un écran avec une résolution de 1280 px et semblera petit sur un écran de 1920 px ;

- les valeurs en pourcentage (%) sont à privilégier car on est sûr qu'elle s'adapteront à toutes les résolutions ;

- enfin le cadratin (em) n'est pas dénué d'intérêt si les cellules contiennent du texte car la largeur sera toujours proportionnelle à la taille de ce dernier.


Voyons celles admises par la propriété height. Trois unités sont à retenir :

- bien entendu les valeurs en pixels (px) avec cependant les restrictions déjà évoquées ;

- les valeurs en vh (pour viewport height, hauteur de fenêtre en français). Cette unité vous permet de créer un tableau qui occupera un pourcentage déterminé de la hauteur de la fenêtre. À noter que la hauteur s'adapte si vous réduisez la taille de la fenêtre. Elle accepte les valeurs de 1 à  100 (100 représentant la hauteur totale de la fenêtre) ;

- la valeur en pourcentage (%) dont vous pourrez vous servir pour déterminer les hauteurs respectives des lignes d'un tableau, mais qui ne pourra pas être utilisée avec la balise <table> car elle ne serait pas prise en compte.


Voyons un exemple 6 :

<table style="width:300px;height:30vh;">(Le tableau fera 300 pixels en largeur et 30% de la hauteur de la fenêtre)
<tr style="height:20%;">(La 1re ligne occupera 20% de la hauteur du tableau)
<th style="width:70%;">Filles</th>  <th>Garçons</th>(La 1re colonne occupera 70% de la largeur du tableau, la 2de la place restante 7)
</tr>
<tr style="height:50%;">(La 2e ligne occupera 50% de la hauteur du tableau)
<td>Louise</td>  <td>Justin</td>
</tr>
<tr>(La 3e ligne occupera la place restante)
<td>Marie</td>  <td>Raoul</td>
</tr>
</table>


Et le résultat :
 

Filles Garçons
Louise Justin
Marie Raoul

 


 

 Alignement du contenu des cellules


Les attributs align et valign sont toujours reconnus mais dépréciés.

Il est préférable d'utiliser l'attribut style et les propriétés text-align pour l'alignement horizontal et vertical-align pour l'alignement vertical.

La propriété text-align admet les valeurs left (gauche), center (centré), right (droite) et justify (justifié).

La propriété vertical-align admet les valeurs top (haut), middle (milieu), bottom (bas).

Quelques précisions tout d'abord sur l'alignement par défaut (c'est à dire si vous ne spécifiez pas de consignes) :

- les textes des en-têtes définis par la balise <th> seront centrés verticalement et horizontalement (ainsi d'ailleurs qu'en caractères gras) ;

- Les textes contenus dans les cellules définies par la balise <tr> seront aussi centrés verticalement mais alignés à gauche (et les caractères seront d'une graisse normale).


Vous pouvez affecter la propriété text-align aux balises <table>, <tr>, <th> et <td> et la propriété vertical-align aux balises <tr>, <th> et <td>.

Il va de soi que la propriété stipulée dans la balise <table> affectera l'ensemble du tableau, celle(s) stipulée(s) dans la balise <tr> l'ensemble de la ligne, celle(s) stipulée(s) dans les balises <th> ou <td> les cellules concernées.

Le navigateur retiendra la dernière consigne pour chaque cellule. Autrement dit, si vous avez spécifié un alignement à gauche pour la table, centré pour une ligne et à droite pour une cellule de cette ligne, le contenu de la cellule en question sera aligné à droite.


Voici un exemple :

<table style="text-align:left;">(Dans la table le texte sera aligné à gauche)
<tr>
<th>Filles</th>  <th>Garçons</th>(Le texte sera aligné au milieu par défaut et à gauche)
</tr>
<tr style="vertical-align:bottom; text-align:right;">(Dans cette ligne le texte sera aligné en bas et à droite)
<td>Louise</td>  <td>Justin</td>(texte aligné en bas et à droite)
</tr>
<tr>
<td>Marie</td> <td style="vertical-align:top;">Raoul</td>(Marie sera alignée au milieu par défaut et à gauche)
(Raoul sera aligné en haut et à gauche)
</tr>
</table>



Et le résultat :
 

FillesGarçons
LouiseJustin
MarieRaoul

 


 

 Espacement des cellules


L'attribut cellspacing qui détermine l'espacement entre les cellules est toujours reconnu mais déprécié, il est donc déconseillé de continuer à l'employer.

Ouvrons d'abord une petite parenthèse. Il existe une propriété de la balise <table> qu'il faut connaître même si on ne l'emploie pas, c'est border-collapse qui admet deux valeurs : collapse et separate.

Avec la valeur collapse, les bordures de tableau et de cellules seront fusionnées comme dans l'exemple ci-dessous :


<table style="border: solid 4px grey; border-collapse:collapse;">

<tr>

<th style="border:solid 4px grey;">Filles</th>

<th style="border:solid 4px grey;">Garçons</th>

</tr>

<tr>

<td style="border:solid 4px grey;">Louise</td>

<td style="border:solid 4px grey;">Justin</td>

</tr>

<tr>

<td style="border:solid 4px grey;">Marie</td>

<td style="border:solid 4px grey;">Raoul</td>

</tr>

</table>



Et le résultat :
 

Filles Garçons
Louise Justin
Marie Raoul

 




Vous avez déjà pu vous rendre compte que la valeur par défaut est separate, puisque quand aucune valeur n'est spécifiée les bordures ne sont pas fusionnées. C'est important et bien commode car il faut justement que la valeur soit separate pour pouvoir stipuler un espacement entre les cellules.

On utilisera pour ce faire la propriété border-spacing avec laquelle on peut spécifier des écartements horizontaux et verticaux différents.

Elle admet des valeurs en px, em, vh, etc. La première valeur déterminera l'espacement horizontal, la seconde l'espacement vertical. Si on n'en spécifie qu'une elle déterminera les deux.


Voyons un exemple 8 :

<table style="width:20em; height:30vh; border:solid 2 px grey; border-spacing:10px 3vh;">

<tr>

<th style="border:solid 2px grey;">Filles</th>

<th style="border:solid 2px grey;">Garçons</th>

</tr>

<tr>

<td style="border:solid 2px grey;">Louise</td>

<td style="border:solid 2px grey;">Justin</td>

</tr>

<tr>

<td style="border:solid 2px grey;">Marie</td>

<td style="border:solid 2px grey;">Raoul</td>

</tr>

</table>


Et le résultat :
 

Filles Garçons
Louise Justin
Marie Raoul

 


 

 La propriété "padding"


L'attribut cellpadding définit la taille de l'espace entre le contenu d'une cellule et sa bordure, qu'elle soit affichée ou non. Il est déprécié et même s'il est toujours reconnu en HTML5, il ne l'est plus dans la chronique 9. Il convient donc de le remplacer par la propriété padding appliquée à la balise <td>.


Exemple :

<table>

<tr>

<th style="padding:40px;">Filles</th>

<th style="padding:40px">Garçons</th>

</tr>

<tr>

<td style="padding:40px;">Louise</td>

<td style="padding:40px">Justin</td>

</tr>

<tr>

<td style="padding:40px;">Marie</td>

<td style="padding:40px">Raoul</td>

</tr>

</table>



Et le résultat :
 

FillesGarçons
LouiseJustin
MarieRaoul

 



 

 Couleur de fond


L'attribut bgcolor qui permet de définir une couleur de fond est toujours reconnu mais déprécié. Il est donc déconseillé de continuer à l'employer.

On le remplacera par la propriété background-color qui admet (comme la propriété color) des valeurs en noms de couleurs (anglais), en valeurs hexadécimales ainsi qu'en valeurs RGB.

Comme pour l'alignement du contenu vous pouvez affecter cette propriété aux balises <table>, <tr>, <th> ou <td>, la dernière valeur stipulée définissant la couleur.


Voici un exemple :

<table style="background-color:#FFE4E1;">(Le fond du tableau sera de couleur "rose brumeux")
<tr> <th>Filles</th>  <th>Garçons</th> </tr>
<tr> <td>Louise</td>  <td>Justin</td> </tr>
<tr> style="background-color:skyblue;">(La couleur de fond de cette ligne sera "bleu azur")
<td>Marie</td>  <td>Raoul</td>
</tr>
<tr>
<td style="background-color:rgb(152,252,156);">Lucette</td>(La couleur de fond de la cellule sera "vert pâle")
<td>Pierre</td>
</tr>
</table>


Et le résultat :
 

FillesGarçons
LouiseJustin
MarieRaoul
LucettePierre

 


 

 Notes

 
1. On ne crée pas de colonnes dans un tableau en HTML. On crée des lignes de cellules et c'est en "empilant" ces lignes et donc ces cellules qu'on va définir des colonnes.
 
2. En réalité j'ai un petit peu triché, c'est à dire mis un fond blanc et agrandi sensiblement les tableaux de manière à ce qu'ils se détachent mieux du fond et soient plus visibles.
 
3. Il n'y a pas de valeur par défaut. Si aucun style n'est affecté à la balise <border> il n'y aura pas de bordure. Bien entendu la valeur est représentée par le mot anglais : solid, dotted, dashed, etc. et il ne faut pas utiliser la traduction française qui figure en regard.
 
4. Vous trouverez dans Utilitaires ↗ l'adresse d'une application qui donne les codes couleurs dans les trois versions.
 
5. Il existe également trois propriétés pour définir séparément le style, l'épaisseur et la couleur des bordures. Ce sont respectivement les propriétés border-style, border-width et border-color.La propriété border les remplaçant avantageusement toutes les trois, il n'est peut-être pas utile de se compliquer la vie.
 
6. Pour des raisons de clarté de lecture, je n'ai fait figurer que les dimensions dans les styles de l'exemple ci-dessous. Il va de soi que dans le code servant à afficher le résultat j'ai aussi stipulé la taille du texte, l'alignement du contenu et le style des bordures. Je procéderai de la même manière dans les paragraphes et exemples suivants où je ne ferai figurer dans l'exemple que la balise "en cours".
 
7. Si la hauteur (largeur) de la dernière ligne (colonne) n'est pas définie, elle occupera la place restante dans le tableau. Bien entendu, il faut veiller quand on stipule des dimensions à ce que leur somme ne dépasse pas la dimension du tableau.

Il vaut mieux également ne pas mélanger les unités (px, %, etc.) pour définir les hauteurs de lignes ainsi que pour les largeurs de colonnes.

Enfin, si on ne définit aucune dimension, le tableau fera la taille nécessaire pour héberger le contenu. Il en ira de même pour les lignes et colonnes si les contenus sont de taille différente. Dans le cas contraire le navigateur créera des colonnes (ainsi que des lignes) de taille égale.
 
8. Notez que si vous spécifiez un espacement entre les cellules, il est obligatoire de donner des dimensions au tableau si vous voulez que les bordures extérieures de celui-ci apparaissent.
 
9. Curieusement, depuis que l'attribut cellpadding n'est plus reconnu par GeneWeb, celui-ci applique systématiquement un espace de quelques pixels (une dizaine) entre la bordure de la cellule et son contenu quel que soit ce dernier (texte, image, etc.) Sauf à vouloir une présentation bien spécifique, il n'est peut-être pas utile de spécifier un espace supplémentaire, aussi je ne cite la propriété padding que pour mémoire.


───── oOo ─────


Index des pages