[DOC] Télécharger cours pour langage HTML | Télécharger PDF

(1)

Les tableaux

1. Dans quels cas utiliser les tableaux ? 2. Les balises de base

3. Que mettre dans un tableau 4. Taille du tableau et des cellules

5. Alignement du tableau et des cellules 6. Bordures, espacements et marges 7. Fusionner lignes et colonnes. 8. Couleur et image de fond 9. Encore plus...

Dans quels cas utiliser la balise

<TABLE>

?

En premier lieu pour mettre en forme des tableaux de données mais aussi et surtout pour mettre en page son propre site web. En effet, on a tous eu besoin d'écrire du texte sur plusieurs colonnes, d'aligner des paragraphes avec des images... En HTML, la balise <TABLE> permet de faire de la

véritable mise en page et de construire des pages farfelues comme d'autres très sérieuses et rigoureuses. Toute charte graphique stricte comme fantaisiste a longtemps nécessité l'emploi des tableaux. Mais avec l'apparition des blocs DIV et des feuilles de styles, on peut désormais s'en passer.

Les balises de base

Le tableau se défini grace à la balise <TABLE> qui doit absoluement être

refermée : </TABLE>. Les navigateurs internet chargent d'abord entièrement

le tableau avant de l'afficher, c'est pourquoi il ne faut surtout pas oublier de refermer la balise <TABLE> car sinon votre tableau ne sera pas vu par les

internautes. Il est également important de ne pas mettre en ligne des tableaux trops volumineux, préférez toujours plusieurs petits tableaux plutôt qu'un seul très gros et long à charger.

Comme dans un tableur, on parle de cellules constitutives d'un tableau. C'est-à-dire que l'intersection d'une colonne avec une ligne donne une cellule. Un tableau peut contenir une seule cellule, c'est-à-dire une seule colonne et une seule ligne ou bien autant de cellules que vous voudrez

(2)

sachant que le nombre de colonnes peut être différents du nombre de lignes. On commencera dès maintenant à mettre une bordure aux tableaux pour les visualiser dans nos exemples grace à l'atributBORDER.

Il faut commencer par ouvrir une balise <TR> pour commencer une ligne et

la refermer </TR> pour terminer la ligne. Mais cela ne suffit toujous pas à la

création d'un tableau car il faut également définir les colonnes. Et là, c'est un peu moins facile puisqu'il faut insérer entre les balises lignes autant de couple correspondant à la colonne qu'il y a de colonnes. Le

couple <TD> et </TD> correspond à la colonne. A l'intérieur d'une ligne

(couple <TR> </TR>), il faut placer autant de couples<TD> </TD> qu'il y a de

colonnes dans le tableau. Attention ! il faut donc mettre un même nombre de colonnes dans chaque ligne.

Tableau minimal

Exemple de tableau à une seule cellule :

<TABLE BORDER> <TR><TD>une seule cellule</TD></TR> </TABLE>

une seule cellule

Lignes du tableau

Exemple de tableau à deux lignes et une colonne (deux cellules) :

<TABLE BORDER> <TR><TD>première ligne</TD></TR> <TR><TD>deuxième ligne</TD></TR> </TABLE> première ligne deuxième ligne Colonnes du tableau

Exemple de tableau à une ligne et deux colonnes (deux cellules) :

<TABLE BORDER> <TR><TD>première colonne</TD><TD>deuxième colonne</TD></TR> </TABLE> première colonne deuxième colonne

Exemple de tableau à trois lignes et deux colonnes (six cellules) :

(3)

<TR><TD>ligne 1, colonne1</TD><TD>ligne1, colonne2</TD></TR> <TR><TD>ligne 2, colonne1</TD><TD>ligne 2, colonne2</TD></TR> <TR><TD>ligne 3, colonne1</TD><TD>ligne 3, colonne2</TD></TR> </TABLE> colonne1 colonne2 ligne 2,

colonne1 ligne 2, colonne2 ligne 3,

colonne1

ligne 3, colonne2 Légende du tableau

L'envie peut vous prendre, pour un tableau de valeur, de lui donner une légende. Utilisez alors le couple : <CAPTION> </CAPTION> dont

l'attribut ALIGN peut avoir comme valeur TOP : légende en haut du tableau

(par defaut) ou BOTTOM : légende en bas du tableau. La légende d'un

tableau est automatiquement centrée et en style par défaut.

Exemple de tableau avec une légende en haut :

<TABLE BORDER> <CAPTION>légende en haut</CAPTION> <TR><TD>première ligne</TD></TR> <TR><TD>deuxième ligne</TD></TR> </TABLE> légende en haut première ligne du tableau deuxième ligne du tableau

Exemple de tableau avec une légende en bas:

