Cours HTML- Les Tableaux - Les Dossiers - Sospc-en-ligne.com

Mercredi 07 Janvier 2009 - 20 Connectés

Cours HTML

Vous pouvez également créer des tableau en HTML. C'est très utile pour afficher du texte et des graphiques. Ils vous permettent de placer le texte et les images à n'importe quel endroit sur la page en définissant la page comme un tableau

Le HTML comprend les tableau en ligne et en colonnes. Pour créer un tableau il faut utiliser la balise <TABLE>. Nous allons utiliser un bord de tableau de 1 pixel comme ça le tableau sera visible. Il faut que votre tableau contienne des cellules pour qu'il soit visible (un peu comme excel). Vous pouvez insérer une cellule en utilisant la balise <TD>. Les cellules doivent être à l'interieur du tableau.

Créons notre premier tableau:

<HTML>
<HEAD>
<TITLE>Le beau tableau</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“1”>
<TD>Ceci est une cellule de votre tableau</TD>
</TABLE>
</BODY>
</HTML>

Cliquez ici pour voir ce que ça donnerait.

Maintenant créons des lignes (ROWS) en utilisant la balise <TR>. Vos cellules (TD) doivent obligatoirement se retrouver à l'interieur de vos balises <TR>.

<HTML>
<HEAD>
<TITLE>Le beau tableau</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“1”>
<TR>
<TD>Cellule 1</TD>
<TD>Cellule 2</TD>
</TR>
<TR>
<TD>Cellule 3</TD>
<TD>Cellule 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Cliquez ici pour voir ce que ça donnerait.

Vous pouvez créer autant de ligne et de cellule que vous voulez en utilisant les balises <TR> et <TD>. Vous n'avez pas besoin de mettre le même nombre de cellules dans chaque ligne. Si vous avez un maximum de 2 cellules par ligne dans votre tableau et dans une autre ligne si vous n'en avez qu'une, le HTML n'en affichera qu'une seule et elle sera aussi large qu'une cellule. Pour étendre une cellule au-dela d'une ligne il faut utiliser à l'interieur de la balise <TD> le paramètre COLSPAN :<TD COLSPAN=2>. COLSPAN indique le nombre de colonnes que vous voulez pour étendre votre cellule.

<HTML>
<HEAD>
<TITLE>les tableaux: COLSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“1”>
<TR>
<TD>Cellule 1</TD>
<TD>Cellule 2</TD>
</TR>
<TR>
<TD>Cellule 3</TD>
</TR>
<TR>
<TD COLSPAN=2>Cellule 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Cliquez ici pour voir ce que ça donnerait.

Vous pouvez aussi étendre des lignes dans des colonnes:

<HTML>
<HEAD>
<TITLE>Les tableaux: ROWSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“1”>
<TR>
<TD>Cellule 1</TD>
<TD ROWSPAN=”2”>Cellule 2</TD>
</TR>
<TR>
<TD>Cellule 3</TD>
</TR>
<TR>
<TD COLSPAN=”2”>Cellule 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Cliquez ici pour voir ce que ça donnerait.

Dans les cellules, vous pouvez mettre du texte, des images et des liens. Pour aligner un tableau ajoutez le paramètre align=“center” dans votre balise <TABLE>. Vous pouvez aligner au centre (center) à droite (right) et à gauche (left).

Essayons les différentes façons de faire des tableaux

<HEAD>
<TITLE>Les tableaux</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“1” ALIGN=“CENTER”>
<TR>
<TD><FONT SIZE=“6”>HI!</FONT></TD>
<TD ROWSPAN=2><IMG SRC=“http://www.sospc-en-ligne.com/dossiers/html/images/chat.jpg”></TD>
</TR>
<TR>
<TD><FONT COLOR=“RED”>Vous pouvez faire plein de choses avec les tableaux </TD>
</TR>
<TR>
<TD COLSPAN=”2”><CENTER>C'est pas beau ça ?</CENTRE></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Cliquez ici pour voir ce que ça donnerait.

