Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    L'apprentissage du tableau htlm

    Partagez
    FémininAge : 24Message(s) : 476

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Skyleen
    le Mer 11 Déc 2013 - 18:44
    Qu'est-ce qu'un tableau Htlm ?


    Bonjour à tous et à toutes.
    Me revoilà parmi vous pour ce nouveau tutoriel qui va parler cette fois-ci des tableaux htlm. Qu’est-ce que c’est ? Vous le saurez dans les parties suivantes mais pas seulement ça! Vous apprendrez les différents effets que l'on peut faire avec et ainsi vous serrez surpris de voir à quel point on peut les retrouver n’importe où, mais surtout dans vos pages d’accueils.

    Qu’est-ce qu’un tableau htlm ?

    De mon point de vue, c’est une base de codage pour une structure d’une fiche, d’une page d’accueil, d’une Template mais surtout d’un site. Avant le css et sa feuille de style, il est important de connaitre les tableaux, leurs éléments et leurs codes pratiques qui peuvent vous faciliter la vie.
    Comment faire un tableau en htlm ?
    1 ••• Avant toute chose, il faut mettre la balise qui le représente <*table> ( sans étoiles sinon cela ne marchera pas.)
    2 ••• Pour faire une ligne, nous utilisons ceci : ( sans étoiles ). Tr signifie table row ( ligne du tableau ).
    3 ••• Pour faire une colonne, nous utilisons ceci : ( sans étoiles). Td signifie Table Data ( Données du tableau ).






    Ma première donnée Ma deuxième donnée

    Code:
    <table border="1">
    <tr>
    <td> Ma première donnée </td>
    <td> Ma deuxième donnée </td>
    </tr>
    </table>
    1 •••L’ajout d’un titre à votre tableau mettez : (sans étoiles)







    Le titre de mon tableau
    Ma première donnée Ma deuxième donnée

    Code:
    <table border="1">
    <caption> Le titre de mon tableau </caption>
    <tr>
    <td> Ma première donnée </td>
    <td> Ma deuxième donnée </td>
    </tr>
    </table>
    Voici ce qu’un tableau peu donné avec deux lignes ainsi vous verrez mieux la formation des éléments ajouté avec deux secondes cellules.












    Le titre de mon tableau
    Ma première donnée Ma deuxième donnée
    Ma troisième donnée Ma quatrième donnée

    Code:
    <table border="1">
    <caption> Le titre de mon tableau </caption>
    <tr>
    <td> Ma première donnée </td>
    <td> Ma deuxième donnée </td>
    </tr>
    <tr>
    <td> Ma troisième donnée </td>
    <td> Ma quatrième donnée </td>
    </tr>

    </table>
    On continue donc avec la seconde partie.

    LES ATTRIBUTS •••
    ▬ Align : Il permet d’aligner horizontalement notre balise
    Ces valeurs sont : Center , Left , Right et Justify







    Ma donnée 1 Ma donnée 2

    Code:
    <table align="center" border="1">

     <tr>
    <td> Ma donnée 1</td>
    <td> Ma donnée 2 </td>
    </tr>
    </table>
    ▬ Valign : Il a la même fonction que Align mais il les aligne verticalement.
    Ces valeurs sont : Top (haut), middle (milieu) et bottom (bas)











    Donnée 1 Donnée 2
    Donnée 3 Donnée 4

    Code:
    <table align="center" border="1">

    <tr>
    <td valign="top"> Donnée 1</td>
    <td> Donnée 2 </td>
    </tr>
    <tr>
    <td valign="bottom"> Donnée 3 </td>
    <td> Donnée 4 </td>
    </tr>
    </table>
    ▬ Border : Il représente les bords du tableau
    ▬ Cellpadding : Il représente l’espacement en pixel entre le contenu des cellules et la bordure.







    Donnée 1 Donnée 2

    Code:
    <table align="center" cellpadding="3" border="1">

     <tr>
    <td> Donnée 1</td>
    <td> Donnée 2 </td>
    </tr>
    </table>
    ▬ Cellspacing : Il correspond à l’épaisseur de la grille intérieure du tableau.







    Donnée 1 Donnée 2

    Code:
     <table align="center" cellspacing="3" border="1">

     <tr>
    <td> Donnée 1</td>
    <td> Donnée 2 </td>
    </tr>
    </table>
    ▬ Collspan : Fusionne deux colonnes horizontales









    Donnée 1
    Donnée 2 Donnée 3

    Code:
     
    <table border="1">
    <tr>
    <td colspan="2"> Donnée 1</td>
    </tr>
    <tr>
    <td> Donnée 2 </td>
    <td> Donnée 3 </td>
    </tr>
    </table>
    ▬ Rowspan : Fusionne deux colonnes verticales.








    Donnée 1 Donnée 2
    Donnée 3

    Code:
     <table border="1">
    <tr>
    <td rowspan="2"> Donnée 1 </td>
    <td> Donnée 2</td>
    </tr>
    <tr>
    <td> Donnée 3 </td>
    </tr>
    </table>
    ▬ Style : Vous pouvez l’associer à votre tableau, votre ligne ou votre colonne en y personnalisant votre texte, votre bordure. Laissez libre court à votre imagination si vous utilisez celui-ci.

    * petit + : Il se peut que les tableaux génèrent un espace important. un bon margin-top devrait servir à régler ce problème.

    Voilà ! vous avez de quoi pour faire de beaux tableaux.


    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    FémininAge : 27Message(s) : 149
    Nalex
    le Lun 23 Déc 2013 - 10:04
    Bonjour!
    Merci beaucoup pour ces explications claires et précises !
    J'aurais une question :)
    J'ai vu dans certains codes, la balise <*tbody>. Elle représente quoi en fait?


    FémininAge : 24Message(s) : 476

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Skyleen
    le Mar 28 Jan 2014 - 0:10
    Bonjour, cette balise représente le corps de ton codage. Il se fait souvent au début de chaque codage.


    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    Contenu sponsorisé
    Aujourd'hui à 16:37

      La date/heure actuelle est Sam 3 Déc 2016 - 16:37