L'effet fini est le suivant :
2. Utilisez les attributs de bordure sombre (bordercolordark) et de bordure claire (bordercolorlight) du tableau pour créer un tableau aux lignes fines :
Ou appuyez sur Ctrl+Alt+T pour insérer le tableau et définissez-le comme indiqué dans la boîte de dialogue (les éléments avec des cases rouges sont corrigés, sinon ils n'auront aucun effet)
Après avoir sélectionné le tableau, appuyez sur F9 pour développer le groupe de panneaux « Tag Inspector » et définissez les paramètres dans le panneau « Attributs » comme indiqué ci-dessous :
Une fois terminé, cela ressemble à ceci :
3. Définissez l'attribut CSS border-collapse du tableau pour réduire : Appuyez sur Ctrl+Alt+T pour insérer le tableau. Le paramètre de la boîte de dialogue est le même que celui de la méthode 2. Sélectionnez le tableau et définissez la couleur de la bordure du tableau dans le panneau des propriétés :
Appuyez sur F9 pour développer le panneau "Tag Inspector" et remplissez "border-collapse:collapse;" dans "style" dans le panneau "Attributs".
Une fois terminé, cela ressemble à ceci :
Remarque : Le tableau en lignes fines réalisé par la méthode 3 ne convient qu'à IE5+. La méthode la plus compatible est la méthode 1. La méthode 2 n'est pas un tableau en lignes fines au sens strict.
Astuce : Dans la méthode 1, vous pouvez utiliser CSS pour définir la couleur d'arrière-plan des cellules du tableau afin de réduire la quantité de code :
<style>
.thin{arrière-plan :#000000}
.thin td{fond :#FFFFFF}
</style>
<table width="200" border="0" cellpacing="1" cellpadding="0" class="thin">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>