Les tableaux :
1) Définitions :
Un tableau est un formatage particulier, permettant de présenter des données avec clarté. Ils sont trop souvent utilisés pour faire des mises en pages sur les sites internet, mais à tord.
2) A quoi ça sert ?
Grâce aux tableaux, nous pouvons établir un inventaire, une liste de cadeaux avec leurs prix et bien d’autre chose. Mais surtout cela va nous permettre de pouvoir structuré notre site. En effet les tableaux sont la base même d’un site internet structuré. Avec les tableaux nous pouvons définir la mise en page au pixel près.
3) En pratique :
Nous allons maintenant aborder une étape importante. Pour notre premier exercice sur les tableaux, nous allons seulement écrire une phrase, puis mettre en évidence par exemple des objets et leurs prix, leurs matières, leurs couleurs...
a) Structure d’un tableau :
- <TABLE> indique au navigateur qu’il va rencontrer une structure tableau
- <TR> indique au navigateur qu’il va rencontrer une première ligne, signifie ‘Table Row’.
- <TD> indique au navigateur qu’il va rencontrer une première colonne, signifie ‘Table Definition’.
- </TD> indique au navigateur qu’il va rencontrer la fin de la première colonne.
- </TR> indique au navigateur qu’il va rencontrer la fin de la première ligne.
- </TABLE>indique au navigateur qu’il va rencontrer la fin du tableau.
b) Une phrase dans un tableau :Nous allons écrire la phrase “Mon premier tableau” dans un tableau à cellule unique. Mais pour rendre ce tableau visible il nous faudra utiliser l’attribut BORDER="x", ou x est l’épaisseur de la bordure en pixel. Sans cet attribut notre tableau aura une bordure invisible, mais remplira tout de même son rôle:
<HTML><HEAD>
<TITLE>D-3 Gras</TITLE>
</HEAD><BODY>
<TABLE BORDER="1">
<TR>
<TD>Mon premier tableau</TD>
</TR>
</TABLE>
</BODY>
</HTML> |
Si vous essayez sans l’attribut BORDER, vous verrez que le tableau disparait, de même si vous mettez cet attribut à zéro. Selon le code ci-dessus nous obtenons cela :
c) Structure avancé :nous allons mettre en évidence des objets et leurs prix, leurs matières, leurs couleurs... Nous allons écrire les titres en gras. Nous allons également donner une largeur de 300 pixels et une hauteur de 100 pixels (respectivement les attributs WIDTH et HEIGHT). Nous allons donner une couleur violette à la ligne du dessus :
<HTML><HEAD><TITLE>E-3 avancé</TITLE>
</HEAD><BODY>
<TABLE BORDER="1" WIDTH="300" HEIGHT="100">
<TR bgcolor="#F0B9E9">
<TD><B>Objets</B></TD>
<TD><B>Matières</B></TD>
<TD><B>Couleurs</B></TD>
<TD><B>Prix</B></TD>
</TR><TR>
<TD>Table</TD>
<TD>Bois</TD>
<TD>Beige</TD>
<TD>150 €</TD>
</TR><TR>
<TD>Chaise</TD>
<TD>Métal</TD>
<TD>Gris</TD>
<TD>40 €</TD>
</TR></TABLE></BODY></HTML>
|
Nous avons utilisé ici l’attribut BGCOLOR pour mettre une couleur de fond. Si nous l’avions mis dans la balise <TABLE>, le tableau entier aurait été coloré. Si nous l’avions mis dans une balise <TD>, seule la cellule aurait été coloré. Il est possible de mettre cet attribut dans chaque cellule avec des valeurs différentes. Il faut cepandant savoir que la couleur définit dans une cellule est prioritaire par rapport à une couleur définit dans une ligne; si nous mettons la valeur #FF0000 à la cellule prix, elle sera rouge et les autres cellules violette: Changeons la ligne prix: <TD><B>Prix</B></TD> par :
<TD BGCOLOR="#FF0000"><B>Prix</B></TD>, nous obtenons :
 |
|
Les tableaux 