<TABLE BORDER> <CAPTION ALIGN="bottom">légende en bas</CAPTION> <TR><TD>première ligne</TD></TR> <TR><TD>deuxième ligne</TD></TR> </TABLE>

première ligne du tableau deuxième ligne du tableau

légende en bas

Légendes des colonnes

Il peut vous être nécessaire d'attribuer une légende à chacune de vos colonnes, procédez avec le couple <TH> </TH> que vous utliserez comme

remplaçant de la colonne. Mais il vous faudra rajouter dans votre

marquage une ligne virtuelle puisque ce couple simulant la colonne doit être placé dans une ligne. Ces légendes sont automatiquement centrées verticalement et horizontalement dans les cellules et en style gras.

Exemple de tableau deux colonnes légendées :

(4)

<TR><TH>colonne 1</TH><TH>colonne 2</TH></TR> <TR><TD>ligne1, colonne1</TD><TD>ligne1, colonne2</TD></TR> <TR><TD>ligne2, colonne1</TD><TD>ligne2, colonne2</TD></TR> </TABLE> ligne1, colonne1 ligne1, colonne2 ligne2, colonne1 ligne2, colonne2

Que mettre dans un tableau

Un tableau peut contenir du texte, des images, des vidéos, des

formulaires, d'autres tableau... Presque toutes les balises HTML peuvent êtres inclusent dans une cellule : la mise en forme avec <FONT>, des images

avec <IMG>, des formulaires avec <FORM>, etc.

Exemple de tableau contenant texte et image :

<TR><TD>Le <B>CyberZoïde</B> Qui Frétille</TD></TR> <TR><TD><IMG SRC="../images/index.gif"></TD></TR> </TABLE> Le CyberZoïde Qui Frétille

Taille du tableau et des cellules

Taille du tableau

Vous avez sans doute remarqué avec les exemples précédents que la taille des tableaux varie sans qu'il soit spécifier d'attribut correspondant. En fait, le navigateur calcul de manière automatique la taille du tableau selon la loi du meilleur est le minimum. La taille du tableau sera d'autant plus grande que celle des cellules le sont.

On peut tout de même forcer le navigateur à donner telle ou telle taille au tableau. Cette taille est exprimée au choix en pixel ou en pourcentage de l'espace libre dans la fenêtre. Vous pouvez donc spécifier de manière précise la largueur : WIDTH=x et la hauteur : HEIGHT=y de votre tableau en

sachant pertinament que le navigateur calcule la taille des cellules en conséquence. Il vous est tout a fait possible de ne spécifier qu'une seule de ces dimensions ou même aucune. Ces deux attributs sont valables pour les balises <TABLE>, <TH>, et <TD>.

(5)

<TR><TD>Le CyberZoïde Qui Frétille</TD></TR> <TR><TD><IMG

SRC="../images/index.gif"></TD></TR> </TABLE>

Le CyberZoïde Qui Frétille

Exemple de tableau ayant une taille de 300x100 pixels :

<TR><TD>Le CyberZoïde Qui Frétille</TD></TR>

<TR><TD><IMG

SRC="../images/index.gif"></TD></ TR>

</TABLE>

Exemple de tableau ayant une taille relative de 30% en largueur :

<TABLE BORDER WIDTH=30%> <TR><TD>Le CyberZoïde Qui Frétille</TD></TR>

<TR><TD><IMG

SRC="../images/index.gif"></TD></TR> </TABLE>

Taille des cellules

De la même manière que l'on peut fixer la taille d'un tableau, on peut en faire autant de chaque lignes et colones, sachant que si le tableau lui-même n'a pas de dimensions fixées, le navigateur calculera

automatiquement sa taille en fonction des cellules. Si on spécifie la

hauteur d'une cellule, toutes les autres cellules de la même ligne auront la même hauteur. Si on spécifie la largeur d'une cellule, toutes les autres cellules de la même colonne auront la même largueur.

Exemple :

<TR><TD>Hello every body on this world ! </TD> <TD>Bonjour !</TD></TR> <TR><TD WIDTH=60 HEIGHT=150>cellule de 60x150 pixels</TD> <TD> </TD></TR> </TABLE>

Hello every body on this world !

Bonjour !

(6)

Alignement du tableau et des cellules

Alignement du tableau

On peut aligner le tableau horizontalement grace à l'attribut ALIGN qui peut

avoir pour valeur : LEFT, MIDDLE et RIGHT qui ont pour effets respectifs

d'aligner le tableau à gauche, au milieu ou à droite dans la page, ce premier étant l'alignement par défaut.

Exemples :

<TABLE BORDER ALIGN="left"> <TR><TD>CyberZoïde</TD></TR> </TABLE> <TABLE BORDER ALIGN="middle"> <TR><TD>CyberZoïde</TD ></TR> </TABLE> CyberZoïde

