HTML5 - CSS 2.x/3
PHP / MySQL
FORTH ...

Gérer les dimensions des cellules d'une table

Voici un fragment de code source HTML de débutant. Pour chaque élément td on utilise l'attribut width. La dimension des cellules est répétée à chaque ligne de tableau marquée par l'élément tr.

<table width="75%"" border="2">
    <tr>
        <td width="33%" bgcolor="#c0c0c0">1</td>
        <td width="33%" bgcolor="#c0c0c0">2</td>
        <td width="33%" bgcolor="#c0c0c0">3</td>
    </tr>
    <tr>
        <td width="33%" bgcolor="#c0c0c0">4</td>
        <td width="33%" bgcolor="#c0c0c0">5</td>
        <td width="33%" bgcolor="#c0c0c0">6</td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>

Il y a moyen d'optimiser le contrôle des dimensions des cellules du tableau en déportant la présentation dans les styles css appropriés.

Pour commencer, on épure le code HTMl de notre table:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

Puis on définit ce code css placé avant table:

<style type="text/css">
    table { border: 1px solid black; width: 450px; }
    table tr td { border: 1px solid red; width: 33%;  }
</style>

Et ce que ça donne:

1 2 3
4 5 6

Pour notre exemple, on souhaite donner aux deux dernières colonnes des dimensions propres à chaque colonne:

<style type="text/css">
    table { border: 1px solid black;  }
    table tr td { border: 1px solid red; }
    table tr td { width: 120px; }
    table tr td + td { width: 60px; }
    table tr td + td + td { width: 30px; }
</style>

Ce qui donne à l'affichage:

1 2 3
4 5 6

On a supprimé l'attribut width à table. La nouvelle dimension totale de la table sera la somme des largeurs des éléments td.

Le code css td + td + td indique que le style correspondant s'appliquera au contenu de la troisième cellule.

Si vous gérez plusieurs tables dans une même page web, il faudra utiliser des identifiants pour chaque table:

<style type="text/css">
    #tab2 { border: 1px solid black; }
    #tab2 tr td { border: 1px solid red; }
    #tab2 tr td { width: 120px; }
    #tab2 tr td + td { width: 60px; }
    #tab2 tr td + td + td { width: 30px; }
</style>
<table id="tab2">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

Ici on a remplacé dans la définition de style table par un identifiant unique tab2.

ATTENTION: un identifiant doit et ne peut être utilisé que PAR UN SEUL ELEMENT. Si vous souhaitez appliquer un même style à plusieurs éléments, utilisez une classe de style:

<style type="text/css">
    .statistiques { border: 1px solid black; }
    .statistiques tr td { border: 1px solid red; }
    .statistiques tr td { width: 120px; }
    .statistiques tr td + td { width: 60px; }
    .statistiques tr td + td + td { width: 30px; }
</style>
La classe statistiques pourra etre utilisée dans plusieurs éléments comme suit:
<tablet class="statistiques">
    ....reste de al table....
</style>

Tous les articles sur ce thème