Les tableaux



    Rejoingez moi sur Google+ Rejoingez moi sur Facebook

Les tables en html permettent de présenter simplement et facilement une suite d'éléments dans un ordre définit

Les balises

Les principales balises sont:
<TABLE> et >/TABLE> pour l'ouverture et la fermeture de la table.
<TR> et </TR> pour l'ouverture et la fermeture d'une rangée.
<TD> et </TD>pour l'ouverture et la fermeture d'une cellule. Les cellules peuvent contenir du texte, des chiffres, des images, des liens et même d'autres tables.
<table><tr><td> et </td></tr></table> sont utilisés dans cet ordre.

Exemples

Table a 4 cellules identiques
l'attribut BORDER definit une bordure, il exprimé en pixels:
<table border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

ce qui donne avec 1:
12
34
ce qui donne avec 3:
12
34
ce qui donne avec 10:
12
34

L'attribut CELLSPACING permet d'incérer un espace entre les cellules , il est exprimé en pixels

<table border="1" cellspacing="10" >
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
ce qui donne :
12
34

L'attribut CELLPADDING permet d'incérer un espace à l'interieur des cellules , il est exprimé en pixels

<table border="1" cellpadding="10" >
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
ce qui donne :
12
34

Les cellules

La grandeur des cellules se règle par défaut, on doit souvent indiquer la largeur surtout si les élément des cellules ne sont de grandeur identique.
L'attribut Width est utilisé, sa valeur s'exprime en pixels ou en pourcentage.

Prenons un exemple:
<table border="1" widthg="60%">
<tr><td >Grande cellule </td>
<td >cellule</td>
<td>3</td>
</tr></table>
ce qui donne

Grande cellule cellule 3

Avec width:
<table border="1" widthg="60%" >
<tr><td width="33% >Grande cellule </td>
<td width="33% >cellule</td>
<td width="34%">3</td>
</tr></table>
cela donne

Grande cellule cellule 3

Dans une colonne les cellules auront toutes la même largeur, même si elle est précisée qu'une fois .
Exemple:
<table border="1" widthg="60%" >
<tr><td width="35%">Grande cellule </td>
<td width="35%">cellule</td>
<td width="30%">3</td>
</tr><tr><td >Grande cellule </td>
<td >cellule</td>
<td>3</td>
</tr></table>
cela donne

Grande cellule cellule 3
Grande cellule cellule 3

L'attribut COLSPAN permet de fusionner les cellules horizontalement, sa valeur est un chiffre qui indique le monbre de cellules à fusionner:
exemple:
<table border="1" width="60%" >
<tr><td width="35%">Grande cellule </td>
<td colspan="2" >cellule</td>
</tr><tr><td width="35%">Grande cellule </td>
<td width="35%">cellule</td>
<td>3</td>
</tr></table>
cela donne

Grande cellule cellule
Grande cellule cellule 3

L'attribut ROWSPAN permet de fusionner les cellules verticalement sa valeur est un chiffre qui indique le monbre de cellules à fusionner:
exemple:
<table border="1" widthg="60%" >
<tr><td width="35%" rowspan="2">Grande cellule </td>
<td colspan="2">cellule</td>
</tr><tr>
<td width="35%">cellule</td>
<td>3</td>
</tr></table>

Grande cellule cellule
cellule 3

 

Les tables peuvent êtres utilisées pour les dessins

 

 
   
     
     
     
     
     
     
     
     
     
 
 
 
 
 
 
 
 
 
 

 


<<Précédent | Retour Tutos | Retour HTML| Suivant>>

 








 

© Copyright 2005 - 2013 Kit-GraphiK.com  
Designed By : Template World