Vendredi 30 juin 2006
Deux façons de réaliser un tableau :
La première : grâce à la barre d'outils de l'éditeur OverBlog
| A | En cliquant sur A, vous créez le tableau dans ces grandes lignes : nombre de colonnes, de lignes, largeur, bordures |
| B | En cliquanr sur B, vous peaufinez les propriétés des lignes : alignement, hauteur, fond... |
| C | En cliquant sur C, vous peaufinez les propriétés de la cellule (croisement d'une colonne et d'une ligne) : alignement, largeur, hauteur, fond |
| D | En cliquant sur D, vous insérez une ligne au-dessus |
| E | En cliquant sur E, vous insérez une ligne en-dessous |
| F | En cliquant sur F, vous supprimez la ligne |
| G | En cliquant sur G, vous insérez une colonne avant |
| H | En cliquant sur H, vous insérez une colonne après |
| I | En cliquant sur I, vous supprimez la colonne |
| J | En cliquant sur J, vous scindez les cellules fusionnées |
| K | En cliquant sur K, vous fusionnez les cellules |
La seconde : en HTML
Il est intéressant de connaître les termes utilisés en HTML dans la réalisation d'un tableau pour aller plus loin dans la personnalisation.
Voici votre tableau en mode normal :
Ce qui donne en mode source
<table width="300" height="100" cellspacing="1" cellpadding="1" border="1" align="center">
<tbody>
<tr>
<td bgcolor="#f5f5dc" bordercolor="000033"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td bgcolor="#f5f5dc" bordercolor="000033"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Table : Insertion d'un tableau
Width : Largeur
Height : Hauteur
Cellspacing : Espace entre les cellules du tableau
Cellpading : Espace entre le texte et le bord des cellules
Border : Epaisseur de la bordure du tableau
Align : Alignement horizontal du contenu de la cellule
Tr: Insertion d'une ligne
Td: Insertion d'une cellule
Bgcolor : Couleur du fond
Bordercolor : Couleur des bordures
Colspan : Réunion de plusieurs cellules en largeur
Rowspan : Réunion de plusieurs cellules en hauteur
Valign : Alignement vertical du contenu de la cellule
Concrètement :
Vous voulez un tableau de :
- largeur 300px : width="300"
- hauteur 100p x : height="100"
- espacement entre les cellules 1px : cellspacing="1"
- espacement entre le texte et la borduer 1px : cellpadding="1"
- épaisseur de bordure 1px : border="1"
- alignement centré du tableau : align="center"
- <tr> </tr>
- <td> </td>
- y mettre un fond : bgcolor="#f5f5dc"
- y mettre une bordure : bordercolor="000033"
<table width="300" height="100" cellspacing="1" cellpadding="1" border="1" align="center">
<tbody>
<tr>
<td bgcolor="#f5f5dc" bordercolor="000033"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td bgcolor="#f5f5dc" bordercolor="000033"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
A voir :
- Mettre une texture en fond dans un tableau
- Mettre une couleur en fond dans un tableau
- Mettre une couleur en fond dans une cellule de tableau
A quoi peut bien servir un tableau ?
Outre l'utilisation habituelle (tableau chiffré...), il peut être utile pour faire
- une liste sur 2 ou plusieurs colonnes : une traduction, par exemple, comme pour ce poème
| Had I the heaven's embroidered cloths | Si je pouvais t'offrir le bleu secret du ciel |
| Enwrought wtih golden and silver light | Brodé de lumière d'or et de reflets d'argents |
| the blue and the dim and the dark cloths | Le mystérieux secret, le secret éternel |
Une autre utilisation du tableau : vous voulez mettre plusieurs images sur la même ligne, vous créez un tableau et vos images dans les cellules. Ainsi :
|
|
|
|
|
|
- Un menu..
Commentaires