Les tableaux

Ligne 1 colonne 1 Ligne 1 colonne 2
Ligne 2 colonne 1 Ligne 2 colonne 2
<table width="500" border="1" cellspacing="0" cellpadding="5">
<tr>
<td width="50% height="50"">Ligne 1 colonne 1</td>
<td width="50% height="50">Ligne 1 colonne 2</td>
</tr>
<tr>
<td width="50%">Ligne 2 colonne 1</td>
<td width="50%">Ligne 2 colonne 2</td>
</tr>
</table

Explications

<table> et </table>

Les balises <table> et </table> définissent le début et la fin de votre tableau

Les attributs

width="500" Détermine la taille du tableau, ici dans notre exmple 500 pixels, elle peut aussi être définie en pourcentage
Ex : width="100%"
border="1" Détermine l'épaisseru de la bordure
cellspacing="0" Détermine l'écart entre les cellules
cellpadding="5" Détermine l'écart à l'intérieur d'une cellule

<tr></tr>

Ces balises déterminent les lignes de notre tableau

<td></td>

Ces balises représentent les cellules dans les lignes

Les attributs

width="50%" Détermine la largeur de la cellule, ici à 50%
height="40" Détermine la hauteur de la cellule, ici 40 px
bgcolor="#CCCCCC" Détermine la couleur de fond de la cellule
align="center"

Détermine l'alignement dans une cellule

Valeurs :
align="left"
align="center"
align="center"

valign="top"

Détermine l'alignement vertical

Valeurs :
valign="top"
valign="middle"
valign="bottom"
valign="baseline"

height Détermine la hauteur

Fusionner les cellules

Ligne fusionnée avec une couleur de fond jaune
Texte aligné au centre sur l'horizontale et en haut sur la verticale Texte aligné à droite sur l'horizontale et au milieu sur la verticale
Code:
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2" align="center" bgcolor="#FFCCFF">Cellules fusionn&eacute;es avec une couleur de fond jaune</td>
</tr>
<tr>
<td width="50%" height="59" align="center" valign="top">Texte align&eacute; au centre sur l'horizontale et en haut sur la verticale</td>
<td width="50%" align="right" valign="middle">Texte align&eacute; &agrave; droite sur l'horizontale et au milieu sur la verticale</td>
</tr>
</table>

Fusionner les colonnes

Colonne fusionnée  
 
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td width="50%" rowspan="2" bgcolor="#FFCCFF">Colonne fusionn&eacute;e</td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td width="50%">&nbsp;</td>
</tr>
</table>
Plan du site | Contact | Création LCFormateur
Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Referencement et Dictionnaire
Informatique Zen | Glam Bar | Formation webmaster  |  Formation bureautique  | Le Kervegan | Maintenance industrielle Nord
Fitness Valenciennes | Zumba Valenciennes | Test de personnalité | Recherche sur le cancer | Mise en plan 3D