• ACCUEIL
  • blogger

    Créer un tableau

    Autrefois (avant 2020) l'interface de menu d'article ne proposait pas de créer un tableau, désormais c'est possible...mais dernières minute Blogger  vient de supprimer cette possibilité... pour combien de temps ????

    Pourquoi créer un tableau ?
    Il arrive parfois que  l'on souhaite  insérer un tableau,  pour quoi faire ?
    -un tableau "classique" de données chiffrées ou autres 

    -un tableau "invisible"  (sans bordure) pour améliorer la présentation  (des photos bien positionnées, un article en 2 colonnes,  un article avec des "blocs d'information")...


    -A savoir: pour insérer un tableau de chiffres conçu avec un tableur, l'idéal est d'importer votre tableau (Excel ou  Calc avec LO) dans  Google Sheet ou  mieux de réaliser directement votre tableau en ligne dans Google Sheet). Ensuite vous pourrez l'intégrer dans votre article de manière dynamique (une modification du tableau sera visible immédiatement en ligne).
     Voir  notre dossier avec démo  d'un tableau intégré dans l'article  "Intégrer un document  de Drive



    Comment créer un tableau

    1-avec l'outil de Bllogger
    2-avec un outil gratuit en ligne  puis de copier   le code HTML correspondant pour ensuite le coller dans votre article. C'est une solution simple et rapide qui permet de créer un tableau "plus raffiné" qu'avec Blogger. Mais  vous devez avant tout savoir comment insérer du code HTML dans un article  ! Voir notre dosssier




    1-CRÉER UN TABLEAU avec l'OUTIL de BLOGGER

    C'est une nouveauté de Blogger  2020 ! 

                                                               mais depuis peu Blogger  a supprimé cet outil....



















    Lorsque vous "insérez un tableau", Blogger  insère automatiquement  un tableau  (aligné à  gauche) avec 2 lignes et  4 colonnes : à vous de :
    • le MODIFIER en ajoutant/supprimant des lignes ou colonnes
    • d'AJOUTER du contenu (texte, chiffres, photos...)
    • si vous voulez apporter apporter des modifications, il faudra modifier le code HTML
      Voici le code de base de Blogger 
      • présenté en mode html : c'est peu clair malgré les couleurs
      • ici , mis en forme pour mieux comprendre


      • Comprendre le code
        • <table...> : cette balise annonce la création d'un tableau
        • immédiatement la mise en forme du tableau est indiquée
          • table border ="1"   => mettre 0 pour ne pas afficher de bordure
          • bordercolor="#888"  => code couleur bordure, ici en gris (pas de changement si modification)
          • cellspacing="0"   => espacement entre les cellules (pas de changement si modification)
          • border-collapse détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées : donc ici, par défaut, elles sont fusionnées
          •  border-color: rgb(136, 136, 136) =>  couleur bordures extérieures et intérieures (ici engris)
          • border-width: 1px  => épaisseur bordure extérieure  du tableau 
            • NOTA : voir dernière partie pour ajouter du code pour améliorer ex mettre une largeur fixe avec width=60%...
        • la balise <tbody> annonce le contenu du tableau
          • <tr> indique une ligne
          • <td> indique une cellule qui contiendra les informations (chiffres ou texte ou image....
        • Pour centrer le tableau, il suffit d'ajouter <center>  <table......>.....</table> </center>

    Exemple :


     CELLULE 1 cellule 2  3 4
    Code HTML correspondant

     



    2-CRÉER UN TABLEAU CLASSIQUE en ligne

    Un site en ligne très simple que nous conseillons pour débuter:
    https://divtable.com/generator/

    autres sites pour obtenir des tableaux plus perfectionnés
    -https://www.quackit.com/html/html_generators/html_table_generator_old.cfm
     ou
    -http://www.textfixer.com/html/html-table-generator.php
    -http://www.tablesgenerator.com/html_tables

    (attention aux sites qui proposent des tableaux avec un CSS que l'on ne peut utiliser dans un article simple de Blogger)

    Méthode avec Divtable:
    => créer un tableau simple sans  utiliser le "styler"


    A-concevoir un tableau... simple

    • A-Conserver "Table tags"
    • B-sélectionner à droite les cellules du tableau nécessaires (ici 3/2)
    • par défaut 
      • Border : pas de bordure (border=0)
      • width : pas de largeur définie (elle s'adaptera au contenu)
      • cell Padding: espace pour le contenu des cellules 
    • Vous voyez en bas  à gauche le résultat
    • Vous voyez  en bas  à droite le code html correspondant




    que vous devez modifier
    • Border : 1 pixels (on voit la présence d'une bordure autour des cellules, c'est nécessaire pour remplir ensuite le tableau, si border = 0, on ne verrait plus le tableau ! par ex pour afficher des photos)
    • width  = largeur
      • px : largeur fixe en pixels (ici : 600, mais on peut aussi ne rien mettre, le tableau s'adaptera au contenu)
      • % : espace proportionnel  en % de largeur par rapport au containeur utilisé (ici, avec Blogger,  l'espace  du bloc "principal des articles")
    • cell Padding: espace pour le contenu des cellules  (ici =2)
    Nota : ne pas utiliser le "styler" qui nécessite un fichier css en plus du tableau




    B- Récupérer le code hml


    le coller dans votre article  en mode HTML 


    • 1-L'article n' a pas encore de texte
      • En mode HTML : 
      • Taper :          <br>
      • ceci permettra d'écrire éventuellement un texte avant le tableau
      • Coller le code du tableau en dessous de <br>
    • 2-L'article contient  du texte !
      • Il est difficile de se repérer dans le code !
      • Passer en Mode "Rédiger" et à l'endroit ou vous souhaitez voir  le tableau, passer un ligne et insérer une ligne de zéro
        0000000000000000000000000000000000000000000000
      • Repasser en mode HTML et repérer facilement  vos 0000000000000. Puis,  à leur place, coller votre code html

    pour obtenir  ceci :


    1 2 3
    4 5 6
    7 8 9




    Ensuite, en mode "Rédiger" vous pourrez compléter  le contenu des cellules avec des chiffres, du texte...des photos  (voir ci-dessous).


    Vous pouvez aussi utiliser un logiciel éditeur HTML  (Nvu ou Kompozer) pour éditer votre tableau (voir dernère partie)


    ATTENTION : ne jamais faire un copier coller  du tableau que l'on aperçoit à gauche : on collerait un code inexploitable !

    VOIR UNE PAGE DE DEMO de TABLEAUX réalisés avec  Divtable afin de bien comprendre les possibilités



    C-Ex : Pour insérer des images /photos



    Il faut utiliser un tableau et  insérer l'image dans la cellule ou remplacer le texte par votre image.

    Attention vos images doivent avoir la même taille ! 

    Comme ci-dessus,  insérer un tableau sur fond blanc avec bordure, avec des cellules disposées comme vous le souhaitez pour positionner vos images

    cellule1cellule2
    cellule3cellule4

     Puis insérer votre image de manière classique dans chaque cellule pour obtenir:


      Pour faire disparaitre, en mode html,  les "bordures du tableau" modifier le code html 
      <table border="1"...
      en 
      <table border="0"


      pour obtenir:




        D- Ex: Pour concevoir un texte d'article/page en  2 colonnes 


        Il faudra seulement indiquer dans le code l'espace entre les cellules via : 
                                                                                                <TABLE cellspacing=?>
        puis supprimer l'épaisseur de la bordure pour obtenir :
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tincidunt massa. Nullam justo nisi, semper pretium nunc ac, semper euismod enim. Etiam ornare ac mauris vitae tincidunt. Sed ullamcorper turpis nec augue posuere, eget eleifend erat euismod. Vestibulum sit amet scelerisque elit. Suspendisse vehicula tempor urna, id vestibulum ipsum sagittis eget. Morbi ut libero turpis. Nulla lobortis faucibus odio sed posuere. Aliquam sit amet enim pharetra, viverra dui ut, vestibulum massa. Donec porttitor ut odio nec hendrerit. Phasellus vitae imperdiet lorem, quis consequat augue. Sed hendrerit egestas porta. Donec non ultrices mi, vehicula feugiat magna. Cras in sem diam. Cras vehicula a risus quis commodo. Vestibulum pulvinar dolor non dignissim ullamcorper.
        Donec ac iaculis elit, at facilisis tortor. Duis nisi metus, elementum eget lacus sit amet, auctor interdum ligula. Aliquam dignissim nulla id laoreet semper. Nulla ut ullamcorper ipsum, ut porttitor orci. Proin scelerisque ipsum eget erat congue sagittis. Aliquam lectus risus, porta non faucibus ut, luctus quis leo. Suspendisse augue ante, placerat a lectus at, maximus ornare lacus. Integer congue venenatis dolor. Aenean non dolor dictum magna sodales feugiat. Fusce maximus vestibulum libero, placerat accumsan augue sodales et. Pellentesque ultrices elit risus, sed pharetra lacus porta at. Morbi vestibulum neque id ipsum vulputate consectetur. Sed condimentum augue quam, vitae porttitor mi mollis id. Maecenas dignissim, erat vel ultrices commodo, nisi ex convallis leo, vitae suscipit neque lectus in leo. 


        E-Mieux comprendre le code HTML d'un tableau 


        A savoir : Blogger modifie parfois le code "classique" html de tableau...
        • Tableau de base de 3 lignes  avec de 2 cellules//colonnes :  tr=ligne et td=cellule
        CODE de BLOGGER
        <br />

        <table border="1"> <tbody>
        <tr>
        <td>1</td>
        <td>2</td>
        </tr>
        <tr>
        <td>3</td>
        <td>4</td>
        </tr>
        <tr>
        <td>5</td>
        <td>6</td>
        </tr>
        </tbody> </table>



        F-Améliorer le code HTML d'un tableau 


        Créer un tableau en ligne permet uniquement de concevoir un tableau simple : pour l'améliorer il faut obligatoirment passer par le code HTML, voir quelques exemples ci-dessous  pour  améliorer l'aspect du tableau et des cellulles
        •  vous pouvez préciser des éléments modifiables 
          • <br />    => permet d'avoir un saut avant le tableau
          • Bordure de cadre     [Border]     <table border=?>
          • L'espace entre les cellules ou épaisseur des lignes du quadrillage           
                                                                                                    <TABLE cellspacing=?>
          • L'enrobage des cellules ou espace entre le bord et le contenu    
                                                                                     <TABLE cellpadding=?>

          • largeur de la table         <TABLE width=?>      en ?pix ou ?      
          • Couleur:
            • Fond et quadrillage : <table border bgcolor="yellow" bordercolor="green" >
            • Ombrages : <table border bodercolordark="green" bordercolorlight="yellow" >



        =>qu'il faudra indiquer ainsi dans le code Html, première ligne après <table...

        <table bgcolor="yellow" border="1" style="width: 60%">


        • Indiquer  une largeur  des cellules 

        On peut gérer la taille du tableau, mais on peut aussi gérer la taille des cellules. Utile pour affecter la même taille à chacune d’elles malgré un texte de taille différente (sinon le tableau va s’adapter à la taille du texte). Il suffit d’appliquer le paramètre sur la première ligne avec le paramètre « witdh » comme pour le tableau. Et comme pour le tableau la valeur renseignée peut-être en pixels ou en %.  


        ici le code à utiliser pour que chaque cellule occupe 33% de largeur
         
        <TD width=33%>cellule1</TD>
        exemple
        cellule1cellule2 3
        cellule1cellule2 3

        <CENTER><TABLE width=60% border=1>
        <TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD><TD width=34%>3</TD</TR>
        <TR><TD
        width=33%>cellule1</TD><TD width=33%>cel. 2</TD><TD width=34%>3</TD></TR>

        </TABLE></CENTER



        • Ajuster le contenu des cellules
        le code à utiliser pour positionner le contenu
        -align pour l'alignement horizontal
        avec les valeurs : right (alignement à droite), center (centré) ou left (alignement à gauche).
        -valign pour l'alignement vertical
        avec les valeurs : top (en haut), middle (centré verticalement) ou bottom (en bas).

        exemples



        Ligne de tableau<TR align=left/center/right>
        <TR valign=top/middle/bottom>
        horizontalement →
        verticalement↓
        Cellule de tableau<TD align=left/center/right>
        <TD valign=top/middle/bottom>
        horizontalement 
        verticalement 
        exemple
        TITRE au centre
        Texte 1Texte 2 texte 3 à droite

        <br />
        <center>
        <table border="1" style="width: 60%;">
        <tbody>
        <tr>
        <td align="center" colspan="3">TITRE au centre</td>
        </tr>
        <tr>
        <td width="33%">Texte 1</td><td width="33%">Texte 2 </td>
        <td align="right" width="34%">texte 3 à droite</td>
        </tr>
        </tbody></table>
        </center>

        Nota : colspan => indique que la cellule courante s'étend sur plusieurs colonnes, ici 3.(idem avec rowspan => la cellule s'étend sur plusieurs lignes.



        •  Centrer le tableau sur la page 
        Le mini tableau ci-dessus est centré avec :


         la balise  <center>   juste avant le descriptif du tableau qui commence par <table...
        et mettre  après le code du tableau la balise  </center>
        comme  dans l'exemple de mini tableau html  :

        <br />
        <center>
        <table border="1" style="width: 60%;">
        <tbody>
        <tr>
        <td align="center" colspan="3">TITRE au centre</td>
        </tr>
        <tr>
        <td width="33%">Texte 1</td><td width="33%">Texte 2 </td>
        <td align="right" width="34%">texte 3 à droite</td>
        </tr>
        </tbody>
        </table>

        </center>



        3-AUTRE POSSIBILITE : utiliser un freeware EDITEUR HTML comme KOMPOZER (télécharger  +  tutoriel simple)



        Vous créer uniquement un tableau selon vos souhaits puis vous récupérez le code HTML



         Le résultat

        En mode source
        copier le code de <table......> jusqu'à </table>



        coller ce code en mode HTML dans votre article pour obtenir :


        123
        456
        789


        vous pouvez ajuster le code (selon vos compétences) en modifiant
        -  la largeur en pixels (width)
        - l'épaisseur de la bordure (border) si 0 pas de bordure
        - les marges entre cellules (cellpadding et cellespacing)

        ICI:

        <table style="text-align: left; width: 600px;" border="1"
        cellpadding="2" cellspacing="2">


        COMPLEMENTS sur le code HTML: