Forum de Test

Design en cours.
 
AccueilFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Les tableaux

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Ilsé
>> Fondatrice <<
avatar

Nombre de messages : 209
Age : 24
Localisation : DTC
Date d'inscription : 20/10/2006

MessageSujet: Les tableaux   Sam 30 Mar - 17:43

    Je commence par expliquer le tableau de base.


    Code:
    <table style="width: 100%; border-collapse:collapse; border:1px solid #FFFFFF;">
        <tr style="border:1px solid #FFFFFF;">
            <td style="border:1px solid  #FFFFFF;">contenu 1</td>
            <td style="border:1px solid  #FFFFFF;">contenu 2</td>
        </tr>
        <tr style="border:1px solid #FFFFFF;">
            <td style="border:1px solid  #FFFFFF;">contenu 3</td>
            <td style="border:1px solid  #FFFFFF;">contenu 4</td>
        </tr>
    </table>

    Ce qui donne :

    Spoiler:
     

    Code:
    <table style="width: 100%; border-collapse:collapse; border:1px solid #FFFFFF;"></table>

    Te donne les informations générales du tableau. Ainsi, tu aura une table pour encadrer un texte avec une bordure de 1 pixel, solide ( donc pleine ) et de couleur blanche.
    Tu peux modifier la taille ( width ) et la bordure sans problèmes. Fais des tests !

    Code:
    <tr></tr>
    Te donne une rangée ( ou colonne, je confonds toujours les deux termes :s ) du tableau.

    Quant à
    Code:
    <td></td>
    , il te donne une colonne ( ou rangée, pour le même problème qu'au dessus xD ).

    Code:
    style="border:1px solid  #FFFFFF;"

    Ici, il n'y a que des informations sur la bordure : largeur en pixel, style ( pleine ) et couleur.
    Tu rajoutes des td et des tr autant que tu veux mais ils vont toujours ensemble ( ou alors, tu n'a pas de séparations ). Tu peux aussi retirer la bordure, ce qui sépare ton texte sans ligne. Exemple :

    Spoiler:
     



    Pour règler la taille, il faut juste l'ajouter pour que l'ordinateur comprenne ce que tu veux. Je te conseille deux codes, tout simples, pour ça.

    WIDTH : La propriété "width" indique la largeur d'un bloc. Se note en pixels.


    HEIGHT : La propriété "height" indique la hauteur d'un bloc. En pixels aussi.

    En son absence comme le contenu est prioritaire, l'élément "contenant le contenu" s'ajuste automatiquement et sa valeur est considérée comme étant "auto".

    Pour avoir deux parties différentes dans ton tableau :

    Code:
    <table style="width: 100%; border-collapse:collapse; border:1px solid #FFFFFF;">
        <tr style="border:1px solid #FFFFFF;">
            <td style="border:1px solid  #FFFFFF; width:10px">contenu 1</td>
            <td style="border:1px solid  #FFFFFF; width:100px">contenu 2</td>
        </tr>
        <tr style="border:1px solid #FFFFFF;">
            <td style="border:1px solid  #FFFFFF;">contenu 3</td>
            <td style="border:1px solid  #FFFFFF;">contenu 4</td>
        </tr>
    </table>

    Donne :

    Spoiler:
     

    Et bien sûr, on peut décorer les tableaux comme on veut ! Il suffit de connaître les codes basiques ^^


    Un exemple ? J'vais mettre une texture dans toutes les cases Very Happy



    Code:
    <table style="width: 100%; border-collapse:collapse; border:1px solid #FFFFFF; background-image:url(http://i63.servimg.com/u/f63/09/03/76/30/012dn010.jpg);">
        <tr style="border:1px solid #FFFFFF;">
            <td style="border:1px solid  #FFFFFF; width:10px">contenu 1</td>
            <td style="border:1px solid  #FFFFFF; width:100px">contenu 2</td>
        </tr>
        <tr style="border:1px solid #FFFFFF;">
            <td style="border:1px solid  #FFFFFF;">contenu 3</td>
            <td style="border:1px solid  #FFFFFF;">contenu 4</td>
        </tr>
    </table>

    Spoiler:
     

    Pour en mettre dans une case seulement, il fallait placer la texture dans un td ou un tr ^^



    Si vous avez des questions, n'hésitez pas !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://revedecrivain.kanak.fr
 
Les tableaux
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» tableaux abstrait
» maroc : tableaux delacoix 1845
» [Iraq] Tableaux Artistiques à base de Timbres
» Avis de marché - Troyes (10) - restauration de tableaux - église St Nizier (2 lots)
» Mes tableaux de art academy DS

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum de Test :: School & Shop :: Tutoriels-
Sauter vers: