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
| gouttière | race | pacha | ronfleur | |
|---|---|---|---|---|
| Chat | yeux | poils | dormir | litière |
| Croquettes | lait | fauteuil | matou | moustache |
| Moustache | doux | ronfle | crapule | chalut |
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 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Row:1 Cell:1 | Row:1 Cell:2 | Row:1 Cell:3 | Row:1 Cell:4 |
| Row:2 Cell:1 | Row:2 Cell:2 | Row:2 Cell:3 | Row:2 Cell:4 |
| Row:3 Cell:1 | Row:3 Cell:2 | Row:3 Cell:3 | Row:3 Cell:4 |
| Row:4 Cell:1 | Row:4 Cell:2 | Row:4 Cell:3 | Row:4 Cell:4 |
| Row:5 Cell:1 | Row:5 Cell:2 | Row:5 Cell:3 | Row:5 Cell:4 |
| Row:6 Cell:1 | Row:6 Cell:2 | Row:6 Cell:3 | Row:6 Cell:4 |
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
Un grand merci à vous pour tous vos conseils.
RépondreSupprimerJe 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é"...
RépondreSupprimerMerci, Shé, et bon week-end !
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épondreSupprimerj'espère qu'ils vous serviront..
RépondreSupprimernormalement oui, car du format Html.
RépondreSupprimerje ne connais ps très bien le fonctionnement de WordPress
Je confirme, ça fonctionne pareil.
RépondreSupprimermerci pour le feedback !!
RépondreSupprimerbonjour 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
RépondreSupprimerbon dimanche à toi
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épondreSupprimerBonjour Unfluster,
RépondreSupprimerLa 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
bonjour Tomate joyeuse,
RépondreSupprimerMerci 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
Bonjour Zwooff,
RépondreSupprimerpour 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
merci c'est top votre explication .chapeau.
RépondreSupprimerBonjour, pourriez-vous partager le code que vous utilisez pour le tableau de HTML Table Generator svp ?
RépondreSupprimerCelui 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.
bjr,
RépondreSupprimercomment cela ? cela marche normalement,
essayer cela
RépondreSupprimer.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
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