Apprentissage de Hot Potatoes™

Utilisation du HML : insertion d'un tableau

Mise en forme d'un tableau

Exemples de mise en forme avec le HTML

Pour la balise table, il est possible d'ajouter les informations suivantes :

- border : épaisseur de la bordure du tableau (en pixel),

- bordercolor : couleur de la bordure,

- bgcolor : couleur du fond du tableau,

- align : alignement du tableau par rapport à la page,

- cellspacing : distance entre les cellules (en pixel),

- cellpadding : distance entre le contnu et le bord des cellules (en pixel),

- width : largeur du tableau (en pixel)...

 

Pour la balise tr, il est possible d'ajouter les informations suivantes :

- border : épaisseur de la bordure du tableau (en pixel),

- align : alignement du contenu de la cellule dans la cellule,

- width : largeur du tableau (en pixel),

- bgcolor : couleur du fond du tableau...

 

Code HTML Résultat affiché

<table border="4" cellspacing="10" cellpadding="4" bgcolor="#0000DD">

<tr>

<td bgcolor="#FF0000">A1</td>

<td width="60">B1</td>

</tr>

<tr>

<td bordercolor="#FF0000">A2</td>

<td align="center">B2 </td>

</tr>

</table>
A1 B1
A2 B2

 

Exemples de mise en forme avec les styles

L'utilisation des styles pour la mise en forme offre plus de possibilités. Cependant, elle est d'un abord plus complexe.

 

Code HTML Résultat affiché

<table cellspacing="0">

<tr>

<td style="width:30px"> </td>

<td style="width:50px; text-align:center; border:#FF0000 solid 1px; background-color:#6666FF">A</td>

<td style="width:50px; text-align:center; border:#FF0000 solid 1px; background-color:#6666FF">B</td>

</tr>

<tr>

<td style="text-align:center; border:#FF0000 solid 1px; background-color:#6666FF">1</td>

<td style="border:#FF0000 solid 1px; background-color:#CCCCFF">case A1</td>

<td style="border:#FF0000 solid 1px; background-color:#CCCCFF">case B1</td>

</tr>

</table>
  A B
1  case A1 case B1 

 

 

Mis à jour le 20/11/09