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

Correction d'un tableau de débutant

Le code PHP/HTML tel qu'il a été écrit:

echo "<div align=\"center\"><center><table border=\"1\"><tr><td>"; 
echo '<b>'.' nom de la liaison '.'</b>'; 
echo "</td><td>"; 
echo '<b>'.' numéro de la liaison '.'</b>'; 
echo "</td></tr><tr><td>"; 
echo $re['nom_liaison']; 
echo "</td><td>"; 
echo $re['num_liaison']; 
echo "</td></tr>"; 
echo "</table></center></div>";  

Première erreur, mélanger le PHP et le HTML.

Les bonnes stratégies de codage

La page est un template qui contient majoritairement du code HTML et fait appel ponctuellement au PHP, on écrit son code HTML sans faire appel à echo ailleurs qu'aux endroits où l'on va écrire les données à afficher. Exemple:

<div align="center"><center><table border="1"><tr><td>
<b>nom de la liaison</b>
</td><td> 
<b>numéro de la liaison</b>
</td></tr><tr><td>
<?php echo $re['nom_liaison']; ?>
</td><td>
<?php echo $re['num_liaison']; ?>
</td></tr>
</table></center></div>

Ensuite, le code HTML se structure de la même manière que l'on organise le code PHP en respectant les indentations:

<div align="center">
    <center>
        <table border="1">
            <tr>
                <td><b>nom de la liaison</b></td>
                <td><b>numéro de la liaison</b></td>
            </tr>
            <tr>
                <td><?php echo $re['nom_liaison']; ?></td>
                <td><?php echo $re['num_liaison']; ?></td>
            </tr>
        </table>
    </center>
</div>

L'élément table permet de structurer son contenu en trois sous-ensembles: thead tbody tfoot. Au passage, éliminons center de notre code qui devient obsolète en HTML5. On peut également changer les td en thdans la partie encadrée par thead>:

<div align="center">
    <table border="1">
        <thead>
            <tr>
                <th>nom de la liaison</th>
                <th>numéro de la liaison</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><?php echo $re['nom_liaison']; ?></td>
                <td><?php echo $re['num_liaison']; ?></td>
            </tr>
        </tbody>
    </table>
</div>

Enfin, on évitera d'utiliser des attributs en relation directe avec l'affichage au profit de déclaration de styles:

<section style="text-align: center;">
    <style>
        table { border: 1px solid black; }
        thead { background-color: #cfcfcf; }
        td { border: 1px solid black; }
    </style>
    <table>
        <thead>
            <tr>
                <th>nom de la liaison</th>
                <th>numéro de la liaison</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><?php echo $re['nom_liaison']; ?></td>
                <td><?php echo $re['num_liaison']; ?></td>
            </tr>
        </tbody>
    </table>
</section>

Et voici comment répéter l'affichage des données issues d'une table. On suppose que les données ont été récupérées dans un tableau $listeLiaisons où chaque ligne de ce tableau contient l'équivalent d'un enregistrement de notre table en base de données:

<?php
// on charge les données à afficher depuis une table en base de données
$listeLiaisons = $Appli->getDonneesliaisons();
?>
<section style="text-align: center;">
    <style>
        table { border: 1px solid black; }
        thead { background-color: #cfcfcf; }
        td { border: 1px solid black; }
    </style>
    <table>
        <thead>
            <tr>
                <th>nom de la liaison</th>
                <th>numéro de la liaison</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($listeLiaisons AS $key => $re): ?>
            <tr>
                <td><?php echo $re['nom_liaison']; ?></td>
                <td><?php echo $re['num_liaison']; ?></td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</section>

Notez l'intégration de style juste avant table. Rien dans le standard HTML n'interdit cette manoeuvre. En général, on conseille de déclarer les styles avant body, mais notre manière de procéder convient dans le cadre d'une programmation orientée MVC.

Tous les articles sur ce thème