<TABLE BORDER ALIGN="right"> <TR><TD>CyberZoïde</TD></TR> </TABLE>

Alignement des cellules

En plus d'aligner le tableau au sein de la page, il nous est offert de pouvoir aligner les données à l'intérieur des cellules grace aux attributs ALIGN pour

l'alignement horizontal et VALIGN pour la verticale. Ce premier peut avoir

pour valeurs : LEFT (aligné à gauche, par defaut), CENTER (centré

horizontalement) et RIGHT (aligné à droite). Le deuxième peut se voir

affecter les valeurs suivantes : TOP (aligné en haut), MIDDLE (centré

verticalement, par defaut), BOTTOM (aligné en bas) etBASELINE (basé sur la

ligne) .

Exemples :

<TR><TD>alignement par défaut</TD> <TD VALIGN="top">aligné en haut</TD></TR> <TR><TD ALIGN="left">aligné à gauche</TD> <TD VALIGN="middle">centré verticalement</TD></TR> <TR><TD ALIGN="center">centré horizontalement</TD> alignement par défaut aligné en haut aligné à gauche (par défaut) centré verticalement (par défaut) centré

horizontalement aligné en bas aligné à droite basé sur la ligne

CyberZoïde CyberZoïde

(7)

<TD VALIGN="bottom">aligné en bas</TD></TR> <TR><TD ALIGN="right">aligné à droite</TD> <TD VALIGN="baseline">basé sur la ligne</TD></TR> </TABLE>

Bordures, espacements et marges

Bordures du tableau

Dès le début de cette page, nous n'avons utiliser que des exemples ou les tableaux avaient une bodure définie par l'attribut BORDER auquel on ne

donna aucune valeur (par défaut, c'est la valeur 1 qui lui est donné). Il est tout à fait envisageable de ne pas mettre de bordure à un tableau en ne spécifiant pas l'attributBORDER ou en lui donnant la valeur zero. On peut

aussi préférer une bordure plus grosse d'une épaisseur exprimée en pixels selon la syntaxe : BORDER=d. A noter que la bordure interne aux cellules

n'est pas modifiable.

Exemples : <TABLE> <TR><TD>ligne 1, colonne1</TD><TD>ligne1, colonne2</TD></TR> <TR><TD>ligne 2, colonne1</TD><TD>ligne 2, colonne2</TD></TR> <TR><TD>ligne 3, colonne1</TD><TD>ligne 3, colonne2</TD></TR> </TABLE> ligne 1,

colonne1 ligne 1, colonne2 ligne 2, colonne1 ligne 2, colonne2 ligne 3, colonne1 ligne 3, colonne2 <TABLE BORDER> <TR><TD>CyberZoïde</TD ></TR> </TABLE> CyberZoïde <TABLE BORDER=1> <TR><TD>CyberZoïde</TD ></TR> </TABLE> CyberZoïde <TABLE BORDER=3> <TR><TD>CyberZoïde</TD ></TR> </TABLE> CyberZoïde <TABLE BORDER=20> <TR><TD>CyberZoïde</TD ></TR> CyberZoïde

(8)

</TABLE>

La couleur de bordure est automatiquement conditionnée par les paramètres Windows mais on peut la modifier à notre guise grace à l'attribut BORDERCOLOR(couleur générale dont le caractère ombrée en

découlera). Exemples : <TABLE BORDER=5 BORDERCOLOR="red"> <TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER=10 BORDERCOLOR="#FFFF00"> <TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille

Espacement entre cellules

Par souci de clarté, on peur vouloir espacer les cellules grace à

l'attribut CELLSPACING=n dont la valeur n définit l'espacement en pixels entre

chaque cellules d'un tableau. Par defaut, n=2.

Exemples :

<TABLE BORDER CELLSPACING=0> <TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER CELLSPACING=1>

<TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER CELLSPACING=2>

<TR><TD>Le</TD><TD>CyberZoïde< /TD></TR>

<TR><TD>Qui</TD><TD>Frétille</TD

(9)

></TR> </TABLE>

<TABLE BORDER CELLSPACING=5> <TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER=2 CELLSPACING=20>

<TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille

Marges internes aux cellules

On peut également spécifier des marges à l'intérieur des cellules afin d'espacer les données du bord des cellules grace à l'attribut CELLPADDING=q

dont la valeur q est exprimé en pixels. Par defaut, q=1.

Exemples :

<TABLE BORDER CELLPADDING=0> <TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER CELLPADDING=1>

<TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER CELLPADDING=5>

<TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille

<TABLE BORDER=2 CELLPADDING=20> <TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille

(10)

Fusionner lignes et colonnes.

Un atout très intéressant : pouvoir fusionner des cellules au niveau d'une ligne ou d'une colonne ou même les deux grace aux attributs

