• Résolu Tableau dans un article


    Mercredi 10 Octobre à 11:35
    SoleilvieCricri

    Bonjour à toutes et tous,

    Est ce que quelqu'un peut m'aider ?

    Je fais des tests sur mon blog test : http://blogtestsoleilviecricri.eklablog.com/-a148847320

    J'ai créé un tableau mais dans "édition d'un article" je vois bien la séparation, qui ne se voit pas dans l'article.

    Pourquoi ? Y a t il un code qui ne va pas ?

    voici les images :

     

    ci-dessous le code source :

    <p>&nbsp;</p>

    <table style="margin-left: auto; margin-right: auto;" cellspacing="20" cellpadding="20">

    <tbody>

    <tr>

    <td style="text-align: center; background-image: linear-gradient(#4E7796, #800080, #FFFFFF); border-radius: 10px; box-shadow: 2px 4px 12px #000000;"><img src="http://ekladata.com/5FbzF4HOXqOorlP6fNAoX_2O-o8@198x248.png" alt="pere no" /></td>

    <td style="text-align: center; background-image: linear-gradient(#4E7796, #800080, #FFFFFF); border-radius: 10px; box-shadow: 2px 4px 12px #000000;"><a href="http://ekladata.com/HgwEO2l5J3hj90z8Zia7ZVI421M.png"><img src="http://ekladata.com/HgwEO2l5J3hj90z8Zia7ZVI421M@250x250.png" alt="" /></a></td>

    <td style="text-align: center; background-image: linear-gradient(#4E7796, #800080, #FFFFFF); border-radius: 10px; box-shadow: 2px 4px 12px #000000;">&gt;&nbsp;</td>

    </tr>

    <tr>

    <td style="text-align: center; background-image: linear-gradient(#4E7796, #800080, #FFFFFF); border-radius: 10px; box-shadow: 2px 4px 12px #000000;">&gt;TUBE 4</td>

    <td style="text-align: center; background-image: linear-gradient(#4E7796, #800080, #FFFFFF); border-radius: 10px; box-shadow: 2px 4px 12px #000000;">&gt;TUBE 5</td>

    <td style="text-align: center; background-image: linear-gradient(#4E7796, #800080, #FFFFFF); border-radius: 10px; box-shadow: 2px 4px 12px #000000;">&gt;TUBE 6</td>

    </tr>

    </tbody>

    </table>

    Merci d'avance pour votre aide.

    Bonne journée

    Amicalement

    Soleilvie

    Mercredi 10 Octobre à 21:59
    stormalo

    Bonjour,

    Les tableaux ce n'est pas toujours facile à maitriser. Dans l'éditeur la présentation ne prend pas en compte le css du blog et pour les tableaux le tracé des cellules et bordures me semble être virtuel, uniquement pour guider la saisie.

    Perso j'écrirais la balise table  comme ceci:
    <table style="margin: 0px auto 0px auto; border-collapse: separate; border-spacing: 20px;">

    Sauf erreur ça ce lit :
    marge du haut 0px    droite auto     bas 0px     gauche auto
    bordures séparées
    espace entre bordure 20px

    Par ailleurs la répétition de style=".........." alourdit la lecture du code et si on veut modifier une chose (la couleur par exemple) il faut la modifier toutes des cellules. J'ai tendance à préférer maintenant de regrouper ça dans une classe de style dont il suffira de rappeler le nom (j'ai donné le nom fond dans l'exemple ci-dessous)

    Le code complet pourrait ainsi être remplacé par:


    <p>&nbsp;</p>

    <style><!--
    .fond {
    text-align: center;
    background-image: linear-gradient(#4E7796, #800080, #FFFFFF);
    border-radius: 10px;
    box-shadow: 2px 4px 12px #000000;
    padding: 20px; /* en remplacement du cellpadding initial */
    color: white; /* choix personnel pour couleur texte */
    }
    --></style>

    <table style="margin: 0px auto 0px auto; border-collapse: separate; border-spacing: 20px;">
    <tbody>
    <tr>
    <td class="fond"><img src="http://ekladata.com/5FbzF4HOXqOorlP6fNAoX_2O-o8@198x248.png" alt="pere no" /></td>
    <td class="fond"><a href="http://ekladata.com/HgwEO2l5J3hj90z8Zia7ZVI421M.png"><img src="http://ekladata.com/HgwEO2l5J3hj90z8Zia7ZVI421M@250x250.png" alt="" /></a></td>
    <td class="fond">&gt;&nbsp;</td>
    </tr>
    <tr>
    <td class="fond">&gt;TUBE 4</td>
    <td class="fond">&gt;TUBE 5</td>
    <td class="fond">&gt;TUBE 6</td>
    </tr>
    </tbody>
    </table>


    <p>&nbsp;</p>

     

    Jeudi 11 Octobre à 08:20
    SoleilvieCricri

    Bonjour Stormalo

    Merci beaucoup pour le code.

    Par contre, comme je ne veux pas que toutes les cases soient de la même couleur, j'ai remis le style background-image uniquement afin d'obtenir les dégradés dans chaque cases.

    Et ça fonctionne ! GENIAL

    Bonne journée !

    Amicalement

    Soleilvie

    Jeudi 11 Octobre à 08:29
    Pipiou

    Bonjour,

    en passant, @ stormalo : carrément bien le code groupir ! Et bravo pour l'explication "ça se lit" je trouve ça très pratique et ça permet de mieux comprendre. Bin oui : le souci avec les codes c'est qu'il faut les traduire he

    perso je traduis beaucoup en commentaire dans le css (entre /* et */) , ça m'aide à m'y retrouver.

    Jolie aide en réponse à la demande parfaite, avec codage et copies d'écran : de bien beaux exemples  cool   

     

    Jeudi 11 Octobre à 08:34
    SoleilvieCricri

    Bonjour Pipiou

    Merci beaucoup à toi également !

    Bonne journée

    Amicalement

    Soleilvie

    Vendredi 12 Octobre à 10:33
    stormalo

    merci aussi des commentaires en retour. smile
    Quand le questionnement est bien exprimé les réponses sont naturellement plus satisfaisantes

    Bonus:
    Pour les couleurs (background et texte) il est possible de les définir dans des class complémentaires ; par exemple  .deco1  .deco2  .deco3  etc.

    <style>
    .fond { ... }   /* en fait ce qui est commun */
    .deco1 { ... }
    .deco2 { ... }
    .deco3 { ... }
    </style>


    Pour la cellule avec les couleurs de deco2 on écrira <td class="fond deco2">

    Pour un tableau plus grand ça peut être appréciable pour la maintenance du code

    Bonnes suites.

    Vendredi 12 Octobre à 11:09
    SoleilvieCricri

    Coucou Stormalo

    Merci pour ces codes .

    Je ferai des essais pour voir ce que cela donne.

    happyyes

    Bonne journée

     

     

    Hier à 12:38
    jackline

    Bonjour, perso j'utilise beaucoup les tableaux, mais je ne mets pas de code si compliqué, j'avais enregistré il y a fort longtemps un type de tableau, que je mets dans la case htlm de mon éditeur , je fais un copier et il suffit ensuite de repérer la ligne où doit se situer le code htlm du tableau, en allant voir la ligne qui s'affiche en bleu dans l'htlm de l'éditeur de texte, et de la coller à cet emplacement...On peut aussi changer les dimensions du tableau avant de valider...


    <table border="0" align="center">


    <tbody>


    <tr>


    <td style="width: 400px; height: 300px;" align="middle" valign="center">&nbsp;</td>


    <td style="width: 400px; height: 300px;" align="middle" valign="center">&nbsp;</td>


    </tr>


    <tr>


    <td style="width: 400px; height: 300px;" align="middle" valign="center">&nbsp;</td>


    <td style="width: 400px; height: 300px;" align="middle" valign="center">&nbsp;</td>


    </tr>


    </tbody>


    </table>

     Voilà, on voit les cases qui sont fermées dans l'éditeur de texte sur la page, avec des pointillés de délimitation, il suffit ensuite d'y entrer photo ou texte...Si on veut changer la couleur, on peut aussi le faire, ou bien changer la mise en forme en ne prenant pas le center...J'espère que cela peut vous rendre service...Bonne journée smile

    Hier à 12:55
    SoleilvieCricri

    Bonjour Jackline

    Merci pour té réponse.

    J'ai enfin les tableaux que je voulais 

    Regarde ici ==> http://blogtestsoleilviecricri.eklablog.com/tubes-fetes-de-fin-d-annee-c30252088

    Bon dimanche ensoleillé

    happysmile




    Vous devez être membre pour poster un message.