Les tableaux

Quoi ? Vous croyez que les tableaux ne serviront à rien pour votre page ? Détrompez-vous !

Au contraire, ils ont une grande importance. Si vous regardez bien, beaucoup de sites contiennent des tableaux.
Ils offrent une mise en page particulière, et vous pouvez tout mettre dedans !
Du texte, mais aussi des images, des vidéos, du son... tout !

Vous vous rendrez compte de leur utilité lorsque vous ferez votre page.

Ceci dit, si vous voulez faire un petit tableau simplet, ça ne sera pas difficile. Mais dès que vous en voudrez plus, vous devrez combiner bon nombre de tags et d'attributs...

Créer un tableau

Là, c'est très facile. On utilise le tag <table> que l'on referme plus loin avec </table>. Ce tag délimite l'emplacement du tableau.

<table>

</table>

Vous devez savoir qu'en html, un tableau se construit ligne par ligne. Pour indiquer une ligne, on utilise le tag <tr>, refermé avec </tr>.
C'est dans ce tag que l'on indiquera les cellules (cases du tableau).

Si vous faites un tableau à 4 lignes, le code en html devrait ressembler à ça :

<table>

<tr>
</tr>

<tr>
</tr>

<tr>
</tr>

<tr>
</tr>

</table>

Ensuite, entre les <tr>...</tr> vous devez définir les cellules.

On distingue 2 sortes de cellules :

Les cellules d'en-tête, définies avec <th>...</th>
Les autres cellules, contenant les données, définies avec <td>...</td>

Ainsi, normalement, la première ligne contiendra des <th> et les autres des <td>.
Exemple :

<table>

<tr>
<th></th>
<th></th>
</tr>

<tr>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

</table>

Vous auriez dû comprendre qu'il s'agit d'un tableau 2 X 4 : 2 cellules en largeur et 4 en longueur.

Et c'est entre ces tags <th> ou <td> que vous devrez écrire les informations qui seront affichées. Ouf !
Et pourtant c'est le strict minimum, comme vous le verrez plus loin.

Vous n'êtes pas obligé de mettre du texte entre <td> et </td>. Vous pouvez mettre le tag img que vous connnaissez, et il y aura une image dans la cellule !

Petit exemple pour résumer :

<div align="center">Prix des bus de ville :<p>
<table>

<tr>
<th>Age de la personne</th>
<th>Prix moyen TTC</th>
</tr>

<tr>
<td>Moins de 3 ans</td>
<td>4 francs</td>
</tr>

<tr>
<td>Entre 3 et 14 ans</td>
<td>8 francs</td>
</tr>

<tr>
<td>Plus de 14 ans</td>
<td>10 francs</td>
</tr>

</table>
</div>

Et là, Ô surprise(s) ! Il n'y a pas de bordures, pas de cadres ! Pas joli joli...
Par contre vous avez sans doute remarqué que la première ligne était mise en valeur (souvent en gras).

Bon, c'était relativement simple jusqu'ici, mais je crois que vous ne pouvez pas vous arrêter là, il vous faudrait au moins une bordure...

Bordures et quadrillage

Je vous propose une solution très simple pour avoir une bordure. Il s'agit d'un attribut au tag <table>. Il s'appelle "border".
Ce qui donne :

<table border>

</table>

Pas besoin de préciser border si la taille de la bordure vous convient (en général c'est bon).
Mais si vous en voulez une plus petite ou plus grande, vous pouvez préciser border comme ceci :

<table border="5">

</table>

Cela ne marche que pour le contour du tableau. Pour modifier l'épaisseur du quadrillage, utilisez un autre attribut avec <table> que vous devrez impérativement préciser : "cellspacing".
Exemple :

<table border="5" cellspacing="6">

</table>

En général on utilise seulement border et on ne le précise pas. Je reprends l'exemple de tout à l'heure et j'y ajoute l'attribut border. Regardez la différence :

Définir la hauteur et la largeur des tableaux

Si vous désirez vraiment définir une hauteur et une largeur pour votre tableau, ces lignes sont pour vous. Mais elles ne sont pas vitales.

Si vous avez une grande image dans une cellule, alors peut-être que vous désirerez réduire la taille du tableau qui a été soudainement agrandit.

Vous devrez ajoutez les attributs height et/ou width au tag <table>.

Height définit la hauteur du tableau
Width définit la largeur du tableau

Précisez ces attributs par un pourcentage, comme ceci :

<table border height="34%" width="50%">

Ce tableau avec bordure utilise 34% de la fenêtre de l'explorateur en hauteur et 50% en largeur.

Préciser une distance minimale entre le bord d'une cellule et son contenu

Si vous voulez donner un effet de "centré" à votre tableau, rien de tel que de déplacer le texte qui s'y trouve à l'intérieur.

Pour ce faire, vous allez devoir ajouter (encore !) un attribut au tag <table> : cellpadding.
Précisez cellpadding par un nombre en pixels (plus question de pourcentage). Exemple :

<table border cellpadding="12" width="75%">
<tr>
<th>C'est juste...</th>
<th>... un essai</th>
</tr>
</table>

Ombres et couleurs d'un tableau

Couleur de fond

Pour définir la couleur de fond d'un tableau, il faut utiliser l'attribut bgcolor du tag <table>.

On le précise par une couleur en héxadécimal ou en anglais (voir le chapitre sur les couleurs).

Choisissez une couleur plutôt claire pour le tableau, de préférence.
Voici un exemple :

<table border bgcolor="aqua">

Bordure

Pour déterminer la couleur des bordures et du quadrillage, on utilise l'attribut bordercolor (toujours du tag table) :

<table border bordercolor="red">

Ceci dit, l'effet donné n'est plus très joli. Vous pouvez oublier cet attribut...

Ombrage

Par contre ceci est plus intéressant. Définissez vous-même la couleur claire et la couleur foncée de l'ombre avec bordercolordark et bordercolorlight.

bordercolorlight définit la couleur la plus claire de l'ombre
bordercolordark définit la couleur la plus foncée de l'ombre

Ces attributs vont toujours ensemble. Si vous mettez l'un, vous devriez mettre l'autre.

D'autre part, évitez les couleurs farfelues qui ne rimeraient à rien, pour préserver l'effet d'ombrage.

Enfin, et ce n'est pas le moins important, vous devriez préciser l'attribut border dans ce cas, pour faire une grosse bordure, disons border="10". Sinon ces attributs bordercolorlight et bordercolordark ne prendraient pas effet.

Exemple :

<table border="9" bgcolor="silver" bordercolorlight="navy"
bordercolordark="teal">

<tr>
<th>Est-ce que cet alliage</th>
<th>de couleurs</th>
<th>vous plaît ?</th>
</tr>

</table>

Voilà pour les tableaux. Vous comprenez maintenant ce que je vous ai dit au début du chapitre : un tableau simple, ce n'est rien, mais quand on veut faire mieux...

Le chapitre suivant traite des formulaires. Autant vous prévenir tout de suite, c'est de loin le plus difficile.
Mais si vous vous accrochez solidement, vous pourrez faire des trucs super !