respectifs COLSPAN=x etROWSPAN=y où x et y représentent le nombre de

cellules à fusionner sur l'axe des lignes ou des colonnes. Ces attributs sont valables pour les balises <TD> et <TH>. Attention ! surtout ne pas oublier de

ne pas écrire le couple <TD> </TD> correspondant à une cellule que l'on

aura fusionnée avec une autre écrite précédement.

Exemples : <TABLE BORDER> <TR><TD ROWSPAN=2>Le</TD><TD>CyberZoïde</TD></ TR> <TR><TD>Qui Frétille</TD></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER> <TR><TD COLSPAN=2>Le CyberZoïde</TD></TR> <TR><TD>Qui</TD>Frétille</TD></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER> <TR><TD COLSPAN=3>o</TD><TD>o</TD></TR> <TR><TD ROWSPAN=3>o</TD><TD>o</TD><TD>o</TD><TD>o< /TD></TR> <TR><TD>o</TD><TD COLSPAN=2 ROWSPAN=2>o</TD></TR> <TR><TD>o</TD></TR> </TABLE> o o o o o o o o o

Couleur et image de fond

Couleur de fond de tableau et de cellule

Il est également permis de mettre une couleur de fond à un tableau ou à une cellule grace à l'attribut BGCOLOR dont la valeur est soit le code

hexadécimal correspondant, soit l'identifiant anglophone.

Exemples :

(11)

BGCOLOR="#C0C0C0"> <TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Qui Frétille

<TABLE BORDER BGCOLOR="red"> <TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER=0 BGCOLOR="red">

<TR><TD>Le</TD><TD>CyberZoïde< /TD></TR> <TR><TD>Qui</TD><TD>Frétille</TD ></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER=0 CELLSPACING=0

BGCOLOR="red"> <TR><TD>Le</TD><TD>CyberZoïde</TD ></TR> <TR><TD>Qui</TD><TD>Frétille</TD></ TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER> <TR><TD BGCOLOR="yellow">Le</TD><TD BGCOLOR="white">CyberZoïde</TD></TR> <TR><TD BGCOLOR="green">Qui</TD><TD BGCOLOR="pink">Frétille</TD></TR> </TABLE> Le CyberZoïde Qui Frétille

Image de fond de tableau et de cellule

Il est également permis de mettre une image de fond à un tableau (totalité des cellules) ou à une seule cellule (ou plusieurs) grace à

l'attribut BACKGROUND dont la valeur est l'URL du fichier image.

Exemples :

<TABLE BORDER CELLPADDING=10 BACKGROUND="image.gif"> <TR><TD><FONT COLOR="white"><B>Le CyberZoïde</TD></TR> <TR><TD><FONT COLOR="white"><B>Qui Frétille</TD></TR> </TABLE> Le CyberZoïde Qui Frétille

(12)

<TABLE BORDER CELLPADDING=10 BGCOLOR="black"> <TR><TD BACKGROUND="image.gif"><FONT COLOR="white"><B>Le CyberZoïde</TD></TR> <TR><TD><FONT COLOR="white"><B>Qui Frétille</TD></TR> </TABLE> Le CyberZoïde Qui Frétille

Encore plus...

Si vous mettez du texte ou des balises entre deux balises </TD>

<TD> ou </TR> <TR>, alors ils seront interprétés mais hors du tableau (avant

le tableau).

Chaque style appliqué au texte d'une cellule ne se répercute pas au reste du tableau. C'est-à-dire que les attributs des balises <FONT>, <P>, etc.

utilisées dans une cellule ne sont plus valables pour les autres cellules. Il vous faudra alors insérer ces balises de mises en forme dans chacune des cellules du tableau si votre charte graphique le nécessite.

Si une ou plusieurs de vos cellules ne contiennent aucune donnée, insérez-y tout de même un espace sinon la cellule apparaitra sans bordure.

Exemples : <TABLE BORDER> <TR><TD>Le CyberZoïde</TD><TD>Qui</TD></TR> <TR><TD>Frétille</TD><TD></TD></TR> </TABLE> Le CyberZoïde Qui Frétille <TABLE BORDER> <TR><TD>Le CyberZoïde</TD><TD>Qui</TD></TR> <TR><TD>Frétille</TD><TD> </TD></TR > </TABLE> Le CyberZoïde Qui Frétille

Maintenant vous savez tout. En combinant tout ce que vous avez vu ci-haut, vous pouvez faire une mise page du tonnerre.

Exemple :

<TR><TD BGCOLOR="#FFFFB0"><I>La bordure d'un tableau</I></TD><TD BGCOLOR="#FFFFB0" ALIGN="right"><CODE>TABLE</CODE></TD></TR> <TR><TD COLSPAN=2>faites comme ça...</TD></TR>

(13)

La bordure d'un tableau TABLE