Pour changer l'aspect de votre tableau, vous pouvez changer la couleur des bords. Pour fixer une couleur de bord utilisez le paramètre BORDERCOLOR=“#685F27”. (Cela change la couleur de bord en vert olive.)

Essayons ça maintenant:

<HTML>
<HEAD>
<TITLE>Les tableaux</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“1” BORDERCOLOR=“#658F27”>
<TD>C'est beau !</TD>
</TABLE>
</BODY>
</HTML>

Cliquez ici pour voir ce que ça donnerait.

Pour mieux faire resortir les couleurs de bords, vous pouvez utiliser BORDERCOLORDARK and BORDERCOLORLIGHT .

<HTML>
<HEAD>
<TITLE>Les tableaux</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“1” BORDERCOLORDARK=“black” BORDERCOLORLIGHT=“#F3D69F”>
<TD>C'est beau !</TD>
</TABLE>
</BODY>
</HTML>

Cliquez ici pour voir ce que ça donnerait.

La couleur pêche a été employée pour les secteurs de points culminants (les plus lumineux)et le noir a été employé pour les secteurs ombragés. Vous noterez que nous avons aussi utilisé des valeurs en héxadécimal pour les couleurs.

Vous pouvez ajouter des images en fond de votre tableau.

<HTML>
<HEAD>
<TITLE>Les tableaux</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“1” BACKGROUND=“http://www.sospc-en-ligne.com/dossiers/html/images/fond.jpg” WIDTH=“400” HEIGHT=“300”>
<TR>
<TD>Cellule 1</TD>
<TD>Cellule 2</TD>
</TR>
<TR>
<TD>Cellule 3</TD>
<TD>Cellule 4</TD>
</TR>
<TR>
<TD>Cellule 5</TD>
<TD>Cellule 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Vous noterez que nous avons spécifié une hauteur et une largeur (height et width) pour le tableau, il est utile de mettre une image de mêmes dimensions pour le fond.

Cliquez ici pour voir ce que ça donnerait.

Vous pouvez aussi changez le fond d'une cellule spécifique.

<HTML>
<HEAD>
<TITLE>Les tableaux</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=“1” BACKGROUND=“http://www.sospc-en-ligne.com/dossiers/html/images/fond.jpg” WIDTH=“400” HEIGHT=“300”>
<TR>
<TD>Cellule 1</TD>
<TD>Cellule 2</TD>
</TR>
<TR>
<TD>Cellule 3</TD>
<TD>Cellule 4</TD>
</TR>
<TR>
<TD BGCOLOR=”silver”>Cellule 5</TD>
<TD BACKGROUND=“http://www.sospc-en-ligne.com/dossiers/html/images/chat.jpg”>Cellule 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Cliquez ici pour voir ce que ça donnerait.

Vous noterez que la cellule 5 est de couleur argent et que la cellule 6 a une image de fond. Les deux apparaissent au dessus de l'image de fond globale, Bien vous vous n'ètes pas obligé d'ajouter un fond global à votre tableau pour mettre un fond ou une couleur à une de vos cellules. Il faut ajuster les tailles d'images à vos cellules.

La dernière chose que nous allons voir est la taille des bords. Jusqu'ici nous avons utilisé un bord de 1 pixel. En mettant un bord à 0 vous ne verrez plus votre tableau. Vous pouvez entrer des valeurs plus grandes pour les bords.

<HTML>
<HEAD>
<TITLE>Les tableaux</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”0”>
<TD>Ce tableau n'a pas de bords visibles.</TD>
</TABLE>
<TABLE BORDER=”5”>
<TD>Ici c'est un bord de 5 pixels</TD>
</TABLE>
<TABLE BORDER=”20”>
<TD>Ici c'est un bord de 20 pixels</TD>
</TABLE>
</BODY>
</HTML>

Cliquez ici pour voir ce que ça donnerait.

1 | 2 | 3 | 4 | 5 | 6 | 7