Insérer un tableau dans un article WordPress.com

Les tableaux c’est utile. Qui a dit non ? Oh, eh, tout doux… je ne vous parle pas des tableaux transparents que les webmestres des années 80 utilisaient à défaut de feuilles de styles (CSS). Non, ça c’est pas très W3C friendly. Je veux parler des « vrais » tableaux. Ceux qui servent à afficher des données dans des cellules organisées en lignes et en colonnes, comme les tableaux de statistiques. En voici un exemple :

Mes amis sur Facebook Mes amours sur Facebook Mes emmerdes sur Facebook
0 0 des tas

Pour arriver à ce résultat dans votre blog WordPress.com vous avez sûrement dû chercher un peu, non ? Allez allez, avouez que vous avez un tantinet googliser ou solliciter la communauté francophone de WordPress ! Normal, la création de tableaux dans l’éditeur de WordPress.com et .org n’existe pas. Pourquoi ? Peut-être justement pour éviter les mises en pages tordues que certains seraient encore tentés de créer avec des tableaux transparents. Ce n’est qu’une hypothèse et elle vaut ce qu’elle vaut. Quelqu’un dans l’assistance qui connaît la raison exacte ? En attendant un commentaire circonstancié, voici une solution pas trop complexe pour remédier à ce manque.

Insérer du code HTML dans un article

Il vous faudra donc vous palucher un peu de code HTML. Rassurez-vous, nul n’est besoin de connaître ce langage pour répondre à ce besoin. Les générateurs de code sont là pour ça ;-)

Expliquons en détails l’exemple précédent. Pour créer ce tableau de 3 colonnes et 2 lignes, il a fallu :

  • 1 pincée de bon sens
  • 2 sous d’astuce
  • une connaissance du HTML
  • une bonne dose de réussite

Blague à part, la recette est plutôt simple :

  1. Repérer l’onglet « TEXTE » (anciennement nommé « HTML ») présent dans l’éditeur de visuel-texteWordPress. Il permet d’afficher une partie du code HTML de l’article que vous rédiger. En cliquant sur ce bouton, vous aurez la possibilité d’ajouter du code, mais à condition qu’il soit propre sinon, gare à vos mises en page !
  2. Se rendre sur un générateur de code HTML. Biblioscript.com est de ceux-là.
  3. Paramétrer son tableau en indiquant dans la section « Démonstration » : la largeur du tableau en pixels, l’épaisseur de la bordure en pixels (0 donne un tableau transparent et 1 est la valeur des bordures de base), le nombre de lignes et de colonnes, puis générer le code.
  4. Copier soigneusement tout le code généré en n’oubliant pas les balises <table> et </table> qui encadrent un tableau HTML.
  5. Coller le code généré à l’endroit désiré dans la partie « TEXTE » de l’éditeur de WordPress. Il est conseillé de créer avant cela les textes qui apparaîtront avant et après le tableau. A défaut, vous pourrez mettre du faux texte que vous remplacerez par la suite.

Pour notre exemple, nous avons choisi de créer un tableau de 450 pixels de large, avec une bordure de 1 pixel d’épaisseur, 2 lignes et 3 colonnes. Le résultat sera 3 colonnes d’égale largeur soit 150 pixels par colonne. Voici le code HTML généré par Biblioscript.com :

<table cellspacing= »0″ cellpadding= »0″ width= »450″ border= »1″>
<tr>
<td>oxoxoxo</td>
<td>oxoxoxo</td>
<td>oxoxoxo</td>
</tr>
<tr>
<td>oxoxoxo</td>
<td>oxoxoxo</td>
<td>oxoxoxo</td>
</tr>
</table>

Voici le résultat avec du faux texte :

oxoxoxo oxoxoxo oxoxoxo
oxoxoxo oxoxoxo oxoxoxo

Chaque balise <tr> </tr> correspond à une ligne et le couple de balises <td> </td> représente une cellule. Il ne vous reste plus qu’à insérer entre chaque balise TD les données de votre tableau. Vous pouvez le faire dans la partie visuelle de l’éditeur de WordPress ou dans la partie « TEXTE », au choix. Notre préférence va quand même vers la partie « TEXTE ». Car, si elle est un peu barbare, elle est en revanche très stable, ce qui n’est pas le cas de l’éditeur visuel.

Insérer des images dans un tableau

Maintenant que vous savez créer un tableau dans un article, vous aurez peut-être parfois besoin d’introduire des images dans certaines de ses cellules. Ce n’est pas bien compliqué. La méthode est identique, mais il faudra ajouter une étape préalable.

Avant de créer un tableau, vous devrez insérer une image, comme vous le faites en temps normal avec le bouton :

ajouter-media

Une fois l’image insérée, rendez-vous dans la partie « TEXTE » de l’éditeur et récupérez le code généré par WordPress qui est encadré par les balises <a href> </a>. Stockez dans un bloc note chaque code de chaque image, puis réinsérez-le entre les balises TD.
Si vous trouvez des balises telles que caption /caption c’est que vous avez renseigné le champ « légende » de l’image insérée. Dans ce cas, assurez-vous de couper tous les éléments correspondant à l’image et à tous ses attributs.

Bonne chance !

18 Commentaires

Classé dans Mémos et tutos

