• Tableaux ou tables

    qu'est-ce que c'est ?

    J'ai vu que suite à ce tutoriel, la question du "Comment on en met deux sur une même ligne" revenait à plusieurs reprises. Et comme vous devez vous en doutez, si j'en parle ici, c'est que ce tutoriel vous permettra d'aligner deux DIV sur une même ligne. Allez, on démarre, un petit exemple pour la route !

     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. Nulla et turpis fringilla justo elementum venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi. Ut tellus ligula, aliquam a pretium eu, consequat non est. Proin varius semper lorem nec venenatis. Aenean sodales est semper enim condimentum et faucibus neque euismod. Suspendisse potenti.
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. Nulla et turpis fringilla justo elementum venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi. Ut tellus ligula, aliquam a pretium eu, consequat non est. Proin varius semper lorem nec venenatis. Aenean sodales est semper enim condimentum et faucibus neque euismod. Suspendisse potenti.

    comment faire ?

    Pour ce tutoriel j'ai pas trop envie de vous enfoncer dans le HTML donc on va utiliser une fonction proposée par Eklablog pour effectuer une première partie du tutoriel. Commençons !

    Créez un nouvel article (Oui ce sera quand même plus facile pour avancer.) et, en mode Expert, cliquez sur le bouton Insérer un nouveau tableau, c'est la sixième icone de la dernière ligne en commençant par la gauche.
    Remplissez uniquement le nombre de lignes et de colonnes, pour l'exemple du haut j'ai mis 2 colonnes et 1 ligne.

    Enregistrez et maintenant vous devriez avoir des petits pointillés qui forment deux petites cellules.
    Vous pouvez y placer du texte, des images, des animations, etc. Et pour nous, ce sera des DIV.
    Des DIV que vous aurez fait au préalable à l'aide de ce tutoriel bien sur.

    Bref, ouvrez la fenêtre d’édition HTML en cliquant sur le bouton qui correspond.
    Vous avez un truc du genre

    <table border="0">
    <tbody>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    </tbody>
    </table>
    [code=php]<table border="0">
    <tbody>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </tbody>
    </table>[/code]


    Et pour placer vos DIV, vous insérez leur code à la place des &nbsp;.
    Ce qui donne quelque chose comme

    <table border="0">
    <tbody>
    <tr>
    <td>
     <div style="color: #979696; width: 250px; min-height: 150px; margin: 10px; background-color: #e9eae8; border: 6px solid #232d2f; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #232d2f; background: url('http://data0.ek.la/portfolio/mod_article3736532_8.png?6556') no-repeat;">&nbsp;</span><span style="color: #800000;">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. <span style="color: #800000;">Nulla</span> et turpis fringilla justo elementum venenatis. <span style="color: #800000;">Pellentesque</span> habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <span style="color: #800000;">Morbi</span> tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi.<span style="color: #800000;"> Ut tellus</span> ligula, aliquam a pretium eu, consequat non est. <span style="color: #800000;">Proin</span> varius semper lorem nec venenatis. <span style="color: #800000;">Aenean</span> sodales est semper enim condimentum et faucibus neque euismod. <span style="color: #800000;">Suspendisse</span> potenti.</div>
    </td>
    <td>
     <div style="color: #b1d4e2; width: 250px; min-height: 150px; margin: 10px; background-color: #488ba5; border: 6px solid #012b4e; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #b1d4e2; background: url('http://data0.ek.la/portfolio/mod_article3736532_6.png?1685') no-repeat;">&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. Nulla et turpis fringilla justo elementum venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi. Ut tellus ligula, aliquam a pretium eu, consequat non est. Proin varius semper lorem nec venenatis. Aenean sodales est semper enim condimentum et faucibus neque euismod. Suspendisse potenti.</div>
    </td>
    </tr>
    </tbody>
    </table>
    [code=php]<table border="0">
    <tbody>
    <tr>
    <td>
    <div style="color: #979696; width: 250px; min-height: 150px; margin: 10px; background-color: #e9eae8; border: 6px solid #232d2f; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #232d2f; background: url('http://data0.ek.la/portfolio/mod_article3736532_8.png?6556') no-repeat;">&nbsp;</span><span style="color: #800000;">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. <span style="color: #800000;">Nulla</span> et turpis fringilla justo elementum venenatis. <span style="color: #800000;">Pellentesque</span> habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <span style="color: #800000;">Morbi</span> tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi.<span style="color: #800000;"> Ut tellus</span> ligula, aliquam a pretium eu, consequat non est. <span style="color: #800000;">Proin</span> varius semper lorem nec venenatis. <span style="color: #800000;">Aenean</span> sodales est semper enim condimentum et faucibus neque euismod. <span style="color: #800000;">Suspendisse</span> potenti.</div>
    </td>
    <td>
    <div style="color: #b1d4e2; width: 250px; min-height: 150px; margin: 10px; background-color: #488ba5; border: 6px solid #012b4e; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #b1d4e2; background: url('http://data0.ek.la/portfolio/mod_article3736532_6.png?1685') no-repeat;">&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim urna in quam dapibus ultricies. Nulla et turpis fringilla justo elementum venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tellus nunc, gravida non consectetur vel, pellentesque sollicitudin nisi. Ut tellus ligula, aliquam a pretium eu, consequat non est. Proin varius semper lorem nec venenatis. Aenean sodales est semper enim condimentum et faucibus neque euismod. Suspendisse potenti.</div>
    </td>
    </tr>
    </tbody>
    </table>[/code]

    Enregistrez et normalement vous avez deux DIV alignés. :)
    La méthode du tableau peut être très utile pour toute sortes de choses.
    Ici j'ai citer un cas précis suite à une demande pour faire d'une pierre deux coups mais cette méthode se généralise complètement, à vous de l'utiliser selon vos envies.

    Je répondrai à toute question posée par commentaire sur ce tutoriel alors n'hésitez surtout pas !


    Tags Tags : , , , ,
  • Commentaires

    12
    Dimanche 19 Mai 2013 à 13:21

    Oui un peu mieux, dans ce cas ça ne me concerne pas vraiment, je vais voir l'autre tuto pour le cadre. Car je voudrais faire une présentation des mangas plus jolie que je lis, et je trouve que ceci serait parfait ! Code css ça va encore, mais htlm j'ai du mal...

    11
    Dimanche 19 Mai 2013 à 13:19

    Non en fait, un cadre en DIV, c'est ce que l'on apprend à faire avec ce tutoriel là, ici, on apprend à en aligner deux sur une même ligne à l'aide d'un tableau. Car normalement, les cadres en DIV, si on en met deux à la suite, le deuxième sera toujours une ligne en dessous de l'autre; pour éviter cela, on utilise un tableau dans lequel on crée des lignes dans lesquelles il y aura des cellules qui contiendront nos DIV. C'est vrai que c'est un peu compliqué à comprendre comme ça, mais ça ne l'est pas tant que ça en fait !

    Ici, j'ai mis des cadres en DIV dans le tableau, mais ce n'est qu'un exemple parmi tant d'autres ! Bien évidemment, les tableaux peuvent contenir des textes, des images, des vidéos ! Le tableau est vraiment un outil fait pour agencer le contenu des articles dans un certain ordre. ^^ J'espère que c'est un petit peu plus clair ?

    10
    Dimanche 19 Mai 2013 à 12:40

    Oulalah j'ai un peu de mal à comprendre. Un tableau et un cadre en DIV c'est la même chose ? ...

    9
    Mercredi 7 Novembre 2012 à 17:26

    Voilà pour toi,
    <table border="0">
    <tbody>
    <tr>
    <td>
    <div style="color: #979696; width: 250px; min-height: 150px; margin: 10px; background-color: #e9eae8; border: 6px solid #232d2f; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #232d2f; background: url('ici mettre l'adresse de l'image') no-repeat;">&nbsp;</span><span style="color: #800000;">Ici mettre le texte</div>
    </td>
    <td>
    <div style="color: #b1d4e2; width: 250px; min-height: 150px; margin: 10px; background-color: #488ba5; border: 6px solid #012b4e; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #b1d4e2; background: url('Ici mettre l'adresse de l'image2') no-repeat;">&nbsp;</span>Ici mettre le texte2</div>
    </td>
    </tr>
    </tbody>
    </table>

    PS, ce commentaire date vraiment.

    8
    alice-of-dead
    Mardi 21 Août 2012 à 20:08

    esque tu pourrais donner les htlm avec les "ici mettre le texte"...ect s on veut faire autrement :) merci

    7
    alice-of-dead
    Mardi 21 Août 2012 à 20:01

    ouah merci super pratique

    6
    Samedi 11 Août 2012 à 15:36

    Merci ^-^

    C'est extrènement pratique *o*

    5
    Furiae Profil de Furiae
    Jeudi 19 Janvier 2012 à 08:11

    C'est la super classe !

    4
    Choco Chan
    Mercredi 28 Septembre 2011 à 13:19

    0h merci Mikuru ! Je t'adore ! <3 :P

    3
    Dimanche 18 Septembre 2011 à 14:08

    Je t'adore!!merci :)!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    2
    Samedi 17 Septembre 2011 à 19:48

    Moi aussi je vous aime quand vous m'aimez. :)

    1
    Samedi 17 Septembre 2011 à 19:46

    Merci !!! Je t'adooree <333



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :