.: Html facile :.

Chapitre 5: Les tableaux

Attention: chapitre méchant et important

Ce chapitre est entièrement consacré aux tableaux car pour faire un tableau, on peut utiliser plein de balises.

La balise <TABLE>

Faire fusionner des lignes

Faire fusionner des colonnes

Changer la couleur de fond

Mettre une image en arrière plan

Changer l'espace entre les cellules

Changer le retrait du contenu d'une cellule par rapport à sa bordure

La balise <TABLE>

Tout ce qui sera dans un tableau est écris dans la source (bloc-notes) entre les deux balises <TABLE> et </TABLE>. Le marqueur <TABLE> est extensible.
Pour obtenir une bordure taper tout simplement <TABLE BORDER="la taille de la bordure désirée">, pour ne pas avoir de bordure il suffit de laisser <TABLE> sans rien.

<TABLE> a encore un autre extension qui permet de choisir la largeur du tableau avec <TABLE WIDTH="un nombre ou un pourcentage qui sera la largeur">.

<TABLE BORDER="1" WIDTH="250">
<TR>
<TD>Tableau de largeur 250 pixels</TD>
</TR>
</TABLE>

Tableau de largeur 250 pixels

Ajouter une ligne

Pour ajouter une ligne c'est <TR> et pour finir cette ligne c'est évidemment </TR>

Une ligne seule ne constitue pas un tableau, il lui faut au moins une colonne.

Ajouter une colonne

Pour découper cette ligne en colonnes c'est <TD> et </TD>

<TABLE BORDER="1">
<TR>
<TD>Colonne 1 de la ligne 1</TD>
<TD>Colonne 2 de la ligne 1</TD>
</TR>
</TABLE>

Colonne 1 de la ligne 1 Colonne 2 de la ligne 1

A l'intérieur de <TD> et </TD>, on peut mettre du texte, des marqueurs de mise en forme (<B>, <I>), des liens, des images, du JavaScript, d'autres tableaux, ... En fait on peut tout mettre !

<TD> est extensible par VALIGN qui prend les valeurs "TOP" (en haut), "MIDDLE"(au milieu) et "BOTTOM" (en bas).

<TABLE BORDER="1">
<TR>
<TD VALIGN="TOP">Texte aligné en haut de la case<BR><BR><BR></TD>
<TD VALIGN="MIDDLE">Texte aligné au milieu de la case</TD>
<TD VALIGN="BOTTOM">Texte aligné en bas de la case</TD>
</TR>
</TABLE>

Texte aligné en haut de la case

Texte aligné au milieu de la case Texte aligné en bas de la case

<TD> est aussi extensible par ALIGN qui cette fois aligne le texte sur le plan l'horizontale. ALIGN prend les valeurs "LEFT" par défaut (à gauche), "CENTER" (au centre) et "RIGHT" (à droite).

<TABLE BORDER="1">
<TR>
<TD VALIGN="TOP">Texte aligné en haut de la case<BR><BR><BR></TD>
<TD VALIGN="MIDDLE">Texte aligné au milieu de la case</TD>
<TD VALIGN="BOTTOM">Texte aligné en bas de la case</TD>
</TR>
<TR>
<TD ALIGN="LEFT">Texte aligné à droite</TD>
<TD ALIGN="CENTER">Texte aligné au centre</TD>
<TD ALIGN="RIGHT">Texte aligné à gauche</TD>
</TR>
</TABLE>

Texte aligné en haut de la case

Texte aligné au milieu de la case Texte aligné en bas de la case

Texte aligné à droite Texte aligné au centre Texte aligné à gauche

On peut régler la largeur d'une colonne. Ainsi <TD> devient <TD WIDTH="un nombre ou un pourcentage qui sera la largeur">.

<TABLE BORDER="1">
<TR>
<TD WIDTH="50%">Largeur=50%</TD>
<TD>Largeur normale</TD>
<TD>Largeur normale</TD>
</TR>
</TABLE>

Largeur=50% Largeur normale Largeur normale

Ajouter un intitulé

Pour ajouter un intitulé c'est <TH> et </TH>. Ils sont situé a l'intérieur des marqueurs <TR> et </TR>.

<TABLE BORDER="1">
<TR>
<TH>Colonne 1 : Intitulé de la colonne</TH>
<TH>Colonne 2 : Intitulé de la colonne</TH>
</TR>
</TABLE>

Colonne 1 : Intitulé de la colonne Colonne 2 : Intitulé de la colonne

En fait le navigateur met le texte en gras.

<TH> est extensible de le même façon que <TD> par ALIGN et VALIGN (voir plus haut les remarques sur "Ajouter une colonne").

Ajouter une légende

Pour mettre une légende c'est <CAPTION> et </CAPTION>.

<TABLE BORDER>
<CAPTION>Tableau 1 - Légende du tableau</CAPTION>
<TR>
<TH>Colonne 1 : Intitulé de la colonne</TH>
<TH>Colonne 2 : Intitulé de la colonne</TH>
</TR>
<TR>
<TD>Colonne 1 de la ligne 1</TD>
<TD>Colonne 2 de la ligne 1</TD>
</TR>
</TABLE>

Tableau 1 - Légende du tableau
Colonne 1 : Intitulé de la colonne Colonne 2 : Intitulé de la colonne

Colonne 1 : Ligne 1 Colonne 2 : Ligne 1

<CAPTION> est extensible par ALIGN qui permet de placer la légende soit en haut, par défaut, ("TOP") soit en bas ("BOTTOM") mais pas par "MIDDLE".

<TABLE BORDER>
<CAPTION ALIGN="MIDDLE">Tableau 1 - Légende du tableau</CAPTION>
<TR>
<TH>Colonne 1 : Intitulé de la colonne</TH>
<TH>Colonne 2 : Intitulé de la colonne</TH>
</TR>
<TR>
<TD>Colonne 1 de la ligne 1</TD>
<TD>Colonne 2 de la ligne 1</TD>
</TR>
</TABLE>

Tableau 1 - Légende du tableau
Colonne 1 : Intitulé de la colonne Colonne 2 : Intitulé de la colonne

Colonne 1 : Ligne 1 Colonne 2 : Ligne 1

Faire fusionner des lignes

Pour faire fusionner des lignes c'est en faite un extension de <TD> ou <TH>. En effet on peut faire fusionner des lignes mais aussi des intitulés (ils sont considérés comme des lignes).
C'est donc :
<TD RAWSPAN="nombres de lignes à faire fusionner"> pour les lignes.
<TH RAWSPAN="nombres de lignes à faire fusionner"> pour les intitulés.

<TABLE BORDER="1">
<CAPTION>Fusion de 2 lignes</CAPTION>
<TR>
<TD ROWSPAN="2">Fusion des 2 lignes</TD>
<TD>1<SUP>ère</SUP> ligne</TD>
</TR>
<TR>
<TD>2<SUP>ème</SUP> ligne</TD>
</TR>
<TR>
<TD>Pas de fusion(une seule ligne)</TD>
<TD>3<SUP>ème</SUP> ligne</TD>
</TR>
</TABLE>

Fusion de 2 lignes
Fusion des 2 lignes 1^ère ligne

2^ème ligne

Pas de fusion(une seule ligne) 3^ème ligne

Faire fusionner des colonnes

Idem qu'au dessus ("Faire fusionner des lignes"). C'est en fait des extension de <TD> et <TH>
<TD COLSPAN="nombres de colonnes à faire fusionner"> pour les colonnes.
<TH COLSPAN="nombres de colonnes à faire fusionner"> pour les intitulés.

<TABLE BORDER="1">
<CAPTION>Fusion de 2 colonnes</CAPTION>
<TR>
<TD COLSPAN="2">Fusion des 2 colonnes</TD>
<TD>Pas de fusion(une seule colonne)</TD>
</TR>
<TR>
<TD>1<SUP>ère</SUP> colonne</TD>
<TD>2<SUP>ème</SUP> colonne</TD>
<TD>3<SUP>ème</SUP> colonne</TD>
</TR>
</TABLE>

Fusion de 2 colonnes
Fusion des 2 colonnes Pas de fusion(une seule colonne)

1^ère colonne 2^ème colonne 3^ème colonne

Changer la couleur de fond

Pour changer la couleur, c'est la même extension que pour <BODY> à savoir <TABLE BGCOLOR="couleur en anglais ou en code html (par defaut blanc) ">.

<TABLE BGCOLOR="orange">
<TR>
<TD>Fond en gris</TD>
</TR>
</TABLE>

Fond en orange

Mettre une image d'arrière plan

Tout comme pour la couleur de fond, c'est la même extension que pour <BODY>. C'est donc <TABLE BACKGROUND="adresse+image">.

<TABLE BACKGROUND="images/ver.gif">
<TR>
<TD>
Hooo un ver</TD>
</TR>
</TABLE>

Hooo un ver

Changer l'espace entre les cellules

Changer l'espace entre plusieurs cellules est une extension de <TABLE>. C'est <TABLE CELLSPACING="nombre de pixels">.

<TABLE BORDER="1" CELLSPACING=20>
<TR>
<TD>L'espace entre les</TD>
<TD>cellules est de 20 pixels</TD>
</TR>
</TABLE>

L'espace entre les cellules est de 20 pixels

Changer le retrait du contenu d'une cellule par rapport à sa bordure

La aussi c'est une extension de <TABLE>. C'est <TABLE CELLPADDING="nombre de pixels">.

<TABLE BORDER="1" CELLPADDING=20>
<TR>
<TD>L'espace entre la bordure</TD>
<TD>et les cellules est de 20 pixels</TD>
</TR>
</TABLE>

L'espace entre la bordure et les cellules est de 20 pixels

Pour finir n'oublier pas que tous les codes sont mélangeables, c'est ça le HTML :)

C'est

fini

Explode ID: 11223