La plupart des pages Webs sur Internet contiennent des tableaux, soit pour la création de la Page elle-même ou encore pour les menus, les abonnements, les annonces ou autres.
Les tableaux peuvent être maîtrisés par tous, par contre, si l'on pratique peu, un code au mauvais endroit peu nous donner un casse-tête ainsi que des maux de tête.
3.1 - Définition : Un tableau est une boîte divisée en rangées (lignes) et en colonnes. Elle permet d'améliorer la présentation en facilitant la tâche de l'alignement des textes. Certains pourraient confondre les tableaux avec les cadres, les cadres n'occupent pas nécessairement les même fonctions.
3.2 - Démarrage : Exécuter le logiciel "CODExpert" (Démarrer, Programmes, CODExpert Html et CODExpert 1.32). à l'invite dans la petite boîte, choisir "Nouveau document", puis avec l'aide du menu, choisir "Fichier" et puis "Nouveau". Maintenant il faut entrer le "Titre de la page :", taper "tableaux de ...(Votre Nom)". (N.B. Plus tard quand vous aurez à redémarrer CODExpert, il faudra sélectionner "Ouvrir Document" et puis cliquer deux fois sur le fichier qui apparaîtra dans la petite fenêtre.)
3.3 - <TABLE> 
"tableau". Utilisation : Création d'un nouveau tableau.
Dans le logiciel CODExpert, placer le curseur après la balise <BODY>. avec l'aide du bouton "tableau", remplir les cases des sélections "Border", "Cell Padding", "Cell Spacing", "Largeur du tableau" et "Couleur de fond".
3.4 - Ligne tableau 
Utilisation : Pour ajouter des <TR> et </TR> au tableau.
Dans le logiciel CODExpert, placer le curseur entre les balises <TABLE> et cliquer sur le bouton "Ligne tableau".
3.5 - Cellule tableau 
Utilisation : Pour ajouter des <TD> et </TD> au tableau.
Dans le logiciel CODExpert, placer le curseur entre les balises <TR> et cliquer sur le bouton "Cellule tableau".
3.6 - Les codes de base: Pour ouvrir un tableau on utilise la commande <TABLE> et on le ferme avec </TABLE>, à l'intérieur de ces balises se trouvent les rangées, ouvrir une rangée avec <TR> et la fermée avec </TR>, et à l'intérieur de ces balises se trouvent toutes les colonnes, ouvrir une colonne avec <TD> et la fermée avec </TD>. à l'intérieur de ces dernières balises se trouve le texte, plus ou moins modifié avec les codes de la leçon #2, que l'on verra à l'écran. Voici un exemple avec les codes de base pour débuter. Notez que les codes en mode GRaS n'apparaîtraient pas en temps normal, ceci n'est qu'une démonstration.
| <TABLE> |
|
|
| <TD>
Boîte #1 </TD> |
<TD>
Boîte #2 </TD> |
|
|
|
|
| <TD> Boîte #3
</TD> |
<TD> Boîte #4
</TD> |
|
|
</TABLE>
3.7 - Codes HTML de base pour les tableaux: Voici quelques codes HTML dont vous aurez besoin pour mieux contrôler votre présentation à l'intérieur d'un tableau. Cette fois-ci, vous aurez à taper plusieurs commandes qui ne sont pas automatisées à l'intérieur du logiciel CODExpert. Comme vous le savez maintenant, ces codes s'utilisent à l'intérieur des balises BODY et puis à l'intérieur des balises de tableau <TABLE> </TABLE>.
<TABLE BORDER="x"> Utilisation : Permet de voir ou non le contour du tableau. "x" peut être à peu près n'importe quel chiffre, c'est en pratiquant que l'on verra les possibilités.
| BORDER="0" |
Boîte 2 |
| Boîte 3 |
Boîte 4 |
|
| BORDER=1 |
Boîte 2 |
| Boîte 3 |
Boîte 4 |
|
| BORDER=5 |
Boîte 2 |
| Boîte 3 |
Boîte 4 |
|
Voici les codes pour construire la boîte du milieu. Vous n'avez qu'à changer border=x pour modifier l'apparence.
<TABLE BORDER=1>
<TR>
<TD> <B><FONT SIZE="2">BORDER=1</FONT></B></TD>
<TD> Boîte 2</TD>
</TR>
<TR>
<TD> Boîte 3</TD>
<TD> Boîte 4</TD>
</TR>
</TABLE>
<TABLE CELLPADDING="x"> Utilisation : Permet d'insérer un peu plus d'espace autour du texte. "x" peut être à peu près n'importe quel chiffre, c'est en pratiquant que l'on verra les possibilités. Cette commande ou attribut pour le tableau fonctionne avec la commande border. border="0" n'est pas utilisé ici dans cet exemple vu la difficulté d'en voir le résultat, mais cela fonctionne parfaitement. La seule différence entre les deux boîtes ci-dessous est que le CELLPaDDING est zéro pour l'un et trois pour l'autre.
| border=1 cellpadding="0" |
Boîte 2 |
| Boîte 3 |
Boîte 4 |
|
| border=1 CELLPaDDING=3 |
Boîte 2 |
| Boîte 3 |
Boîte 4 |
|
Voici les codes pour construire la boîte à droite. Vous n'avez qu'à changer CELLPaDDING=x pour modifier l'apparence.
<TABLE BORDER=1 CELLPaDDING=3>
<TR>
<TD> <B><font size="2">border=1</font></B></TD>
<TD> Boîte 2</TD>
</TR>
<TR>
<TD> Boîte 3</TD>
<TD> Boîte 4</TD>
</TR>
</TABLE>
<TABLE CELLSPaCING="x"> Utilisation : Permet d'insérer un peu plus d'espace entre les cellules (boîtes). "x" peut être à peu près n'importe quel chiffre, c'est en pratiquant que l'on verra les possibilités. Cette commande ou attribut pour le tableau fonctionne avec les commandes border et CELLPaDDING. La seule différence entre les deux boîtes ci-dessous est que le CELLSPaCING est zéro pour l'un et cinq pour l'autre. Il est à remarquer que si le texte à l'intérieur d'une cellule est trop long, il y aura un retour à la ligne automatique sur la prochaine ligne.
| border=1 cellpadding="0" cellspacing="0" |
Boîte 2 |
| Boîte 3 |
Boîte 4 |
|
| border=1 cellpadding="0" CELLSPaCING=5 |
Boîte 2 |
| Boîte 3 |
Boîte 4 |
|
Voici les codes pour construire la boîte à droite. Vous n'avez qu'à changer CELLSPaCING=x pour modifier l'apparence.
<TABLE BORDER=1 cellpadding="0" CELLSPaCING=5>
<TR>
<TD> <B><font size="2">border=1</font></B></TD>
<TD> Boîte 2</TD>
</TR>
<TR>
<TD> Boîte 3</TD>
<TD> Boîte 4</TD>
</TR>
</TABLE>
<TABLE WIDTH="x"> ou <TD WIDTH="x"> Utilisation : Permet de délimiter la largeur d'un tableau ou d'une colonne. "x" peut être à peu près n'importe quel chiffre, normalement la largeur de l'écran ou moins. Cette commande ou attribut pour le tableau peut être utilisée avec ou sans les commandes border, CELLPaDDING et CELLSPaCING. La seule différence entre les deux boîtes ci-dessous est que le width est 200 pour l'un et 300 pour l'autre.
| width=100 |
W=75 |
| Boîte 3 |
Boîte 4 |
|
| width=200 |
W=100 |
| Boîte 3 |
Boîte 4 |
|
| width=20% |
width=80% Utilisation : Permet de délimiter la largeur d'un tableau ou d'une colonne en pourcentage de l'écran utilisée. Le tableau s'ajustera automatiquement à la largeur de l'écran. Là, les mots de tête sont assez fréquents, vous verrez pourquoi en pratiquant. Le total de "x%" des boîtes doit égaler 100% ou moins au bout de la ligne... Le 100% équivaut à la largeur de l'écran présent, alors si l'on change la résolution de l'écran, le tableau s'ajustera de lui-même. Les pourcentages ne sont pas toujours faciles à utiliser, car souvent ce que l'on voit à l'écran n'est pas ce que l'on veux. Il s'agit de pratiquer et pratiquer. |
| Boîte 3 |
Boîte 4 |
|
Voici les codes pour construire la boîte du haut. Vous n'avez qu'à changer width=x pour modifier l'apparence. Notez que l'on peut facilement changer les couleurs de fonts.
<TABLE WIDTH=475 BORDER=1 cellpadding="0" cellspacing="0">
<TR>
<TD><TABLE BORDER=1>
<TR>
<TD WIDTH=100 bgcolor="#00FF00"> <B><FONT SIZE="2">width=100</FONT></B></TD>
<TD WIDTH=75> W=75</TD>
</TR>
<TR>
<TD> Boîte 3</TD>
<TD> Boîte 4</TD>
</TR>
</TABLE></TD>
<TD><TABLE BORDER=1>
<TR>
<TD WIDTH=200 bgcolor="#00FF00"> <B><FONT SIZE="2">width=200</FONT></B></TD>
<TD WIDTH=100> W=100</TD>
</TR>
<TR>
<TD> Boîte 3</TD>
<TD> Boîte 4</TD>
</TR>
</TABLE></TD>
</TR>
</TABLE>
<TD COLSPAN="x"> Utilisation : Permet de fusionner deux colonnes ou plus. Le "x" maximal doit être le nombre total de colonnes du tableau. Cette commande ou attribut pour les cellules peut être utilisée avec ou sans la commande border.
| width=20% |
width=80% Utilisation : Permet de délimiter la largeur d'un tableau en pourcentage. Le total de ... |
| <TD COLSPAN=2> |
|
Voici les codes pour construire cette boîte. Vous n'avez qu'à changer COLSPAN=x pour modifier l'apparence. Notez que l'on peut facilement changer les couleurs de fonts.
<TABLE BORDER=1 cellpadding="0" cellspacing="0">
<TR>
<TD><TABLE BORDER=1>
<TR>
<TD WIDTH=20%> <B><FONT SIZE="2">WIDTH=20%</FONT></B></TD>
<TD WIDTH=80%><B><FONT SIZE="2">WIDTH=80%</FONT></B> Utilisation : Permet de délimiter la largeur d'un tableau en pourcentage. Le total de ...</TD>
</TR>
<TR>
<TD COLSPAN=2 bgcolor=#00FF00><B>TD COLSPAN=2</B><FONT SIZE="2"><TD
COLSPAN=2></FONT></B></TD>
</TR>
</TABLE></TD>
</TABLE>
<TD ROWSPAN="x"> Utilisation : Permet de fusionner deux rangées (lignes) ou plus quand on a besoin d'une colonne plus longue. Le "x" maximal doit être le nombre total de rangées du tableau. Cette commande ou attribut pour les cellules peut être utilisée avec ou sans la commande border.
| <TD ROWSPAN=2> |
WIDTH=70% Utilisation : Permet de délimiter la largeur d'un tableau en pourcentage. Le total de ... |
| Boîte 3 |
|
Voici les codes pour construire cette boîte. Vous n'avez qu'à changer ROWSPAN=x pour modifier l'apparence.
<TABLE BORDER=1 cellpadding="0" cellspacing="0">
<TR>
<TD><TABLE BORDER=1>
<TR>
<TD ROWSPAN=2 WIDTH=30% bgcolor=#00FF00> <B><FONT SIZE="2">TD ROWSPAN=2</FONT></B></TD>
<TD WIDTH=70%><B><FONT SIZE="2">WIDTH=70%</FONT></B> Utilisation : Permet de délimiter la largeur d'un tableau en pourcentage. Le total de ...</TD>
</TR>
<TR>
<TD> Boîte 3</TD>
</TR>
</TABLE></TD>
</TABLE>
<TH> </TH> Utilisation : Permet d'entrer des titres de colonnes ou de lignes sans avoir besoin de les centrer ou les mettre en caractères gras manuellement. Cette commande remplace le <TD> et elle peut aussi utiliser les mêmes options que le <TD>.
| Colonne #1 |
Colonne #2 |
Colonne #3 |
| Pommes |
Carottes |
Paniers |
| Poires |
Tomates |
Chaudières |
Voici les codes pour construire cette boîte.
<TABLE width=550 border=1 cellpadding="0" cellspacing="0" bgcolor="#00FFFF">
<COL SPAN=3>
<TR>
<TH bgcolor="#00FF00"> Colonne #1</TH>
<TH bgcolor="#00FF00"> Colonne #2</TH>
<TH bgcolor="#00FF00"> Colonne #3</TH>
</TR>
<TR>
<TD> Pommes</TD>
<TD> Carottes</TD>
<TD> Paniers</TD>
</TR>
<TR>
<TD> Poires</TD>
<TD> Tomates</TD>
<TD> Chaudières</TD>
</TR>
</TABLE>
<TD align="right"> ou center ou LEFT. Utilisation : Permet d'aligner le texte à l'intérieur des cellules. Cette commande peut être utiliser avec les autres options déjà mentionnés pour <TD>.
| Colonne #1 |
Colonne #2 |
Colonne #3 |
| align="right" |
align=center |
align=LEFT |
| Poires |
Tomates |
Chaudières |
| Pêches |
Concombres |
Boîtes |
Voici les codes pour construire cette boîte.
<TABLE width=550 border=1 cellpadding="0" cellspacing="0" bgcolor="#00FFFF">
<COL SPAN=3>
<TR>
<TH> Colonne #1</TH>
<TH> Colonne #2</TH>
<TH> Colonne #3</TH>
</TR>
<TR>
<TD align="right" bgcolor="#00FF00"><font size="2">align="right"</font></TD>
<TD align=center bgcolor="#00FF00"><font size="2">align=center</font></TD>
<TD align=LEFT bgcolor="#00FF00"><font size="2">align=LEFT</font></TD>
</TR>
<TR>
<TD align="right"> Poires</TD>
<TD align=center> Tomates</TD>
<TD align=LEFT> Chaudières</TD>
</TR>
<TR>
<TD align="right"> Pêches</TD>
<TD align=center> Concombres</TD>
<TD align=LEFT> Boîtes</TD>
</TR>
</TABLE>
<TD valign=TOP> ou MIDDLE ou BOTTOM. Utilisation : Permet d'aligner le texte de haut en bas à l'intérieur des cellules. Cette commande peut être utiliser avec les autres options déjà mentionnés pour <TD>.
| Colonne #1 |
Colonne #2 |
Colonne #3 |
Colonne #4 |
Pommes
Poires
Pêches
Raisins |
valign=TOP |
valign=MIDDLE |
valign=BOTTOM |
Voici les codes pour construire cette boîte.
<TABLE width=550 border=1 cellpadding="0" cellspacing="0" bgcolor="#00FFFF">
<COL SPAN=4>
<TR>
<TH> Colonne #1</TH>
<TH> Colonne #2</TH>
<TH> Colonne #3</TH>
<TH> Colonne #4</TH>
</TR>
<TR>
<TD ROWSPAN=3>Pommes<br>Poires<br>Pêches<br>Raisins</TD>
<TD ROWSPAN=3 valign=TOP bgcolor="#00FF00"><font size="2">valign=TOP</font></TD>
<TD ROWSPAN=3 valign=MIDDLE bgcolor="#00FF00"><font size="2">valign=MIDDLE</font></TD>
<TD ROWSPAN=3 valign=BOTTOM bgcolor="#00FF00"><font size="2">valign=BOTTOM</font></TD>
</TR>
</TABLE>
<TABLE bgcolor="#xxxxxx"> ou <TD bgcolor="#xxxxxx">
Utilisation : Permet d'ajouter une couleur pour le fond du tableau ou de la cellule. "#xxxxxx" peut être une combinaison de chiffres et de lettres (de noir #000000 à blanc #FFFFFF). Cette commande ou attribut pour le tableau peut être utilisée avec ou sans les commandes border, CELLPaDDING et CELLSPaCING. Dans l'exemple ci-dessous, chaque boîte peut avoir sa propre couleur.
| Boîte 1 |
Boîte 2 |
| Boîte 3 |
bgcolor=#FF00FF |
|
| bgcolor=#00FF00 |
Boîte 2 |
| Boîte 3 |
Boîte 4 |
|
Voici les codes pour construire cette boîte.
<TABLE border=1 cellpadding="0" cellspacing="0">
<TR>
<TD><TABLE border=1 width=250 bgcolor=#FF00FF>
<TR>
<TD> Boîte 1</TD>
<TD bgcolor=#00FF00> Boîte 2</TD>
</TR>
<TR>
<TD> Boîte 3</TD>
<TD> <B><font size="2">bgcolor=#FF00FF</font></B></TD>
</TR>
</TABLE></TD>
<TD><TABLE border=1 width=250 bgcolor=#00FF00>
<TR>
<TD> <B><font size="2">bgcolor=#00FF00</font></B></TD>
<TD> Boîte 2</TD>
</TR>
<TR>
<TD> Boîte 3</TD>
<TD bgcolor=#FF00FF> Boîte 4</TD>
</TR></TABLE>
</TD></TR></TABLE>
<CaPTION align=BOTTOM> </CaPTION> ou TOP. Utilisation : Permet d'ajouter une remarque au dessus ou au dessous du tableau.
Voici un exemple de CaPTION
| Colonne #1 |
Colonne #2 |
Colonne #3 |
| align="right" |
align=center |
align=LEFT |
| Poires |
Tomates |
Chaudières |
| Pêches |
Concombres |
Boîtes |
Voici les codes pour construire cette boîte. Options : BOTTOM ou TOP
<TABLE width=550 border=1 cellpadding="0" cellspacing="0" bgcolor="#00FFFF">
<CaPTION align=BOTTOM>Voici un exemple de tableau</CaPTION>
<COL SPAN=3>
<TR>
<TH> Colonne #1</TH>
<TH> Colonne #2</TH>
<TH> Colonne #3</TH>
</TR>
<TR>
<TD align="right"><font size="2">align="right"</font></TD>
<TD align=center><font size="2">align=center</font></TD>
<TD align=LEFT><font size="2">align=LEFT</font></TD>
</TR>
<TR>
<TD align="right"> Poires</TD>
<TD align=center> Tomates</TD>
<TD align=LEFT> Chaudières</TD>
</TR>
<TR>
<TD align="right"> Pêches</TD>
<TD align=center> Concombres</TD>
<TD align=LEFT> Boîtes</TD>
</TR>
</TABLE>
3.8 - Voilà ! avec tous les outils dont vous disposez jusqu'à maintenant, vous êtes près pour construire votre première Page Web. Mais avant, il faudra vous amusez avec les tableaux durant plusieurs jours. Ce n'est rien de difficile, il faut tout simplement pratiquer, pratiquer et pratiquer. Certains ne font que copier les codes des autres et quand un problème survient, ils sont tout à fait perdus.
Écrivez-moi un mot pour me donner vos commentaires sur ces premières leçons, ou si vous avez besoin d'aide supplémentaire.
3.9 - Allons-y : Maintenant que l'on sait presque tout sur les tableaux, passons à la Leçon 4