18 réponses à “Insérer un tableau dans un article WordPress.com

  1. Bonjour,

    Tout d’abord, un grand merci pour ce tutoriel. Cependant, je rencontre un probleme qui est le suivant : les bordures de mon tableau ne s’affichent pas apres avoir indique 1px comme valeur. J’ai egalement essaye d’utiliser une extension « easy table creator » mais je fais face au meme probleme. Vous pouvez voir un exemple au bas de la page principale de mon site.
    En vous remerciant d’avance de l’aide que vous pourrez m’apporter.

  2. Bonjour et merci de votre commentaire. Je suis allé voir votre site et je crois comprendre que vous utilisez une autre solution de WordPress qui est plus personnalisable que celle que nous utilisons pour notre blog.

    Vous semblez utiliser le paquet WordPress.org que vous gérez sur votre propre hébergement.

    Dans notre cas, nous fonctionnons avec la solution grand public WordPress.com qui ne présente pas toutes les personnalisations (plugins notamment) que permet WordPress.org

    C’est peut-être la clé du mystère. Ceci dit, il n’y a pas vraiment de raisons pour que cela ne marche pas sur votre site.

    Est-ce que vous êtes allé voir dans la partie HTML de votre éditeur de texte ? Avez-vous accès au code où vous voyez l’attribut border= avec une valeur entre guillemets ? Si la valeur est égale à 1, vous aurez 1 pixel de border. Si elle est égale à 0, votre tableau sera transparent.

    Sinon, je viens de constater que dans l’article, il y a des erreurs qui se sont glissées dans le code informatique. Il des guillemets français qui se sont substitués de manière intempestive. Il faut donc corriger, pour les valeurs, avec des guillemets anglais.

    Dites-moi si cela évolue.

    Bonne chance.

    • Je constate que je n’ai pas la main sur les guillemets. Cela vient du thème que j’utilise qui les substitue automatiquement par des guillemets français (chevrons). Je ne peux malheureusement pas vous montrer le résultat sur cette page :-(

  3. Bonjour,

    Merci de m’avoir repondu.

    J’ai regle le probleme au sujet des bordures. Cela venait effectivement d’un element propre a mon theme qui concernait la partie screen.css.
    Cependant, la valeur largeur du tableau (300 pixels par exemple) n’affecte que la premiere colonne. Sauriez-vous comment changer la largeur des autres colonnes ?
    Merci encore pour votre aide.

  4. Pingback: Où trouver des protéines – les viandes |

  5. Samuel G.

    Je propose plus simple.
    1. Faire son tableau avec toutes les mises en forme nécessaires sur Excel.
    2. Enregistrer la sélection du tableau sous format html
    3. Ouvrir la page créée dans son navigateur web
    4. Afficher le code source et copier la partie concernée
    5. Coller dans l’éditeur html de son blog.
    Pas une seule ligne de code à écrire ni à modifier!
    Bon week end.

    • Merci Samuel pour cette remarque ;-) C’est effectivement une solution. Les amoureux du code propre te reprocheront néanmoins de passer par Excel qui génère du code très bavard. Je viens de tester et c’est plein de SPAN, de COLSPAN et de CLASS en tous genres, car il y a une CSS longue comme le bras dans le fichier créé par ce tableur.
      J’ai comparé avec ce que peut faire LIBRE OFFICE, digne héritier d’OpenOffice et là, c’est largement plus sobre et « browser friendly » : pas de CSS superflue. Du pur XHTML valide.
      Pour ma part, je reste minimaliste, avec des balises simplissimes qui ne font référence à aucune CSS, car je suis soucieux de respecter la feuille de style qui gère l’ensemble de l’interface. Ce n’est pas le boulot d’un rédacteur de styler un article. Cette tâche a déjà été prévue par le graphiste, garant de la cohérence visuelle des contenus d’une publication. Les utilisateurs de SPIP savent de quoi je parle, car les développeurs de ce CMS ont toujours refusé d’utiliser un éditeur WYSIWYG, justement pour éviter les dérapages des rédacteurs qui se prennent pour Di Rosa !
      Mais bon, cela fait partie d’un débat et je suis de la vieille école.

  6. associationlachaloupe

    pour avoir galéré à trouver un tableau simple et efficace sans rien connaître à la programmation ! merci, c’est génial !

  7. De passage, merci pour l’astuce « border= avec une valeur entre guillemets ? Si la valeur est égale à 1, vous aurez 1 pixel de border. Si elle est égale à 0, votre tableau sera transparent. »;

    Ça faisait quelque temps que je me baladais avec des tableaux transparents, ce temps est fini grâce à toi.

  8. Bonjour, je suis tombée sur votre article en cherchant à créer un encadré pour mon texte dans wordpress avec une couleur de fond pour le mettre en évidence. Je ne trouve malheureusement pas ma solution, du coup, je me permets de vous poser cette question, même si elle est un peu hors sujet…
    Un grand merci!

  9. Merci, j’ai pu faire ce que je voulais grâce à ça :)

  10. Tutoriel de très bonne qualité, je fait tourner!

  11. Dominique Bollaerts

    Bonjour.
    Merci pour toutes ces infos sur les tableaux.
    Je rencontre néanmoins un souci, quand il s’agit d’aligner verticalement mon texte ou ma photo. J’utilise la commande valign= »middle », mais le texte ne s’aligne pas correctement. Je pensais, au départ, que c’était dû à la présence d’une photo dans la première case de la ligne, mais la commande ne semble pas plus efficace quand la photo a disparu…
    Si vous avez une idée (pas trop compliquée, je débute…), je suis preneur :-) Merci beaucoup.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s