Ajouter Un Tableau Sur Blogger Facilement

C'est une question qui vient souvent sur le forum de Blogger : comment ajouter un tableau sur Blogger, considérant que cette fonction n'est pas présente sur l'éditeur de message.

Il y a plusieurs façons de créer un tableau, je ne vais évoquer que les plus simples.

Faire un copier coller d'un tableau Excel sur Tableizer

Voici le résultat dans l'article. J'ai volontairement utilisé une autre couleur différente que celle qui est proposée par défaut.

gouttièreracepacharonfleur
Chatyeuxpoilsdormirlitière
Croquetteslaitfauteuilmatoumoustache
Moustachedouxronflecrapulechalut

Utilisez Google Drive pour publier un tableau :

Pour en savoir plus lire le tutoriel très détaille de Prac

Voici le résultat dans un article


Intégrer un tableau sous format table personalisé

Nous allons prendre la solution de facilité et aller sur le site Way 2 Tutorial et utiliser leur outil en ligne de création de tableau. 

C'est certes sommaire mais au moins, il n'y a pas de lien vers le site.

Copie d'écran de l'outil de création de tableau de Way2Tutorial

Voici le résultat sur Blogger :

Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

Vous pouvez changer ensuite le texte avec celui de votre choix


Un autre tableau plus élaboré crée avec HTML Table Generator de Texfinder



Lors du survol de la souris, la couleur de la ligne de fond change de couleur.


Header 1Header 2Header 3Header 4
Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4
Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4
Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4
Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4
Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4
Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4
Created with the HTML Table Generator


Choisir le thème pour tous les tableaux de votre blog

Bien souvent, lorsqu'on a un blog, on souhaite qu'il y ait une certaine cohérence des éléments intégrés, avec la charte graphique choisie.

Voici deux outils qui vous aideront à ajouter un code CSS dans le votre blog Blogger.

Le plus complet est celui de tablestyler.com


Vous pouvez  définir : la police de charactère, bordures du tableau (largeur, arondis, couleur), la marge intérieure des cellules, ajouter ou cacher une navigation, personnaliser des modèles déjà propoposés..

Voir un exemple de tableau en action sur mon blog test

Il existe aussi un autre outil (toujours gratuit) avec moins de fonctions : CSSTableGenerator


Pour les plus courageux qui veulent en savoir plus sur la création de tableau, je vous invite à aller sur le site de W3

Commentaires

  1. Un grand merci à vous pour tous vos conseils.

    RépondreSupprimer
  2. Je note, je note : ça marche peut-être aussi pour WordPress ? Je n'ai pas vraiment besoin de tableaux sur mon blog, mais je cherche toujours comment faire des encadrés... J'ai du mal à comprendre qu'un thème dit "Magazine" ne propose pas un bouton "encadré"...
    Merci, Shé, et bon week-end !

    RépondreSupprimer
  3. Bonjour Tomate Joyeuse, super article et super pratique, je met quasiment jamais de tableau mais faut dire aussi que je savais pas trop comment faire et je n'en ai pas non plus besoin souvent mais avec ton article cela pourra, probablement m'aider un de ces jours, merci beaucoup.

    RépondreSupprimer
  4. j'espère qu'ils vous serviront..

    RépondreSupprimer
  5. normalement oui, car du format Html.

    je ne connais ps très bien le fonctionnement de WordPress

    RépondreSupprimer
  6. Je confirme, ça fonctionne pareil.

    RépondreSupprimer
  7. bonjour Thierry, j'ai mis du tps à chercher les infos. le plus simple est d'utiliser Gdrive avec un fichier excel, de google document. c'est plus simple. mais c'est bien d e connaitre d'autres fonctionalités
    bon dimanche à toi

    RépondreSupprimer
  8. Bonjour tomate joyeuse, je veux mettre un tableau dans mon blog mais avant je souhaite savoir s'il est possible d'une quelconque manière de pouvoir classer ensuite les lignes selon une variable. Par exemple une lise de nom avec un score qui varie au cours du temps et donc un classement qui varie

    RépondreSupprimer
  9. Bonjour Unfluster,

    La solution idéale serait de créer un document excel sur Google Drive. et ensuite d'intégrer le document sur Blogger. Si vous changez une donnée sur ce document excel, le tableau se mettra à jour sur votre blog.
    Pour plus d'information, je vous invite à poser la question sur le forum de Google Drive https://productforums.google.com/forum/#!forum/docs-fr

    voici la méthode pour installer un document sur Blogger http://viti-vino.blogspot.ch/2011/02/feuille-excel-blog-google-viewer.html
    Bonne journée

    RépondreSupprimer
  10. bonjour Tomate joyeuse,

    Merci pour toutes ces infos bien pratiques.

    Par contre je n'arrive pas a avoir mon tableau creer avec tablestyler avec les couleurs et les traits.

    Je pense qu'il faudrais mettre en plus du HTML les css mais je ne comprends pas comment faire. Pourrais tu expliqué comment tu as réussi sur ton site test?
    Merci

    RépondreSupprimer
  11. Bonjour Zwooff,

    pour tablestyler, il faut mettre le code dans la partie HTML du message, et le css dans la partie Css du modèle (explication sur le blog de Soraya http://bloggercode-blogconnexion.blogspot.fr/2013/02/template-editeur-css.html

    dis moi si tu cela marche

    bonne semaine à toi

    RépondreSupprimer
  12. abouelmahassin18/12/2013 02:53

    merci c'est top votre explication .chapeau.

    RépondreSupprimer
  13. Bonjour, pourriez-vous partager le code que vous utilisez pour le tableau de HTML Table Generator svp ?

    Celui qu'ils fournissent sur leur site ne semble plus fonctionnel. Sur l'image de droite, l’aperçu du tableau sur le site et sur celle de gauche le rendu sur mon blog. Auriez-vous une solution ?

    Cordialement, Noëllie.

    RépondreSupprimer
  14. bjr,
    comment cela ? cela marche normalement,

    RépondreSupprimer
  15. essayer cela



    .tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}

    .tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}

    .tftable tr {background-color:#d4e3e5;}

    .tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}

    .tftable tr:hover {background-color:#ffffff;}





    Header 1Header 2Header 3Header 4Header 5

    Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4Row:1 Cell:5

    Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4Row:2 Cell:5

    Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4Row:3 Cell:5

    Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4Row:4 Cell:5

    Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4Row:5 Cell:5

    Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4Row:6 Cell:5



    Created with the HTML Table Generator

    RépondreSupprimer
  16. Excellent article, merci beaucoup. Sur mon site, le rendu est parfait avec le generator. Depuis le temps que je cherchais, j'ai trouvé tous les renseignements utiles ici. Merci pour cette aide

    RépondreSupprimer

Enregistrer un commentaire

- Rédigez votre commentaire dans la zone prévue ci-dessous.
- Vous pouvez choisir de commenter en utilisant votre compte Google, un pseudonyme (Nom/Url) ou de manière anonyme.
- Si vous souhaitez partager une vidéo YouTube, il vous suffit d'insérer l'URL de la vidéo.
- Pour être informé des réponses, cochez la case « M'informer ».
- Cliquez sur « Publier » pour envoyer votre commentaire ou sur « Aperçu » pour le prévisualiser avant de le publier.

Form for Contact Page (Do not remove)