Alignement des données dans TABLE

TABLE est un template particulier

L'élément table doit être utilisé comme un template particulier.

Pour commencer, prenons une table type, de ce genre:

<table>
    <tr>
        <th>pays</th>
        <th>capitale</th>
        <th>habitants<br>(millions)</th>
    </tr>
    <tr>
        <td>FRANCE</td>
        <td>PARIS</td>
        <td>60</td>
    </tr>
    <tr>
        <td>BELGIQUE</td>
        <td>BRUXELLES</td>
        <td>11</td>
    </tr>
</table>

et affiche ceci:

Pour cet exemple, on a rajouté l'attribut border="1" afin de rendre visible l'alignement des données dans les différents champs de cette table>

Pour la suite de notre explication, nous allons placer les données à afficher dans un tableau PHP comme ceci:

<?php
$datas = array(
    array('FRANCE','PARIS','66'),
    array('ALLEMAGNE','BERLIN','81'),
    array('BELGIQUE','BRUXELLES','11'),
    array('PAYS-BAS','LA HAYE','16')
);
?>

Le tableau $datas a une structure assez proche des informations que l'on pourrait récupérer d'un fichier plat, une extraction Excell par exemple avec l'extension csv. Voici comment on écrirait un petit script php exploitant ce tableau $datas:

<table>
    <tr>
        <th>pays</th>
        <th>capitale</th>
        <th>habitants<br>(millions)</th>
    </tr>
    <?php foreach($datas AS $key => $row): ?>
    <tr>
        <?php foreach($row AS $key2 => $val): ?>
        <td><?php echo $val; ?></td>
        <?php endforeach; ?>
    </tr>
    <?php endforeach; ?>
</table>

Notre tableau $datas étant notre source de données, si cette source de données évolue, notre table doit suivre:

• soit en rajoutant une ligne si on rajoute un item array;
• soit en rajoutant une colonne si on rajoute une donnée dans un item.

Aligner les données dans TABLE

Le but du jeu est d'aligner les données dans table sans avoir à écrire ce genre d'horreur:

<td align='left'>Net N</td>
<td align='left'>SFR</td>
<td class='petit_texte_gris'>13/06/2011</td>
<td>17/06/2011</td>
<td></td>
<td align='center'><img src='../images/signet_vrai.gif' border='0'></td>
<td align='center'>&nbsp;</td>
<td align='right'>55.3</td>
<td align='center'><img src='../images/signet_vrai.gif' border='0'></td>
<td align='center'><a href='#' onClick='supprimerRecord("47440")' title="Supprimer">
        <img src='../images/picto_drop.png' border='0'></a>
</td>

On ne vous en présente qu'un fragment, ce code se répétant pour chaque bloc encadré par tr.

Il existe bien une solution utilisant l'élément colgroup comme ceci:

<table>
     <colgroup>
        <col width="150">
        <col width="130">
        <col width="60">
     </colgroup>
    <tr>
        <th>pays</th>
        <th>capitale</th>
        <th>habitants<br>(millions)</th>
    </tr>
 ...reste de notre table...
</table>

En utilisant l'attribut style on peut d'ailleurs réécire le contenu de colgroup:

<table>
     <colgroup>
        <col style="width: 150px;">
        <col style="width: 130px;">
        <col style="width: 60px; text-align: right;">
     </colgroup>
    <tr>
        <th>pays</th>
        <th>capitale</th>
        <th>habitants<br>(millions)</th>
    </tr>
 ...reste de notre table...
</table>

Seul inconvénient, cette manière de mutualiser la présentation des données ne fonctionne pas de manière correcte sur certains navigateurs web.

La seule manière vraiment efficace consiste à surcharger les styles existants en définissant un bloc de style. Comme notre table n'est sans doute pas la seule dans notre page web, on l'identifiera avec un identifiant unique, ici tab1. Au passage, on marquera de manière explicite la partie tête du tableau avec l'élément thead et le corps de la table avec l'élément tbody:

<style>
    <!--
    #tab1 { font: inherit; }
    -->
</style>
<table id="tab1">
    <thead>
        <tr>
            <th>pays</th>
            <th>capitale</th>
            <th>habitants<br>(millions)</th>
        </tr>
    </thead>
    <tbody>
        ...reste de notre table...
    </tbody>
</table>

ce qui afficherai:

On va ensuite s'occuper de la coloration de la permière ligne, celle qui est en en-tête de table:

<style>
    <!--
    #tab1 { font: inherit; }
    #tab1 header tr { background-color: #fcca73; }
    -->
</style>
...ici table...

Ensuite on s'occupe de la largeur de la première colonne de données:

<style>
    <!--
    #tab1 { font: inherit; }
    #tab1 thead tr { background-color: #fcca73; }
    #tab1 tbody tr td { width: 150px; }
    -->
</style>
...ici table...

A ce stade, voici ce qui s'afficherai:

Pour modifier la largeur de la seconde et troisième colonne, il faut surcharger le style affecté à l'élément td. On profite au passage pour aligner à droite le contenu de la troisième colonne:

<style>
    <!--
    #tab1 { font: inherit; }
    #tab1 thead tr { background-color: #fcca73; }
    #tab1 tbody tr td { width: 150px; }
    #tab1 tbody tr td + td { width: 120px; }
    #tab1 tbody tr td + td + td { width: 60px; text-align: right; }
    -->
</style>
...ici table...

La séquence tbody tr td + td + td signifie que l'on surcharge le style du 3ème élément td qui succède à l'élément tr lui-même succédant l'élément tbody. Si on avait voulu mettre en caractère gras le contenu de cette dernière colonne, on aurait surchargé notre css comme ceci:

    #tab1 tbody tr td + td + td { width: 60px; text-align: right; font-weight: bold; }

Pour finir en beauté, voici comment rajouter un pied de table avec l'élément tfoot et y intégrer une colonne total. Script complet:

<?php
$datas = array(
    array('FRANCE','PARIS','66'),
    array('ALLEMAGNE','BERLIN','81'),
    array('BELGIQUE','BRUXELLES','11'),
    array('PAYS-BAS','LA HAYE','16')
);
?>
<style>
    <!--
    #tab1 { font: inherit; }
    #tab1 thead tr { background-color: #fcca73; }
    #tab1 tbody tr td { width: 150px; }
    #tab1 tbody tr td + td { width: 120px; }
    #tab1 tbody tr td + td + td { width: 60px; text-align: right; }
    #tab1 tfoot tr td { border-top: 1px solid #a2a2a2; }
    #tab1 tfoot tr td + td { text-align: right; }
    #tab1 tfoot tr td + td + td { color: red; font-weight: bold; }
    -->
</style>
<?php $total=0; ?>
<table id="tab1">
    <thead>
        <tr>
            <th>pays</th>
            <th>capitale</th>
            <th>habitants<br>(millions)</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach($datas AS $key => $row): ?>
        <tr>
            <?php foreach($row AS $key2 => $val): ?>
            <td><?php echo $val; ?></td>
            <?php endforeach; ?>
            <?php $total = $total + $row[2]; ?>
        </tr>
        <?php endforeach; ?>
    </tbody>
    <tfoot>
        <tr>
            <td>&nbsp;</td>
            <td>TOTAL</td>
            <td><?php echo $total; ?></td>
        </tr>
    </tfoot>
</table>

et le tableau qui s'affiche: