Display:inline

Je suis tombé aujourd’hui sur cet article, qui fait un petit rafraichissement de mémoire sur les tableaux HTML. Après être longtemps tombés dans la disgrâce la plus complète, ils font leur petit retour, tout en restant cantonnés (et c’est leur but initial) à l’affichage de données tabulaires.

Outre le rappel de l’organisation interne d’un tableau (thead et tfoot avant tbody, par exemple), l’article effectue une rapide introduction à une balise qui m’était complètement inconnue, la balise colgroup et, par conséquent, sa balise enfant col.

Principe

Cette balise sert à effectuer un stylage rapide des différentes colonnes du tableau, en permettant de regrouper la déclaration des colonnes d’un même style. Pas très clair ? Voici un exemple : prenons ce marquage de tableau, qui comporte un certain nombre de colonnes devant avoir la même largeur et la même couleur de fond :

<table>

    <!-- Header-->
    <thead>
        <tr>
            <th style="width:150px; background-color:#CCCCCC;">Poste de revenu</th>
            <th style="width:50px; background-color:#F0F0F0;">S1</th>
            <th style="width:50px; background-color:#F0F0F0;">S2</th>
            <th style="width:50px; background-color:#F0F0F0;">S3</th>
            <th style="width:50px; background-color:#F0F0F0;">S4</th>
        </tr>
    </thead>

    <!-- Footer-->
    <tfoot>
        <tr>
            <td style="background-color:#CCCCCC;">Totaux</th>
            <td style="background-color:#F0F0F0;">1.500</th>
            <td style="background-color:#F0F0F0;">2.500</th>
            <td style="background-color:#F0F0F0;">3.000</th>
            <td style="background-color:#F0F0F0;">2.500</th>
        </tr>
    </tfoot>

    <!-- Body-->
    <tbody>
        <tr>
            <td style="background-color:#CCCCCC;">Intitulé 1</td>
            <td style="background-color:#F0F0F0;">500</td>
            <td style="background-color:#F0F0F0;">1.000</td>
            <td style="background-color:#F0F0F0;">1.500</td>
            <td style="background-color:#F0F0F0;">1.000</td>
        </tr>
        <tr>
            <td style="background-color:#CCCCCC;">Intitulé 2</td>
            <td style="background-color:#F0F0F0;">500</td>
            <td style="background-color:#F0F0F0;">1.500</td>
            <td style="background-color:#F0F0F0;">1.000</td>
            <td style="background-color:#F0F0F0;">1.000</td>
        </tr>
        <tr>
            <td style="background-color:#CCCCCC;">Intitulé 3</td>
            <td style="background-color:#F0F0F0;">500</td>
            <td style="background-color:#F0F0F0;">1.000</td>
            <td style="background-color:#F0F0F0;">1.000</td>
            <td style="background-color:#F0F0F0;">500</td>
        </tr>
    </tbody>

</table>

On le voit, il faut répéter la couleur de fond pour chacune d’entre elles. Sur ce tableau, ça n’est pas spécialement impressionnant comme travail, mais si vous avez à travailler sur des tableaux avec de nombreuses colonnes ou que vous avez régulièrement besoin de modifier leurs largeurs/couleur, la balise colgroup peut vous simplifier le travail. Ainsi, vous obtiendrez le même résultat en utilisant le marquage suivant :

<table>

	<!-- Colonnes -->
	<colgroup span="1" style="width:150px; background-color:#CCCCCC;" />
	<colgroup span="4" style="width:50px; background-color:#F0F0F0;" />

	<!-- Header-->
	<thead>
		<tr>
			<th>Poste de revenu</th>
			<th>S1</th>
			<th>S2</th>
			<th>S3</th>
			<th>S43</th>
		</tr>
	</thead>

	<!-- Footer-->
	...

</table>

Certes, il est facile d’arriver au même résultat avec deux classes CSS, mais il faudra quand même les répéter pour chaque cellule. Et dans certains cas de figure (code généré dynamiquement, par exemple), il peut être utile d’avoir une alternative aux CSS.

Syntaxe

L’utilisation de la balise colgroup est relativement simple : placée avant les balises thead, tfoot et tbody, elle peut se présenter de deux manières :

Sans balise fermante :

<colgroup span="2" class="style1" />
<colgroup span="3" class="style2" />

Avec balise fermante :

<colgroup class="style1">
	<col />
	<col />
</colgroup>
<colgroup class="style2">
	<col />
	<col />
	<col />
</colgroup>

Dans les deux exemples, les deux premières colonnes hériteront de la classe style1, et les 3 suivantes de la classe style2. Simple, non ?

Avec le second type de marquage, il est possible d’effectuer des décrochages sur certaines colonnes :

<colgroup class="style2">
	<col />
	<col style="width: 60px" />
	<col />
</colgroup>

Limites

L’utillisation de la balise colgroup présente toutefois deux limites :

Dans la structure DOM de la page, les cellules du tableau ne sont pas descendante de la balise colgroup, on ne peut donc pas jouer sur l’héritage dans les CSS :

/* Style par défaut */
table td {
	color: Red;
}

/* Ce style ne s'appliquera pas */
table colgroup.style1 td {
	color: Blue;
}

En outre, il n’est possible via la balise colgroup que de modifier les propriétés de la colonne (taille, largeur). Ainsi, il n’est pas possible d’affecter les contours, la couleur ou le style du texte des cellules, etc…

Mais elle n’en reste pas moins un marquage particulièrement efficace pour gérer rapidement le stylage d’un tableau !

Be Sociable, Share!

•