•  Créer des tables de données tout à fait classique afin de présenter des résultats sous forme de lignes et de colonnes (comme on peut le faire sous Excel ).



•  Permettre une meilleure présentation des informations en positionnant les éléments de la mise en page à l'endroit de son choix, qu'il s'agisse d'images ou de texte.

•  La balise <TABLE> qui indique au navigateur la création du tableau
•  La balise <TH> qui définit l'en-tête de chaque colonne ( très peu utilisé )
•  La balise <TR> qui définit une ligne
•  La balise <TD> qui définit une cellule

On peut remarquer que les textes des en-têtes apparaissent automatiquement en gras.

• Dans l'exemple du dessus, l'attribut "BORDER" a été rajouté à la balise <TABLE>. cet attribut permet d'ajouter une bordure avec une épaisseur que vous définissez allant de 0 à ...
  
  A noter qu'à partir de 2 pixels d'épaisseur, seul le contour du tableau prend cette épaisseur alors que les bordures de cellules ne dépassent jamais 1 pixel .
  Si vous définissez une bordure d'épaisseur 1 ou 2, sans préciser la couleur, IE et Netscape assigne la couleur grise par défaut comme vous pouvez le voir dans l'exemple ci-dessus.

• Avec l'attribut BORDERCOLOR, vous pouvez assigner une couleur à la bordure de votre tableau.
  
  Soit vous écrivez le nom de la couleur en Anglais bien sûr ( red, yellow, blue etc... ), soit vous donnez le code hexadécimal de la couleur ( ex : 990000 ).
  Nous reviendrons plus en détail sur les couleurs un peu plus loins dans ce cours.
  
  Attention, sous IE, la couleur apparaît non seulement autour du tableau mais égalemment au niveau des bordures de chaques cellules.
  Sous Netscape, seul le bord du tableau prend la couleur et les bordures de cellules se voient assignées une couleur grise pas des plus harmonieuse !!

• l'attribut CELLPADDING
  
  Vous pouvez spécifier en nombre de pixel la distance entre le bord de la cellule et son contenu.
  
  Cela va permettre d'espacer la bordure de la cellule par rapport au texte ou à l'image qu'elle contient.
  Vous aurez une composition ainsi plus "aérée".



• l'attribut CELLSPACING
  
  Avec ce paramètre, vous définissez le nombre de pixel entre les différentes cellules de votre tableau.

• Les attributs de largeur ( WIDTH ) et de hauteur ( HEIGHT ) :
  
  L'unité utilisé peut être le pixel; vous aurez alors une largeur de tableau fixe quelle que soit la largeur de la fenêtre du navigateur.
  Si vous redimensionnez la fenêtre du navigateur de manière importante, vous devez utiliser la barre de défilement horizontale pour visualiser la partie droite du tableau :
  
  
  
  L'unité peut être exprimée en pourcentage. La largeur du tableau est alors proportionnelle à la largeur de la fenêtre du navigateur.
  Un tableau de largeur 75% fera toujours les 3/4 de la largeur de la fenêtre, même si vous redimensionnez la fenêtre du navigateur; la limite est la taille nécessaire à l'affichage du contenu des cellules.
  
  
  
  Si le contenu est plus grand que le contenant, si vous insérez par exemple, une image de 200 pixels de large dans une cellule qui est prévue à 150 pixels de large, le contenu totalement visible car le tableau va s'adapter.

•  ALIGN="LEFT" : Alignement par défaut; Les données sont alignées à gauche de la cellule ( pour TD ) ou de toutes les cellules ( pour TH ou TR ).
  
  
•  ALIGN="RIGHT" : Les données sont alignées à droite de la cellule ( pour TD ) ou de toutes les cellules ( pour TH OU TR ).
  
  
•  ALIGN="CENTER" : Les données sont centrées à l'intérieur ( pour TD ) ou de toutes les cellules ( pour TH ou TR ).

Pour l'alignement vertical, l'attribut VALIGN possède 4 valeurs :

•  VALIGN="MIDDLE" : Alignemenr par défaut; Les données sont centrées verticalement à l'intérieur de la cellule ( pour TD ) ou de toutes les cellules ( pour TH ou TR ).
  
  
•  VALIGN="TOP" : Les données sont en haut de la cellule ( pour TD ) ou de toutes les cellules ( pour TH ou TR ).
  
  
•  VALIGN="BOTTOM" : Les données sont en bas de le cellule ( pour TD ) ou de toutes les cellules ( pour TH ou TR ).
  
  
•  VALIGN="BASELINE" : Toutes les données des cellules sont alignées sur une ligne commune ( uniquement pour TH ou TR ).