L'objectif des tableaux est de présenter des données structurées en lignes et colonnes (données tabulaires), comme dans un tableur tel qu'OpenOffice Calc ou Microsoft Excell.
Bien que de nombreux développeurs ont utilisés (et utilisent encore) les tableaux pour structurer la mise en page, les balises <div> sont à préférer d'un point de vue sémantique mais aussi pour éviter de complexifier et d'alourdir le code XHTML de la page.
Par défaut les tableaux XHTML n'ont pas de bordure. Pour des raisons esthétiques, la présente page embarque quelques instructions CSS pour rendre les tableaux plus beaux et plus lisibles :
td, th { /* Cellules : bordure noire, fine, d'épaisseur 1px */ border: 1px solid black; /* Un peu d'espace entre les bordures et le contenu */ padding: 4px; } table { /* Pas d'espace entre les cellules (bordures collées) */ border-collapse: collapse; }
<table> <tr> <td>Projet site Internet</td> <td>10 000 €</td> </tr> <tr> <td>Projet application IPhone / Androïd</td> <td>20 000 €</td> </tr> <tr> <td>Projet application </td> <td>12 000 €</td> </tr> </table>
<table> <caption>Projets Web CNAM</caption> <tr> <td>Projet site Internet</td> <td>10 000 €</td> </tr> <tr> <td>Projet application IPhone</td> <td>14 000 €</td> </tr> <tr> <td>Projet application Androïd</td> <td>12 000 €</td> </tr> </table>
<table> <caption>Projets Web CNAM</caption> <tr> <th>Nom du projet</th> <th>Budget</th> </tr> <tr> <td>Site Internet</td> <td>10 000 €</td> </tr> <tr> <td>Application IPhone</td> <td>14 000 €</td> </tr> <tr> <td>Application Androïd</td> <td>12 000 €</td> </tr> </table>
<table> <caption>Projets Web CNAM</caption> <tr> <th>Nom du projet</th> <th>Budget</th> </tr> <tr> <td>Site Internet</td> <td>10 000 €</td> </tr> <tr> <td>Application IPhone</td> <td rowspan="2">26 000 €</td> </tr> <tr> <td>Application Androïd</td> </tr> </table>
<table> <caption>Projets Web CNAM</caption> <tr> <th>Nom du projet</th> <th>Budget</th> </tr> <tr> <td>Site Internet</td> <td>10 000 €</td> </tr> <tr> <td>Application IPhone</td> <td rowspan="2">26 000 €</td> </tr> <tr> <td>Application Androïd</td> </tr> <tr> <td colspan="2"> <strong>Total : 36 000 €</strong></td> </tr> </table>
<table> <caption>Projets Web CNAM</caption> <thead> <!-- En-tête du tableau --> <tr> <th>Nom du projet</th> <th>Budget</th> </tr> </thead> <tfoot> <!-- Pied du tableau --> <tr> <th>Nom du projet</th> <th>Budget</th> </tr> </tfoot> <tbody> <!-- Corps du tableau --> <tr> <td>Projet site Internet</td> <td>10 000 €</td> </tr> <tr> <td>Projet application IPhone</td> <td>14 000 €</td> </tr> <tr> <td>Projet application Androïd</td> <td>12 000 €</td> </tr> </tbody> </table>
2011 - Sylvain Boureliou - sylvain.boureliou@gmail.com - www.boureliou.com