Leçon n°7- Les attributs de "Table"

Leçon n°7

Les attributs de "table"

Et oui comme pour "body", "table " a aussi ses attributs. Ceux-ci concernent ses bordures, sa largeur, sa taille, son alignement, son fond et la présentation de ses lignes et cellules.

La bordure du tableau :

Un tableau est fait comme pour tout tableau de 4 cotés, dit aussi bordures. Il est possible de faire apparaitre ou non une bordure, d'en décider de son épaisseur et de sa couleur.

• L'ordre de bordure :
  • Pour l'ordre de bordure nous écrirons : "border"
  • A cet ordre nous allons dire de faire apparaitre ou non une bordure et l'épaisseur de celle-ci. pour cela nous allons le déterminer par un chiffre qui va de 0 à ... 
  • 0 donne l'ordre de ne pas faire apparaitre de bordure
  • A partir de 1 et le nombres suivant votre bordure apparaitra de plus en plus épaisse

Attention les nombres donnés sont souvent exprimés en pixels

Dans notre feuille html cela donnera :

• L'ordre de la couleur de bordure :
  • Pour l'ordre de couleur de bordure nous écrirons : "bordercolor"
  • A cet ordre nous allons lui signifier la couleur que nous désirons par un code ou un nom de couleur(en anglais)  - cf: leçon 5 pour les codes couleurs

Dans notre feuille html cela donnera :

A ce stade il est possible d'avoir un léger aperçu de notre tableau :

La taille du tableau :

Maintenant que nous avons défini les bords de notre tableau nous allons lui donner une taille afin de pouvoir mieux le percevoir.

Nous allons commencer par décider de la largeur de notre tableau, pour cela nous allons nous servir de l'attribut : "width"

Pour décider de la hauteur de notre tableau nous allons nous servir de l'attribut : "height"

Pour les deux attributs, nous allons définir, soit en pixel, soit en pourcentage des mesures désirées. Cela donnera dans notre feuille HTml :

Nous pouvons maintenant voir notre tableau dans notre navigateur :

Le fond du tableau :

Tout comme pour "body", il nous est possible de mettre un fond à notre tableau, pour cela il suffit de procéder comme pour "body".

Cela donnera dans notre feuille de HTML :

On peut voir dans notre navigateur :

L'alignement du tableau :

Nous avons la possibilité d'aligner notre tableau dans notre fenêtre de navigateur. L'alignement par défaut comme vous pouvez le voir sur votre navigateur est en haut à gauche. Grâce à aux deux attributs d'alignements nous allons pouvoir interagir sur l'alignement horizontal et l'alignement vertical.

L'alignement horizontal :

L'attribut d'alignement horizontal est "align".

Nous pouvons assigner à cet attribut un placement d'alignement :

• à gauche -> left
• au milieu -> center
• à droite -> right

L'alignement vertical :

L'attribut d'alignement vertical est "valign"

Nous pouvons assigner à cet attribut un placement d'alignement :

• ligne de base -> baseline
• Haut -> top
• milieu -> middle
• bas -> bottom

Voyons ce que cela donne sur notre feuille de HTML :

Voici le résultat dans le navigateur :

Présentation des lignes et cellules :

Présentation des lignes :

Pour terminé, nous allons voir comment on peu influer sur la présentation interne des lignes et cellules du tableau.

Lorsque vous regarder dans votre navigateur (selon celui-ci) nous pouvons apercevoir un double trait au niveau de la bordure.

Pour ceux qui ne le voit pas, regarder l'aperçu ci-dessus. En réalité le cadre extérieur est notre tableau et le cadre intérieur est notre cellule.

Nous pouvons influer par un attribut sur l'écart qui se place entre ces deux bordures, nous lui donnons le nom de : "cellspacing"

Afin de plus ou moins accentuer cette écart nous lui apposons un nombre qui va de 0 à ....

• O étant pas d'espace
• 1 à ... augmentera l'espace entre les deux bordures

Présentation des cellules :

Si vous écriviez un texte dans votre tableau celui ci ira de bord à bord, pour un plus bel esthétisme nous allons appliquer un attibut qui fera  office de "tabulation" par défaut à tout contenu de notre cellule. Grâce à cet attribut votre contenu ne viendra pas se placer au ras de votre bordure mais à distance présentable. Cet attribut est : "cellpadding"

Afin de faire cette "tabulation" par défaut, plus ou moins accentué nous allons lui donner une valeur numérique qui ira de 0 à ....

•  0 étant pas de "tabulation"

   

• 1 à ... augmentera l'écart entre les bordures et votre contenu

Voyons ce que donne tout ceci dans notre feuille HTML :

Pour que vous ayez une bonne idée de l'attribut "cellpadding" j'ai ajouter un texte :

Voilà nous venons de voir tous les attributs de "table", maintenant allons voir les lignes et les colonnes