Les balises <colgroup> et <col> permettent de définir les propriétés d'une ou plusieurs colonnes. Il est commun de mettre la balise <col> entre les balises </colgroup>..</colgroup>, mais ce n'est pas obligatoire.

La première balise <col> que vous encoder correspond à la première colonne de votre tableau, la deuxième correspond à la deuxième colonnes et ainsi de suite. ex:

<table width="500" height="700" border="1">
<colgroups>
<col width="50%" />
<col width="30%" />
<col width="20%" />
</colgroups>
<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>
</table>

Dans cette exemple j'ai donné à mon tableaux une largeur de 500 pixels, ensuite j'ai donné à mes colonnes trois valeurs différentes, ce qui veut dire que les 500 pixels de ce tableaux seront divisé en trois et redistribué en fonction des valeurs indiqué dans les balises <col>. Mais qu'arrive-t-il si je n'utilise qu'une seul fois la balises <col>? Et bien la première balise prendra la valeur indiqué, et l'espace restant sera distribué en part égale entre les balises qui reste.

Il est également possible d'utiliser la balise <col> avec l'attribut "span" afin d'appliquer une valeur à plusieurs colonnes.

Ex 1:

<table width="250" height="250">
<colgroup>
<col width="50" span="5" />
</colgroup>
<tr>
<td>contenu 1</td>
<td>contenu 2</td>
<td>contenu 3</td>
<td>contenu 4</td>
<td>contenu 5</td>
</tr>
</table>

Cela aura pour effet de donner une largeur de 50 pixels à chaque colonnes de ce tableau.

Ex 2:

<table width="500" height="800" border="1">
<colgroup>
<col width="50" span="2" />
<col width="100" span="2" />
<col width="200" span="2"/>
<tr>
<td>texte 1</td>
<td>texte 2</td>
<td>texte 3</td>
<td>texte 4</td>
<td>texte 5</td>
<td>texte 6</td>
</tr>
</table>

Ici les deux premières colonnes auront une taille de 50 pixels, les deux suivante auront une taille de 100 pixels, et enfin les deux dernières auront une taille de 200 pixels.

Vous pouvez également utiliser la balise <colgroup> sans la(/les) balise(s) <col>. ex:

<table width="500" height="800" border="1">
<colgroup width="100">
</colgroup>
<tr>
<td>texte 1</td>
<td>texte 2</td>
<td>texte 3</td>
<td>texte 4</td>
<td>texte 5</td>
</tr>
</table>

L'effet restera le même, seul la première colonne sera affecté par la balise <colgroup>. Mais comme pour <col> vous pouvez utiliser l'attribut "span" pour attribuer la valeur à plusieurs colonnes.

Remarque : Vous n'est pas obligé de fermer la balise <col>, mais pour éviter les problèmes je vous conseil de toujours la fermer(<col />).

A suivre...

Les tableaux - Deuxième partie : COL et COLGROUP

Partager cet article