Les éléments de base d'un tableau sont :
Les tableaux peuvent être imbriqués. Dans ce cas, le "sous-tableau" est inclus dans une cellule (élément <td>) du tableau parent.
Exemple :
<table> <tr> <td>Nom A</td> <td>Val A</td> </tr> <tr> <td>Nom B</td> <td>Val B</td> </tr> </table>
Rendu :
| Nom A | Val A |
| Nom B | Val B |
Pour un tableau de données, il convient d'utiliser également les éléments suivants :
Exemple :
<table> <caption>Titre de Tableau</caption> <tr> <th>Cat. 1</th> <th>Cat. 2</th> </tr> <tr> <td>Nom A</td> <td>Val A</td> </tr> <tr> <td>Nom B</td> <td>Val B</td> </tr> </table>
Rendu :
| Cat. 1 | Cat. 2 |
|---|---|
| Nom A | Val A |
| Nom B | Val B |
Il est possible de fusionner les cellules :
Exemple avec colspan:
<table> <tr> <td>Nom A</td> <td>Val A</td> </tr> <tr> <td colspan="2">Nom B et Val B</td> </tr> </table>
Rendu :
| Nom A | Val A |
| Nom et Val B | |
Exemple avec rowspan :
<table> <tr> <td>Nom A</td> <td rowspan="2">Val A et Val B</td> </tr> <tr> <td>Nom B</td> </tr> </table>
Rendu :
| Nom A | Val A et Val B |
| Nom B |
Les attributs de mise en forme applicables aux éléments <table>, <tr>, <td> et <th> sont :
Exemple :
<table width="50%" align="center"> <tr> <td width="150" align="right";>Nom A</td> <td bgcolor="#999999">Val A</td> </tr> <tr> <td height="55">Nom B</td> <td background="img/canard.png">Val B</td> </tr> </table>
Rendu :
| Nom A | Val A |
| Nom B | Val B |
Les attributs de mise en forme applicables spécifiquement à l'élément <table> sont :
Exemple :
<table border="2" cellspacing="0" cellpadding="6"> <tr> <td>Nom A</td> <td>Val A</td> </tr> <tr> <td>Nom B</td> <td>Val B</td> </tr> </table>
Rendu :
| Nom A | Val A |
| Nom B | Val B |
L'attribut de mise en forme applicable spécifiquement <tr>, <td> et <th> est :
Exemple :
<table border="2" cellspacing="0" cellpadding="6"> <tr height="45" valign="top"> <td>Nom A</td> <td>Val A</td> </tr> <tr height="45"> <td valign="bottom">Nom B</td> <td>Val B</td> </tr> </table>
Rendu :
| Nom A | Val A |
| Nom B | Val B |
Exemple de tableau reprenant l'ensemble des attributs de style en DTD Transitional
Pour l'utilisation de bordures et d'arrière-plans, il suffit d'appliquer aux éléments du tableau les propriétés CSS :
(cf. CSS - Les bordures et CSS - L'arrière-plan).
Pour supprimer l'espacement entre les cellules, il convient d'associer à l'élément <table> la propriété :
Exemple :
table{
border:2px solid black;
border-collapse:collapse;
}
td{
border:1px solid black;
background-color:#CCCCCC;
}
Rendu :
| Nom A | Val A |
| Nom B | Val B |
Les équivalents en CSS des attributs width et height sont les propriétés :
Avec la possibilité d'utiliser d'autres unités que px (l'unité doit donc être spécifiée).
Exemple :
table{
width:50%;
}
td{
height:3em;
}
Rendu :
| Nom A | Val A |
| Nom B | Val B |
Pour l'alignement dans les cellules les équivalents en CSS des attributs align et valign sont les propriétés :
Elles peuvent prendre les mêmes valeurs que les attributs des DTD Transitional (pour vertical-align : top, middle, bottom ; pour text-align : left, center, right, justify)
Exemple :
td{
height:3em;
width:5em;
text-align:right;
vertical-align:bottom;
}
Rendu :
| Nom A | Val A |
| Nom B | Val B |
L'équivalent de l'attribut cellspacing en propriété CSS est border-spacing appliqué à l'élément <table>. Mais il n'est pas interprété par Internet Explorer 6.
A la place de cellspadding, il est possible d'utiliser en CSS la propriété :
(applicable à tous les éléments de type bloc ou aux éléments de type en ligne ayant des dimensions par défaut). Elles peut être associée non seulement à <table> mais aussi à <tr>,<td>,<th>,<caption>.
Exemple :
td{
padding:1em;
}
Rendu :
| Nom A | Val A |
| Nom B | Val B |