Les tableaux représentent un élément crucial dans l'élaboration de document, nous allons donc vous donner ici les bases d'un tableau réussi.

Pour se faire, créer un fichier .html avec le bloc-notes et recopier le ficher doctype minimal et enregistrez-le.

Dans notre exemple ci-dessous la balise tableau se nomme ainsi :

<table>

Entre les deux balises <table> et </table> le tableau comporte une rangée qui s'ouvre avec <tr> et qui se ferme avec </tr>. Dans la cellule <td> l'on trouve le contenu, comme par exemple : toto, puis, elle se ferme avec </td>. et se termine par la balise de fermeture </table>

Donc, recopier le code suivant :

<table>
<tr>
<td>toto</td>
<td>tutu</td>
<td>titi</td>
</tr>
</table>

Et dans les CSS, il faut, pour bien faire, l'indiquer à notre sélecteur "table" :
Donc préciser la largeur et la hauteur du tableau, avec l'alignement du contenu des cellules.

Ce qui donne :

table { width: 320px;
height: 240px;
text-align: center; }
et rajouter :
td { border: solid 1px #000000; }

Qui est le raccourci de plusieurs valeurs pour la même propriété. Ci-dessus, dans la cellule, border (bordure), solid (solide), (épaisseur) 1px, (couleur hexadécimale noire) #000000.

La marge interieure des cellules

td { padding: 15px; }
ou
td { padding-left: 15px; }

Et ce, sont toutes les données des cellules qui ont été déplacés de 15 pixels vers la gauche.

Les arrières plans de couleurs des tableaux

td { background-color: #cc0000; }

La fusion des colonnes

Reprenez votre fichier qui contient votre tableau, remplacez-le code précédent, par celui-ci.

<table>
<tr>
<td colspan="3">la fusion toutou</td>
</tr>
<tr>
<td>toto</td>
<td>tutu</td>
<td>titi</td>
</tr>
</table>

Vous obtenez ce résultat:

Cette propriété est donc colspan avec la valeur 3 qui correspond au nombre de colonne à fusionner.

Fusionnez des lignes

<table>
<tr>
<td rowspan="3">La fusion zozo</td>
<td>tutu</td>
<td>titi</td>
<td>tata</td>
</tr>
<tr>
<td>zuzu</td>
<td>zizi</td>
<td>zaza</td>
</tr>
</table>
Cette propriété est donc rowspan avec la valeur 3 qui correspond au nombre de cellule à fusionner.

Espace entres les cellules de tableaux en CSS
Une propriété qui permet de spécifier l'espacement entre chaque cellule.

border-spacing
mais reprenons notre exemple du fichier html Celui-ci :
<table>
<tr>
<td rowspan="3">La fusion zozo</td>
<td>tutu</td>
<td>titi</td>
<td>tata</td>
</tr>
<tr>
<td>zuzu</td>
<td>zizi</td>
<td>zaza</td>
</tr>
</table>
Puis, créons un fichier CSS et reprenons l'exemple suivant :
table {
width: 320px;
height: 240px;
text-align: center;
border-spacing: 20px; }

Les bordures des tableaux

Avec la propriété, border-collapse nous supprimons, l'effet double bordure qui existe par défaut sur les tableaux.

Regardons l'exemple suivant:

<style type="text/css"> table {
width: 320px;
text-align: center;
border: 1px solid gray;
border-collapse: collapse; }

td { border: solid 1px gray; }

</style>
<table>
<tr>
<td colspan="3">la fusion toutou</td>
</tr>
<tr>
<td>toto</td>
<td>tutu</td>
<td>titi</td>
</tr>
</table>

La légende dans un tableau

caption-side: top;
Légende au dessus du tableau.
caption-side: bottom;
Légende en dessous du tableau.