• édition d'un tableau [sans suites]


    Dimanche 12 Avril 2020 à 00:18
    enclasse

    Bonjour,

    Lorsque je crée un tableau, au moment ou je l'enregistre dans mon article, toute la mise ne page du tableau disparaît, il n'y a plus de bordures ni d'espace entre les cellules. Comment y remédier. Exemple sur cette page : http://enclassepascale.eklablog.com/etude-du-code-confinee-a184735594

    Merci !

    Dimanche 12 Avril 2020 à 13:56
    Colette95

    Bonjour enclasse,

    Après essai, j'en suis arrivée au même résultat que toi, c'est à dire pas de marge entre les cellules alors qu'elles apparaissent bien avant l'édition comme sur cette copie d'écran

    Par contre, pour l'encadrement de celles-ci, il y a un élément qui n'a pas été renseigné. Pour ce faire : éditer l'article -> cliquer sur le tableau (des petits carrés vont apparaître autour et les liens seront surlignés) -> cliquer sur l'icône tableau -> Propriétés du tableau -> dans bordure mettre 1 puis OK, enregistrer etc...

    Ce qui au final donnera ceci -> copie d'écran, présentation plus claire même s'il n'y a pas les marges.

    Désolée, mais je n'ai pas réussi à faire mieux.

    Peut-être qu'un blogueur "spécialiste de tableaux" saura t'en dire plus car en ce qui me concerne c'est pas mon "dada". happy

    Bonnes suites et bon courage.

    PS Attention, j'ai vu que tu faisais des copiés/collés à partir de logiciels, ce qui est le meilleur moyen pour planter ton blog. Les mises en forme des modules, articles ou autres doivent se faire à partir de l'éditeur de la plateforme.

    Dimanche 12 Avril 2020 à 21:55
    stormalo

    Bonsoir,

    Les tableaux, du point de vue mise en forme, c'est pour moi quasi un état dans l'état. Ils peuvent être mis en forme par des attributs de structure (html), mais aussi de style (css), et tout ça avec des approches et des priorités différentes.
    Personnellement je préfère éviter l'éditeur de tableau, sauf pour la création des cellules, et je place le css entre des balise <style> et </style>. C'est plus lisible car les instructions de style n'encombrent pas le code du tableau.

    Il semblerait que les navigateurs du moment préfèrent le css au attributs html. Bonne piste puisque je suis arrivé à un résultat.

    Dans le blog de enclasse le code de la balise <table> est celui-ci:

    <table style="border-color: #ebf2f1; margin-left: auto; margin-right: auto;" cellspacing="30" cellpadding="5" border="0">

    Il suffit de modifier ce code comme celui là:

    <table style="border: 2px solid #ebf2f1; margin-left: auto; margin-right: auto; border-collapse: separate; border-spacing: 10px 5px ; ">

    Au passage j'ai découvert que l'espace entre cellules pouvait être différent sur la ligne ou sur la colonne en écrivant deux valeurs au lieu d'une (d'où mon choix 10px 5px pour illustrer)

    Résultat (sur Firefox):

    < clic

     

    Bonnes chance avec les tableaux (parfois il en faut un peu) wink2

    Lundi 13 Avril 2020 à 09:16
    Colette95

    Coucou stormalo, 

    D'office, te voici propulsé "spécialiste de tableaux".  
    Bravo pour les espaces (pas pensé au border-spacing). 

    Maintenant pour que le résultat soit parfait, reste juste à remettre les bordures des cellules qui ont disparu lors de la création desdits espaces.

    Le design de celles-ci <td> se présente ainsi :

    <td style="border-color: #d4cd0d; width: 250px; height: 80px; background-color: #dade90; text-align: center; vertical-align: middle;">

    Donc modifier ce qui est en rouge par ce qui est maintenant en bleu :

    <td style="border: #d4cd0d solid 1px; width: 250px; height: 80px; background-color: #dade90; text-align: center; vertical-align: middle;">

    Et voili et voilou je pense que maintenant le tableau devrait correspondre en tous points aux souhaits de enclasse.

    Bonne journée. 

    PS Perso, je pense que le plus important ce sont les espaces... 

    Lundi 13 Avril 2020 à 09:21
    stormalo

    Salut Colette95,

    Ah oui les espaces . . .  mais parfois c'est utile de tout confiner dans un tableausarcastic

    Lundi 13 Avril 2020 à 09:27
    Colette95

    Je faisais juste allusion au tableau de enclasse et sur le fait que tu ais résolu le problème. yes

    Lundi 13 Avril 2020 à 10:08
    Pipiou

    Bonjour bonjour

    stormalo = tableaux : +1

    Colette95 : relis stormalo, perso ça m'a fait rire wink2

    [Pour info je vais utiliser ce sujet et ses réponses claires en "lien/référence" dans le Petit Dico]

     

    Lundi 13 Avril 2020 à 10:34
    enclasse

    Merci à tous pour ces explications, c'est exactement ce que je souhaite faire.  Il va falloir que j'y aille pas à pas pour ne pas faire de bêtise. J'ai réussi grâce à vous, sauf que je n'ai toujours pas les bordures de cellules (mais ce n'est franchement pas grave !) Colette95, tu peux préciser concernant les copiés collés. Tu parles des liens que je copie colle à partir de youtube par exemple? 

    Lundi 13 Avril 2020 à 11:07
    Colette95

    Coucou stormalo, coucou Pipiou, 

    @Pipiou
    Ah la la ! pas bien réveillée,.. sleep tu as bien fait de souligner l'allusion de stormalo ! 

     

    @enclasse

    Je ne parlais des vidéos YouTube, j'échangeais justement avec stormalo sur les bordures des cellules.

    Pour mettre lesdites bordures (ainsi que les codes de stormalo) -> passer ton article en mode html icône <> puis dans la fenêtre qui s'ouvre repérer dans les codes les lignes qui commencent par <td et pratiquer comme dans l'exemple que j'ai mis dans mon premier échange avec stormalo.

    C'est un peu paniquant, mais en y allant doucement, tu vas y arriver. Tu peux d'ailleurs faire une sauvegarde de l'intégralité des codes de ton article en les copiant/collant sur un bloc-notes par exemple.

    Bonnes suites.

    Mardi 14 Avril 2020 à 09:24
    stormalo

    @Colette95,
    je n'étais pas être mieux réveillé car je n'ai vu que de l'humour dans ton PS.

     

    @enclasse,

    J'ai indiqué le 12 avril ma préférence pour le codage d'un tableau. J'ai préparé une structure pour ton cas (tu pourras comparer avec le code existant les facilités de lecture ou de mise à jour). En vert le CSS (le style) de tout le tableau et en brun le HMTL (la structure du tableau).
    J'ai modifié la couleur des bordure pour ma vision d'aîné. wink2

    Essaye de copier/coller en l'état l'ensemble des lignes de code ci-dessous dans la source < > d'une page ou article de ton blog.  Il manque juste les liens, mais même avec les liens je trouve que c'est plus simple pour intervenir dans le code.

     

    <p>&nbsp;</p>
    <style><!--
    #tableau1 table {
        background-color: #acf5f0;
        border: 2px solid #ebf2f1;
        margin-left: auto;
        margin-right: auto;
        border-collapse: separate;
        border-spacing: 10px 5px;}
    #tableau1 tr {height: 80px;}
    .C0 {background-color:transparent;}
    .C1 {border: #a56db0 solid 2px; background-color: #e1c8e6; width: 250px; text-align: center;  vertical-align: middle;    }
    .C2  {border: #919626 solid 2px; background-color: #dade90; width: 250px;  text-align: center; vertical-align: middle;}
    .C3 {border: #70a624 solid 2px; background-color: #bce386; width: 250px;  text-align: center; vertical-align: middle;}
    .C4 {border: #ad5b21 solid 2px; background-color: #e8a676; width: 250px;  text-align: center; vertical-align: middle;}
    --></style>
    <p>&nbsp;</p>
    <div id="tableau1">
    <table>
    <tbody>
    <tr>
    <td class="C0">&nbsp;</td>
    <td class="C0">&nbsp;</td>
    <td class="C3">&nbsp;</td>
    <td class="C4">&nbsp;</td>
    </tr>
    <tr>
    <td class="C0">&nbsp;</td>
    <td class="C2">&nbsp;</td>
    <td class="C3">&nbsp;</td>
    <td class="C4">&nbsp;</td>
    </tr>
    <tr>
    <td class="C1">&nbsp;</td>
    <td class="C2">&nbsp;</td>
    <td class="C3">&nbsp;</td>
    <td class="C4">&nbsp;</td>
    </tr>
    <tr>
    <td class="C1">&nbsp;</td>
    <td class="C2">&nbsp;</td>
    <td class="C3">&nbsp;</td>
    <td class="C4">&nbsp;</td>
    </tr>
    </tbody>
    </table>
    </div>
    <p>&nbsp;</p>

    On ramasse les copies le  11 mai . . .

     Bonnes suites




    Vous devez être membre pour poster un message.