les tableaux

Bienvenue chez iciyatou ===>ICI VOUS COURS DE HTML POUR R é a l i s e r des tableaux...;)

R é a l i s e r s a p a g e W e b

Pour réaliser un tableau, on utilise les balises <table> et </table>.
<tr> et </tr> : sont utilisés pour définir le début et la fin d'une ligne de tableau (table row). <td> et </td> : Pour définir le début et la fin du contenu d'une cellule (table data). A noter qu'il n'existe pas de balises correspondant aux colonnes (sauf dans le cas de fusion de cellules avec la balise colspan).

Exemple : <table border="1"><tr><td>Le contenu du tableau</td></tr></table>

Voici les différents attributs possibles de la balise <table>
border="valeur" (taille du cadre autour du tableau, si border="0" pas de cadre).
cellspacing="valeur" (par défaut = 2. C'est l'espace entre deux cellules).
cellpadding="valeur" (par défaut = 1. C'est l'espace entre le bord d'une cellule et son contenu).
width="valeur ou pourcentage de la largeur". Exemple: width="100%"
height="valeur ou pourcentage de la hauteur".
align="center". L'allignement horizontal du tableau dans la page (center, left ou right).

Attribut possible de la balise <td>:
valign="top". L'allignement vertical du contenu d'une cellule (top, midlle ou bottom).

 Les cadres
Les cadres, plus connus sous le nom de frames, nous permettent de créer des fenêtres dans une page Web. Chacune de ces fenêtres contiendra une page Web indépendante.

Le document principal, devra contenir à la place des balises usuelles <body> et </body>,
une directive <frameset> et </frameset>.

Exemple:

<frameset cols="25%,75%">
<frame src="cadre_a.htm">
<frame src="cadre_b.htm">
</frameset>

Nous abordons ici la partie la plus délicate mais aussi la plus intéressante du point de vue de la présentation. Les tableaux permettent des possibilités d'alignement que les autres éléments du Html n'autorisent pas.

Balises de base

Définition du tableau	[Table]	<TABLE></TABLE>	Début et fin de tableau
Définition d'une ligne	[Table Row]	<TR></TR>	Début et fin de ligne
Définition d'une cellule	[Table Data]	<TD></TD>	Début et fin de cellule

Le marqueur <TABLE> initialise le tableau. Il possède tout un tas de paramètres qui peuvent donner ses caractéristiques. Par exemple, ici BORDER donne l'épaisseur du bord des cellules et du tableau.
La marqueur <TR>, lui, débute une ligne d'un tableau, le marqueur <TD> quant à lui débute une cellule. Un tableau à deux lignes et deux colonnes, et donc à quatre cellules se représente comme suit :

Les cellules

Avant toutes choses, les cellules peuvent contenir tous les éléments HTML déjà passés en revue, soit :

du texte
des images
des liens
des arrière-plans
et même des tableaux (eh oui!)

Bien que l'allure de votre tableau soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part qui a ses propres spécifications. Découvrons les balises.

Largeur d'une cellule	<TD width=x> en pixels
	<TD width=%> en pourcentage
Fusion de lignes	<TD rowspan=x>
Fusion de colonnes	<TD colspan=x>

Découvrons ceci par des exemples.

Je veux un tableau centré qui occupe 60% de la fenêtre avec, sur une ligne, trois colonnes égales. Essayons ceci :

<CENTER>
<TABLE width=60% border=1> <TR> <TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD> </TR> </TABLE>
</CENTER>

cellule1

cel. 2

Ou : <CENTER>
<TABLE width=60% border=1> <TR> <TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD> </TR> </TABLE>
</CENTER>

cellule1

cel. 2

Le même tableau mais avec 2 lignes : <CENTER>
<TABLE width=60% border=1> <TR> <TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR> <TR> <TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD> </TR> </TABLE>
</CENTER>

cellule1	cel. 2	3
cellule1	cel. 2	3

Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc déborder sur 3 cellules horizontales : cest de la fusion.

<CENTER>
<TABLE width=60% border=1> <TR> <TD colspan=3>cellule 1</TD> </TR>
<TR> <TD width=33%>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR> </TABLE>
</CENTER>

cellule 1
cellule 1	cel 2	3

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules verticales.

<CENTER>
<TABLE width=60% border=1> <TR> <TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR>
<TR> <TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR> </TABLE>
</CENTER>

cellule 1	cel 2	3
cellule 1	cel 2	3

Ligne de tableau	<TR align=left/center/right> <TR valign=top/middle/bottom>	horizontalement verticalement
Cellule de tableau	<TD align=left/center/right> <TD valign=top/middle/bottom>	horizontalement verticalement

A Titre d'exemple, reprenons le tableau suivant :

cellule 1
cellule 1	cel 2	3

Avec quelques aménagements, il devient : <CENTER>
<TABLE width=60% border=1> <TR> <TD colspan=3 align=center>Tarif au ../../..</TD> </TR>
<TR> <TD width=33% >Article 1</TD>
<TD width=33%>Ref 002 </TD>
<TD width=34% align=right>30fr</TD> </TR> </TABLE>
</CENTER>

Tarif au ../../..
Article 1	Ref 002	30fr

Il est également possible de changer la couleur de la cellule. Couleur de la cellule <TD BGCOLOR="#$$$$$$">Notre dernier exemple pourrait devenir : <TD colspan=3 align=center bgcolor="#000088">

Tarif au ../../..
Article 1	Ref 002	30fr

Attributs des balises <TABLE> <TR> et <TD>

Les paramètres du marqueur TABLE sont les suivants:

BGCOLOR="Couleur"indique la couleur de fond du tableau
ALIGN= LEFT | RIGHT, HSPACE et VSPACE ont la même signification que pour le marqueur IMG
CELLPADDING="Pixels" détermine la marge d'une cellule. Cette marge est la même de tous les cotés de chaque cellule.
CELLSPACING="Pixels" détermine la largeur en pixels entre chacune des cellule (à l'extérieur de la cellule).
WIDTH et HEIGHT sont censés donner la taille du tableau, soit en pixels, soit en pourcentage de la page.

Les paramètres du marqueur TR sont les suivants:

BGCOLOR="Couleur" indique la couleur de fond de la ligne
ALIGN= LEFT | RIGHT | CENTER indiquent l'alignement horizontal à l'interieur de chacune des cellules de la ligne (comme DIV
VALIGN= BOTTOM|MIDDLE|TOP indiquent l'alignement vertical, BOTTOM: aligné en bas, TOP aligné en haut et MIDDLE centré

Les principaux paramètres du marqueur TD sont les suivants:

BGCOLOR="Couleur" indique la couleur de fond de la cellule
ALIGN= LEFT | RIGHT | CENTERindiquent l'alignement horizontal à l'interieur de la cellule(comme DIV
VALIGN= BOTTOM|MIDDLE|TOPindiquent l'alignement vertical, BOTTOM: aligné en bas, TOP aligné en haut et MIDDLE centré
COLSPAN=x permet à une cellule d'occuper plusieurs colonnes consécutives. (voir exemple plus loin)
ROWSPAN=x permet à une cellule d'occuper plusieurs lignes consecutives (voir exemple plus loin)

A noter la présence d'un marqueur supplémentaire <CAPTION ALIGN=BOTTOM|TOP> qui permet de mettre un Titre au tableau. Son paramètre indique si le Titre doit être avant (TOP) ou après (BOTTOM) le tableau.

Comme vous avez pu le constater, ce site est fait de plusieurs colonnes :
La premiére pour le menu, la seconde pour le corp du site et la troisiéme pour les autres éléments

Comment réaliser ce genre de tableau :

Premiére balise a utilisé, la balise <table> qui se terminera par </table>

Voiçi quelques attributs que l'on peux rajouter :

border          =  pour définir la bordure du cadre
cellspacing    =  pour définir l'espacement horizontal
cellpadding   =  pour définir l'espacement vertical

Exemple :<table border=10 cellspacing=5 cellpadding=20>

Comment faire plusieurs lignes :

La balise a utilisé est <tr> puis se termine par </tr>

Exemple :

<table>
     <tr>
     </tr>
     <tr>
     </tr>
     etc...
</table>

Comment faire plusieurs colonnes :

La balise a utilisé est <td> puis se termine par </td>

Exemple :

<table>
<tr>
     <td>
     </td>
     <td>
     </td>
     etc...
</tr>
</table>

Voyons un exemple concret :

<table border=10 cellspacing=5 cellpadding=20 bordercolor=#003366 bgcolor=#6699FF>
     <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
     </tr>
     <tr>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
     </tr>
</table>

Ce qui nous donnent :

1	2	3	4	5
6	7	8	9	10

Cours précédent

Cours suivant

merci pour vous

cours HTML

SERIES TV

MANGAS

best REDIO