Rechercher sur le site
Tous les Balises Tous les Attributs

SUR LA ZONE HTML

Glossaire HTML

BalisesAttributs
 

Cours

HTMLXHTML
 
JavascriptWAI
 

Divers

TermesCode source
 
LogithèquesPlugin
 

Qu'en pensez-vous?

Livre d'orPartenaires
 

CREATIONS

 
Internet3D
 
MusiqueCV
 
Divers
 

AUTRES ZONES

 
CSSFlash MX
 
Liens utiles
 


Envoyer l'url de la page à un ami

 Cours HTML : Les tableaux étape 1Retour à la page d'introRetour à la page d'intro

  Introduction

 Info

Ce chapitre est un chapitre qui va vous demander beaucoup d'attention.
Maîtriser les tableaux, c'est maîtriser la mise en page de votre document.
Toutes les pages que vous avez vue sont mises en page grâce à un tableau.
Haut de la page

 La composition d'un tableau

 Info

Le tableau est composé de trois Balises :
<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.
<TABLE>
  <TR>
    <TD>
    </TD>
    <TD>
    </TD>
  </TR>
</TABLE>

Visuellement :
 
   
Haut de la page

 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.

Retestez 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
Haut de la page

 Les lignes

 Info

Comme nous l'avons vue précédemment, la balise <TR></TR> définit une ligne.

Elle doit obligatoirement contenir une balise <TD> et ne doit jamais contenir une autre balise <TR>.

Le nombre de balises <TR> dépend du nombre de lignes désirées.

Pour une ligne on aura un <TR>, pour deux lignes on aura deux <TR> à la suite, pour trois lignes on aura trois <TR>...
Haut de la page

 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">
Haut de la page

 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 %.
Haut de la page

 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 aurra 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>.
Haut de la page

 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
Haut de la page