Les tableaux étape 1 - Cours XHTML

Introduction

Info

Ce chapitre est un chapitre qui va vous demander beaucoup d'attention.
Si vous ne maîtrisez pas les feuilles de style (css), maîtriser les tableaux, c'est la manière la plus simple pour la mise en page de votre document.

La composition d'un tableau

Info

Le tableau est composé de trois Balises :
Exemple de code :
<table>
  <tr>
    <td>
    </td>
  </tr>
</table>

La balise <TABLE> qui définit le début et la fin du tableau.
La balise <TR> qui définit le début d'une ligne et la fin de cette ligne.
La balise <TD> qui définit une cellule dans une ligne.

Dans l'exemple ci-dessus, le tableau est composé d'une ligne contenant une cellule.
Voici un exemple d'un tableau composé d'une ligne contenant deux cellules.
Exemple de code :
<table>
  <tr>
    <td>1
    </td>
    <td>2
    </td>
  </tr>
</table>

Visuellement :
1
1 2


Il existe d'autres balises XHTML que je vous laisse découvrir, voir la balise TABLE dans le glossaire.

La bordure d'un tableau

Info

Il est possible de définir la taille de la bordure grâce à l'attribut BORDER de la balise <TABLE>.

Pour supprimer la bordure, il faut mettre 0 pour valeur.
Voici le code pour que vous puissiez tester. (le code)

Comme vous avez pu remarquer l'attribut BORDER ne supprime que le relief de la bordure.
Pour supprimer "définitivement" la bordure il faut ajouter l'attribut CELLSPACING avec la valeur 0.

Retester avec ces deux attributs avec la valeur 0.
Puis avec CELLSPACING="0" et BORDER="1".

En conclusion :.
- l'attribut BORDER définit l'épaisseur du relief,
- l'attribut CELLSPACING définit l'épaisseur de la bordure

Les paramètres de hauteur et largeur

Info

Dans cette partie nous allons étudier les attributs HEIGHT et WIDTH de la balise <TABLE>.

La hauteur d'un tableau : HEIGHT.
La hauteur d'un tableau peut être en %, alors la taille du tableau dépendra de la taille de la fenêtre. A prendre en compte, les fenêtres réduites par l'utilisateur, la taille de l'écran 640 X 480 ou 800 X 600...
On écrira <TABLE HEIGHT="100%">, le tableau prendra toute la hauteur de la fenêtre.
La hauteur peut être aussi en pixel.
On écrira <TABLE HEIGHT="100">

Il est rare de définir la hauteur d'un tableau.

La longueur d'un tableau : WIDTH.
La longueur d'un tableau peut être en %, alors la taille du tableau dépendra de la taille de la fenêtre. A prendre en compte, les fenêtres réduites par l'utilisateur, la taille de l'écran 640 X 480 ou 800 X 600...
On écrira <TABLE WIDTH="100%">, le tableau prendra toute la longueur de la fenêtre.
La longueur peut être aussi en pixel.
On écrira <TABLE WIDTH="100">

Exercice

Nous allons faire un petit exercice pour visualiser les effet du %.
Voici le code pour que vous puissiez tester.
Ne vous préoccupez pas du code, copiez- collez le mettez deux fois, rajoutez les attributs WIDTH et HEIGHT en % pour le premier et en pixel pour le second.
Réduisez et augmentez la fenêtre et observez le premier tableau qui est en %.

Les colonnes

Info

Les colonnes d'un tableau sont définies par la balise <TD></TD>.

Une balise <TD> ne doit jamais contenir une autre balise <TD>.

Le nombre de balises <TD> dépend du nombre de colonnes désirées.
Pour une colonne on aura un <TD>, pour deux colonnes on aura deux <TD> à la suite, pour trois colonnes on aura trois <TD>...

Pour les tableaux simple (sans fusion de cellules), vous devez avoir le même nombre de <TD> dans chaque balise <TR>.
si vous avez un tableau de trois colonnes et de six lignes alors vos six balises <TR> doivent avoir trois balises <TD>.

Exercice

Voici deux tableaux à faire :
un tableau 5 lignes 3 colonnes, hauteur de 40% et 40 px de largeur sans épaisseur.
un tableau 3 lignes 5 colonnes, hauteur de 60% et 100% de largeur.
Voici le code si vous n'y arrivez pas