31 juil. 2010

Réaliser un tableau

Les tableaux sont utilisés pour mettre en forme des données, des images, des chiffres, pour créer des menus ... Ils sont une fonction incontournable.
Si le menu de votre éditeur ne vous propose pas la création de tableau, ce qui est le cas sur Blogger, voici comment le réaliser.

Voici un tableau en mode normal :






Le voici en HTML :
<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>

Ces tableaux peuvent être personnalisés : background, bordures, largeurs ...mais leur gestion n'est pas aussi souple qu'avec Excel.

Ci-dessous, quelques exemples de personnalisation courante :

Mettre un fond dans tout le tableau : <table style="background-color: #d8e2ec;">

Mettre un fond dans une ligne : <tr bgcolor="#ff6666">

Encadrer les cellules : <td style="border: 1px solid #cc0099;">
Mettre un fond dans une cellule : <td style="background-color: #d8e2ec;">
Pour fusionner 2 cellules d'une même ligne : <td colspan="2" >
Pour fusionner 2 cellules d'une même colonne : <td rowspan="2">

Traduction des termes :
Table : Insertion d'un tableau
Tr: Insertion d'une ligne
Td: Insertion d'une cellule

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
Bordercolor : Couleur des bordures
Bgcolor : Couleur du fond

Align : Alignement horizontal du contenu de la cellule
Valign : Alignement vertical du contenu de la cellule

Colspan : Réunion de plusieurs cellules en largeur
Rowspan : Réunion de plusieurs cellules en hauteur

Aucun commentaire:

Enregistrer un commentaire

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)