Découvez les bases de HTML et XHTML dans ce tutoriel.
Exemple
| Ligne 1 colonne 1 | Ligne 1 colonne 2 |
| Ligne 2 colonne 1 | Ligne 2 colonne 2 |
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
<td>Ligne 1 colonne 1</td>
<td>Ligne 1 colonne 2</td>
</tr>
<tr>
<td>Ligne 2 colonne 1</td>
<td>Ligne 2 colonne 2</td>
</tr>
</table>Les balises <table> et </table> définissent le début et la fin de votre tableau
width="100%" |
Détermine la taille du tableau, ici dans notre exemple 100%. La largeur peut être exprimée en poucent ou en pixel Exemple en % width="100%" Exemple en pixel (un tableau de 500px de large) width="500" |
border="1" |
Détermine l'épaisseur de la bordure (A noter les bordures ne sont pas ésthétique, nous lui affctons souvent une valeur à 0) |
| cellspacing="0" | Détermine l'écart entre les cellules |
| cellpadding="5" | Détermine l'écart à l'intérieur d'une cellule |
Les balises <tr> et </tr> déterminent les lignes de notre tableau.
Dans l'exemple ci dessous, nous avons une ligne, à l'intérieur, nous avons 2 colonnes délimitées par les balises <td> et </td>
<tr>
<td>Ligne 1 colonne 1</td>
<td>Ligne 1 colonne 2</td>
</tr>
Ces balises représentent les colonnes à l'intérieur des lignes.
<td>Ligne 1 colonne 1</td>
<td>Ligne 1 colonne 2</td>
| width="50%" | Détermine la largeur de la cellule, ici à 50%. Elle peut être exprimée en pixel, pour cela il faut mettre une valeur numérique et ne pas ajouter le caractère "%" |
| height="40" | Détermine la hauteur de la cellule, ici 40 px |
| bgcolor="#CCCCCC" | Détermine la couleur de fond de la cellule. |
| align="center" | Détermine l'alignement horizontal dans une cellule Valeurs possibles :
|
| valign="top" |
Détermine l'alignement vertical Valeurs possibles :
|
Exemple
| Texte centré, aligné au centre sur la verticale, largeur de la colonne 40% | Texte aligné à droite, aligné en haut sur la verticale, largeur de la colonne 60% |
| Fond gris | Fond bleu |
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
<td width="40%" height="80" align="center">Texte centré, aligné au centre sur la verticale, largeur de la colonne 40%</td>
<td width="60%" align="right" valign="top">Texte aligné à droite, aligné en haut sur la verticale, largeur de la colonne 60%</td>
</tr>
<tr>
<td bgcolor="#CCCCCC">Fond gris</td>
<td bgcolor="#00CCFF">Fond bleu</td>
</tr>
</table>La balise thead est utilisée dans les tableaux pour aider à mieux structurer, elle regroupe les informations d'en-tête du tableau. On y trouvera généralement le titre des différentes colonnes.
Exemple
<thead>
<tr>
<th>En-tête</th>
<th>En-tête</th>
</tr>
</thead>
La balise tbody est de même utilisée dans les tableaux pour aider à mieux structurer, elle regroupe les informations contenu dans le tableau.
Exemple
<tbody>
<tr>
<td>Contenu</td>
<td>Contenu</td>
</tr>
</tbody>
Exemple avec thead et tbody
| En-tête | En-tête |
|---|---|
| Contenu | Contenu |
| Contenu | Contenu |
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<thead>
<tr>
<th>En-tête</td>
<th>En-tête</td>
</tr>
</thead>
<tbody>
<tr>
<td>Contenu</td>
<td>Contenu</td>
</tr>
<tr>
<td>Contenu</td>
<td>Contenu</td>
</tr>
</tbody>
</table>Exemple
| Ligne fusionnée | |
| Contenu | Contenu |
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2">Ligne fusionnée</td>
</tr>
<tr>
<td>Contenu</td>
<td>Contenu</td>
</tr>
</table>Exemple
| Colonne fusionnée | Contenu |
| Contenu |
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td rowspan="2">Colonne fusionnée</td>
<td>Contenu</td>
</tr>
<tr>
<td>Contenu</td>
</tr>
</table>