• Tableaux à angles arrondis
• Créer une barre de scroll colorée
• Les Roll-Over
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un poulet
• Créer un calque
• Créer un tableau
• Créer un formu



• Monter une page
• Déplacer une image
• Manipuler un calque






Pages précédentesRetour au sommairePages suivantes
  Présentation des tableaux
  Création de tableaux
  Alignement des éléments du tableau
  Fusion de lignes et de colonnes

 1. Présentation des tableaux 

Dans les pages web, les tableaux ont deux utilités importantes :
  •  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 quasi totalité des sites web fait appel aux tableaux pour afficher les divers éléments en en faisant une utilisation quelque peu détournée.
 

 2. Création de tableaux 

Pour créer un tableau, vous devez définir au moins une ligne et une colonne ! vous pouvez positionner votre tableau n'importe où dans votre page.

Voyons les principales balises à utiliser:
  •  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
Attention, ces balises doivent être refermées obligatoirement et ce dans l'ordre dans lequel elles ont été ouvertes.

Remarque : Il faut savoir qu'on ne définit pas le nombre de colonnes du tableau; il suffit de comptabiliser le nombre de cellules ( TD ) figurant dans une ligne ( TR ) pour en déduire le nombre de colonnes du tableau.
 
Top
 

Exemple :

  Janvier Février
Nord 48000 72000
Sud 30000 34500
Total 78000 106500

Code source HTML du tableau :

Afficher le code    Masquer le code



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 !!
 
Top
 
D'autres attributs à la balise <TABLE> :
  • 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.
Passons tout de suite à un petit exemple :

Voici un tableau avec aucun espacement de cellule ( CELLSPACING ), aucun remplissage de cellule ( CELLPADDING ), une largeur de 250 px ( WIDTH ), une bordure de 1 px ( BORDER ) et une couleur de bordure rouge ( BORDERCOLOR ).







cellule 1 cellule 2 cellule 3
cellule 4 cellule 5 cellule 6
cellule 7 cellule 8 cellule 9



Voici le code HTML du 1er tableau :

Afficher le code    Masquer le code
 
Top
 


Voici le même tableau avec un espacement de cellule de 10 px et un remplissage de cellule de 5 px :





cellule 1 cellule 2 cellule 3
cellule 4 cellule 5 cellule 6
cellule 7 cellule 8 cellule 9


Voici le code HTML du second tableau :

Afficher le code    Masquer le code
 
  • 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.
 
Top
 

 3. Alignement des éléments du tableau 

Deux attributs permettent de spécifier l'alignement des données d'un tableau :

Pour l'alignement horizontal, on utilise l'attribut ALIGN.
  •  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 ).
Exemple :

Haut gauche Milieu Haut Droit Haut
Centre gauche Centre Centre droit
Bas gauche Bas centre Bas droit

Voir le code HTML :  Afficher le code
 
Top
 


 4. Fusion de lignes et de colonnes 

Les lignes et les colonnes peuvent être fusionnées afin d'obtenir des cellules plus ou moins grandes pour accueillir les données . On utilise les attributs ROWSPAN et COLSPAN.

  •  Pour fusionner 2 cellules adjacentes ( qui se touchent ) sur une ligne, on utilise COLSPAN (pour TD).

  •  Pour fusionner 2 cellules adjacentes sur une colonne, on utilise ROWSPAN (pour TD).

Ces attributs sont très utiles notamment pour réaliser des tableaux complexes mais il s'agit de les manier avec précaution sous peine de voir la structure de votre tableau exploser!!

Passons tout de suite à un exemple :

Titre du tableau sur deux cellules
Cellule 3 Cellule 4
Cellule 5 Cellule 6

Ici, les cellules 1 et 2 ont été fusionnées sur la première ligne.
Voici le code HTML :

<table width="300" border="1" cellspacing="2" cellpadding="4" bordercolor="#990000">
<tr valign="middle" align="center">
<td colspan="2"><font face="Arial, Helvetica, sans-serif" size="3" color="#990000"><b>Titre du tableau sur deux cellules</b></font></td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif" size="2" color="#990000">Cellule 3</font></td>
<td><font face="Arial, Helvetica, sans-serif" size="2" color="#990000">Cellule 4</font></td>
</tr>
<tr>

<td><font face="Arial, Helvetica, sans-serif" size="2" color="#990000">Cellule 5</font></td>
<td><font face="Arial, Helvetica, sans-serif" size="2" color="#990000">Cellule 6</font></td>

</tr>
</table>

Autre exemple :

cellule 1 cellules 2, 4 et 6 fusionnées
sur une même colonne
Cellule 3
Cellule 5

Code HTML :

<table width="300" border="1" cellspacing="2" cellpadding="4" bordercolor="#990000">
<tr>
<td><font face="Arial, Helvetica, sans-serif" size="2" color="#990000">cellule 1</font></td>
<td rowspan="3" align="center" valign="middle"><font face="Arial, Helvetica, sans-serif" size="2" color="#990000">cellules 2, 4 et 6 fusionnées sur une même colonne</font></td>

</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif" size="2" color="#990000">Cellule 3</font></td>
</tr>
<tr>
<td><font face="Arial, Helvetica, sans-serif" size="2" color="#990000">Cellule 5</font></td>
</tr>
</table>

 
Top
 
Titre du tableau
San Francisco
Voici 3 lignes fusionnées Tout en haut
au centre
en bas
  Fin du tableau
 
Exercice :
Essayez de reproduire ce tableau en utilisant les images de votre choix.
Pour vous aidez, il faut savoir qu'au départ, ce tableau comporte 6 lignes et 3 colonnes.

Top
Pages précédentesRetour au sommairePages suivantes
 
Recherche par
mots-clés :

• Les feuilles de style
• Les popups
• Des liens spéciaux





• Test HTML
• Test DHTML
• Test Javascript





• Scripts dhtml