Forum

Réagissez dans les forums de JDN Développeurs

COL et COLGROUP sont deux balises HTML parmi les moins connues, mais qui pourtant proposent un apport intéressant au jeu offert aux développeurs Web. Celles-là n'agissent que dans le cadre d'un tableau (TABLE), et permettent de regrouper les colonnes.

L'intérêt de cette dernière opération réside dans la possibilité d'appliquer des styles et mise en forme par groupe, et non de devoir faire appel à un ensemble de balises FONT ou DIV dans chaque cellule pour parvenir au résultat attendu.

Il est ainsi possible de définir globalement (avec COLGROUP) ou individuellement (avec COL) certains attributs de colonne comme l'alignement du contenu des cellules, leur taille, leur couleur de fond... Par ailleurs, le fait de pouvoir associer un groupe de colonnes ou une seul colonne à une ID ou une CLASS permet également de leur appliquer des transformations CSS.

Un léger problème : une fois n'est pas coutume, c'est Internet Explorer qui interprète le mieux ces balises. Selon nos tests, le code suivant y est affiché comme l'on s'y attend, tandis que Firefox oublie les couleurs et Opera les tailles de cellule.
On applique ici à la fois des attributs "directs" (comme align="right") et des CSS. L'attribut SPAN de COLGROUP permet de définir à combien de colonnes s'applique le groupe.

<style type="text/css">
.groupe1 {
  width: 30;
  text-align: center;
  background: yellow; }
.groupe2 {
  width: 60; }
.colonne2 {
  background: red; }
.colonne4 {
  text-align: right; }
.colonne5 {
  background: lightblue;
  text-align: center; }
</style>

<table border="1">
  <colgroup span="3" class="groupe1">
    <col style="font-size:big;">
    <col class="colonne2">
    <col align="right">
  </colgroup>
  <colgroup span="2" class="groupe2">
    <col class="colonne4">
    <col class="colonne5">
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

Il existe d'autres attributs, que l'on peut découvrir dans la Recommendation HTML 4.01.