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.


    Partie 1 - Etape 7 : Disposer ses éléments : les tableaux

    Partagez
    FémininAge : 22Message(s) : 4939

    Les Guildes
    Guilde des Conteurs:
    8/10  (8/10)
    Guilde des Illusionnistes:
    4/10  (4/10)
    Guilde des Architectes:
    12/20  (12/20)
    A-Lice
    le Mar 24 Fév 2015 - 22:17

    Etape 7 : Disposer ses éléments : les tableaux



    Il vous est peut-être déjà arrivé de voir un code qui comporte ce genre de balise :
    Code:
    <table> <tbody> <tr> <td>

    Eh bien oui, c'est exactement ça qu'on utilise pour faire un tableau.

    Procédons étape par étape.

    La théorie


    ⚫Tout d'abord la première balise :
    Code:
    <table> </table>

    C'est elle qui définit que nous sommes dans un tableau. C'est elle qui pose les bases. C'est en quelque sorte la chappe de béton du tableau. On ouvre donc la balise là où on veut placer le tableau et on la ferme là où il se termine.

    Oui, c'est logique. On ouvre au début on ferme à la fin.

    Dit comme ça... Mais sachez que ça se complique un peu plus par la suite.


    ⚫Ensuite nous avons la balise suivante :
    Code:
    <tbody></tbody>

    Pour être simple et concis, c'est le "corps" du tableau. En clair, c'est tout ce qui sera dans cette balise qui constituera le corps du tableau. Dans les utilisations précises de tableau on retrouve aussi les balises :
    Code:
    <thead></thead> <tfoot></tfoot>

    Respectivement l'entête et le pied du tableau. Mais c'est à titre informatif que je vous les donne. Il me semble qu'on le trouve dans les templates.


    ⚫Nous continuons avec la balise :
    Code:
    <tr></tr>

    Cette dernière correspond aux lignes du tableau (par opposition aux colonnes). Pour imager, elles sont rouge, bleue et jaune sur l'exemple qui suit.

    bla
    bla
    bla


    Si vous voulez ajouter des éléments au fur et à mesure, il faut faire attention à ajouter toutes les balises nécessaires. Tant que vous n'ajouterez pas de nouvelles lignes, les colonnes ajoutées resteront dans la même ligne. Ça peut être gênant, car il se peut que les colonnes dépassent des bords du forum. Comme ceci :




    ⚫Pour finir nous avons la balise :
    Code:
    <td></td>

    Par opposition aux lignes (tr), elles représentent les colonnes. Toujours en imageant, elles sont respectivement en verte, orange et violette sur l'exemple qui suit.

    BlaBlaBla


    Voilà, nous avons définit l'utilité et le rôle de chaque balise.


    La disposition des éléments


    Maintenant, on va s'attaquer au véritable but de cette étape, la disposition des éléments.

    Il faut savoir que beaucoup de gens apprennent à coder avec des tableaux partout. Certes, c'est une façon de faire. C'est également de cette manière que j'ai commencé. Mais il faut prendre conscience que tout ne se fait pas avec des tableaux. Parfois, si ce n'est pas souvent, ça peut poser plus de problème que ça n'apporte de solution.

    C'est donc à utiliser avec soin et quand il y a une réelle utilité. N'allez pas faire un tableau juste pour justifier ou centrer un texte. Une div fera très bien l'affaire !


    Ok ok, tu n'aimes pas les tableaux. J'crois qu'on a compris là. Mais alors on peut les utiliser pour quoi ?

    J'y viens !

    Le mieux, c'est d'utiliser un tableau pour classer des informations (des chiffres, des statistiques, des légendes, etc.). Le meilleur exemple que j'ai c'est pour un forum sur Naruto.



    Étant donné que c'est un code qui est disponible en libre service, je vous donne le lien du LS, c'est ici.

    Néanmoins, tout le monde n'a pas de forum Naruto. D'autres exemple concrets où on utilise les tableaux utilement sur Never-Utopia, ce sont les index.



    Le tableau en lui même donne ça :

    Show me the meaning of being lonely
    par A-Lice
    Voir le sujet

    Et voici le code :
    Code:
    [table][tr][td]<img src="http://nsa33.casimages.com/img/2015/02/13/150213114018447778.png" height="100" width="200" alt="" />[/td][td][size=16][b]Show me the meaning of being lonely[/b][/size]
    <i>par <b>A-Lice</b></i>[/td][td]<a href="http://www.never-utopia.com/t53691-show-me-the-meaning-of-being-lonely#811386" class="paginleft">Voir le sujet</a>[/td][/tr][/table]


    Mais là encore ça n'est pas utile à tous.


    Alors on peut également disposer une image à côté d'un texte. Le cas le plus courant est celui de la fiche de présentation.

    Sans tableau nous avons quelque chose comme ceci :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor lectus, hendrerit id mollis id, laoreet vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet lacus vitae fringilla suscipit. Nunc pellentesque erat eget nulla hendrerit, vitae pulvinar leo euismod. In hac habitasse platea dictumst. Cras erat ipsum, sagittis tincidunt sagittis quis, semper sodales nunc. Quisque convallis erat eget mollis dapibus. Donec mollis augue vel eros mattis ultrices.


    Code:
    <img src="http://img11.hostingpics.net/pics/355723icon100100.png" /><div style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor lectus, hendrerit id mollis id, laoreet vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet lacus vitae fringilla suscipit. Nunc pellentesque erat eget nulla hendrerit, vitae pulvinar leo euismod. In hac habitasse platea dictumst. Cras erat ipsum, sagittis tincidunt sagittis quis, semper sodales nunc. Quisque convallis erat eget mollis dapibus. Donec mollis augue vel eros mattis ultrices.</div>


    Maintenant si on met un tableau :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor lectus, hendrerit id mollis id, laoreet vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet lacus vitae fringilla suscipit. Nunc pellentesque erat eget nulla hendrerit, vitae pulvinar leo euismod. In hac habitasse platea dictumst. Cras erat ipsum, sagittis tincidunt sagittis quis, semper sodales nunc. Quisque convallis erat eget mollis dapibus. Donec mollis augue vel eros mattis ultrices.

    Code:
    <table><tbody><tr><td><img src="http://img11.hostingpics.net/pics/355723icon100100.png" /></td><td style="text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor lectus, hendrerit id mollis id, laoreet vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet lacus vitae fringilla suscipit. Nunc pellentesque erat eget nulla hendrerit, vitae pulvinar leo euismod. In hac habitasse platea dictumst. Cras erat ipsum, sagittis tincidunt sagittis quis, semper sodales nunc. Quisque convallis erat eget mollis dapibus. Donec mollis augue vel eros mattis ultrices.</td></tr></tbody></table>


    On constate que l'alignement est parfait. Cependant, parfois les marges des tableaux peuvent gêner. Dans l'exemple juste au dessus, on voit que l'image est pas collée au bord du tableau, (enfin on ne le voit pas vraiment, mais on a pas eu besoin de mettre de padding pour qu'il y ait un espace entre l'image et le texte) c'est de ce genre de marge que je parle. Dans ces cas-là, on peut jouer avec des margins négatifs. (On ne va pas parler des positions ici, mais c'est une possibilité également.)

    Voici donc la version brute :

    Blabla

    Code:
    <table style="background: gray;"><tbody><tr><td>Blabla</td></tr></tbody></table>


    Et la version avec retouche des marges :

    Blabla

    Code:
    <table style="background: gray;" cellpadding="0" cellspacing="0"><tbody><tr><td>Blabla</td></tr></tbody></table>


    En plus des marges intérieures, il peut y avoir des marges extérieures quand on place le tableau dans un bloc. Dans ce genre de cas ça peut déranger aussi.

    Ah ? Parce qu'en plus on peut mettre le tableau dans un bloc ?

    On peut tout faire. De là à ce que ce soit correct ou dans les normes, je n'en sais rien. Mais je dois bien avouer que parfois c'est plus pratique que de mettre des propriétés dans la balise "table".

    Euh... On la refait en clair et en français.

    Eh bien, pour styliser votre tableau vous n'êtes pas obligés de passer par une div pour lui donner des propriétés. On peut très bien inclure un style, une class ou un id à la balise "table". C'est exactement ce que j'ai fait quand j'ai mis les lignes et les colonnes en évidence par des couleurs.

    Voilà, c'est ainsi que se termine cette étape.
    FémininAge : 22Message(s) : 5018

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    10/10  (10/10)
    NyoTheNeko
    le Mer 4 Mar 2015 - 15:24
    Très jolie étape Alice! ^^
    Je pense qu'il n'y a rien à rajouter, selon moi c'est assez clair, donc je classe! ^^


    MasculinAge : 20Message(s) : 106

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Yukimura Esuki
    le Ven 14 Aoû 2015 - 19:58
    Merci pour ce tuto' ! :)
    FémininAge : 23Message(s) : 37
    Nippon Syndrom
    le Sam 22 Oct 2016 - 21:26
    Merci pour ce tuto ! :)
    Je tiens à signaler également que l'image (concernant les index de NU) est dead : et même chose pour le sujet qui suit donc... :/


    Contenu sponsorisé
    Aujourd'hui à 16:37

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