ThéorieFonctionnalitésContenu

Créer des tableaux avec des images dans les articles


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Tableau avec images
L'un des avantages avec Blogger, c'est que l'on peut éditer tout ce que l'on veut (ou presque).
L'éditeur des articles est pourvu d'un mode "rédaction", avec des fonctionnalités qui permettent d'enrichir facilement le contenu. Très pratique pour ceux qui veulent écrire des articles rapidement.
Et puis, il y a le mode "HTML" qui permet de compléter ou de corriger le contenu des articles.
Dans ce mode, on peut envisager par exemple, de créer un tableau avec des images.
Ça tombe bien, c'est le sujet de cette publication :D.


Créer un tableau

Bien évidemment, avant de se lancer dans le HTML, il faut savoir maîtriser un peu le sujet.
Si ce n'est pas votre cas, je vous envoie vers les cours de w3schools.com. Il y a également tout un chapitre consacré aux tableaux.

Comme expliqué dans ce cours, un tableau est composé de rangées et de cellules.
Ici, on va se concentrer sur un simple tableau. Sans titre et sans chichi.

Dans ce premier exemple, créons un tableau composés d'une rangée et 3 cellules :

<table>
  <tr>
    <td>
      Cellule 1
    </td>
    <td>
      Cellule 2
    </td>
    <td>
      Cellule 3
    </td>
  </tr>
</table>

  • En rouge, la balise table indique la création d'un tableau.
  • En bleu, la balise tr indique la création d'une rangée de cellules.
  • En vert, la balise td indique la création d'une cellule.

C'est entre <td> et </td> que nous ajouterons les images un peu plus tard.

Dans le second exemple, créons un tableau avec 3 rangées qui contiennent 3 cellules.

<table>
  <tr>
    <td>
      Rangée 1 - Cellule 1
    </td>
    <td>
      Rangée 1 - Cellule 2
    </td>
    <td>
      Rangée 1 - Cellule 3
    </td>
  </tr>
  <tr>
    <td>
      Rangée 2 - Cellule 1
    </td>
    <td>
      Rangée 2 - Cellule 2
    </td>
    <td>
      Rangée 2 - Cellule 3
    </td>
  </tr>
  <tr>
    <td>
      Rangée 3 - Cellule 1
    </td>
    <td>
      Rangée 3 - Cellule 2
    </td>
    <td>
      Rangée 3 - Cellule 3
    </td>
  </tr>
</table>

Pour que le tableau soit conforme, chaque rangée <tr> doit contenir le même nombre de cellules <td>.

A noter que si vous basculez du mode HTML vers le mode "Rédaction", Blogger rajoutera les balises <tbody>. Ce qui signifie, "le corps du tableau".
N'y prêtez pas attention.

Voilà donc le principe élémentaire pour la construction d'un tableau.
Comme vous le constaterez bien vite en lisant w3Schools.com, on peut peaufiner, en fusionnant des cellules, en ajoutant des bordures, des titres aux colonnes et aux rangées, etc. Mais ce n'est pas le sujet de cette publication.
Si vous avez compris le principe de base, vous pouvez passer à l'étape suivante : Ajouter des images.


Haut de page


Ajouter des images dans les cellules d'un tableau

Vous pouvez procéder de 2 manières :

En écrivant en HTML :

Simple image sans attribut.
<img src="URL_DE_L'IMAGE"/>

Simple image avec attributs alt et title.
<img src="URL_DE_L'IMAGE" alt="texte alternatif" title="texte du titre"/>

Image avec lien.
<a href="URL"/>
<img src="URL_DE_L'IMAGE"/>
</a>


La deuxième méthode est plus fastidieuse, il s'agit d'ajouter les images en mode "rédaction" en utilisant les outils d'automatisation de Blogger. L’inconvénient avec cette méthode, les cellules sont invisibles et il est donc très difficile de "viser juste".

Ça sera donc à chacun de trouver sa bonne méthode.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire