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:

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:

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>

<tablet class="statistiques">
    ....reste de al table....
</style>