Tableau : création et utilité

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">&nbsp;</td>
            <td>&nbsp;</td>
            </tr>
       <tr>
            <td>&nbsp;</td>
         <td>&nbsp;</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"

Vous voulez créer une ligne :

• <tr>&nbsp; </tr>

Vous voulez créer une cellule :

• <td>&nbsp;</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">&nbsp;</td>
            <td>&nbsp;</td>
            </tr>
       <tr>
            <td>&nbsp;</td>
         <td>&nbsp;</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

He wishes for the clothes oh heaven

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..