Si les galeries d'images sont simples à mettre en oeuvre, elles ne répondent pas toujours à certains besoins spécifiques. L'usage des tableaux donne plus d'autonomie, mais en contrepartie réclame un minimum d'investissement pour maitriser le code HTML. En effet si le module Tableau de Jimdo permet de créer et de gérer des tableaux, il est nécessaire de passer en HTML, au moins pour y intégrer des images.

Notions de base HTML : Ce qui est dit ici ne saurait remplacer une documentation de référence telle que celle-ci. 

Toute page Internet est constituée d'un ensemble d'informations écrites dans le langage HTML, langage que nos navigateurs (Internet Explorer, FireFox et autres) savent interpréter pour nous présenter cette page à l'écran et sous la forme (disposition, dimensions, couleurs, ... etc.) attendue. Dans ce langage tout n'est que bloc, un bloc étant délimité par deux balises (en anglais des tags) :

• Une balise de début de bloc de la forme <balise ...>. Selon les cas, des attributs particuliers (les ...) peuvent être spécifiés.
• Une balise de fin de bloc de la forme </balise>

Tout ce qui est entre ces 2 balises constitue le bloc lui-même. Voici par exemple le code complet du site Internet le plus simple qu'on puisse imaginer (1 bloc html englobant un bloc body contenant Bonjour) :

Copiez/coller chez vous ce code dans un fichier toto.html et double-cliquez dessus, vous avez fait tout seul (sans Jimdo, sans personne) votre propre site internet. Bon d'accord, on s'en lasse vite . Mais souvenez vous en, c'est un bon moyen en cas de doute, pour tester un code HTML en local (sans toucher à son vrai site Jimdo).

Les tableaux en HTML : Un tableau en HTML utilise les balises suivantes :

balise <table> de début du bloc table

• balises <thead> et </thead> facultatives définissant l'entête (la ou les premières lignes) du tableau
• balises <tbody> et </tbody> facultatives (ajoutées automatiquement par Jimdo) définissant le corps du tableau
  • balises <tr> et </tr> définissant une ligne (de l'anglais row) du tableau
    • balises <td> et </td> définissant une cellule (de l'anglais data) du tableau
• balises <tfooter> et </tfooter> facultatives définissant le pied (la ou les dernières lignes) du tableau

balise </table> de fin du bloc table

Nous oublierons ici les blocs d'entête et de pied du tableau pour nous concentrer principalement sur les blocs ligne (entre <tr> et </tr>) et cellule (entre <td> et </td>).

Vous aurez compris qu'un bloc table contient un ou plusieurs blocs tr (un tableau est composé d'une ou plusieurs lignes) et qu'un bloc tr contient un ou plusieurs blocs td (sur une ligne, il y a une ou plusieurs cellules).

La construction d'un tableau va donc se faire ligne après ligne, cellule après cellule.

Dans un bloc td (dans une cellule), on va pouvoir trouver toutes sortes de blocs tels que des images, du texte ou des liens (contenant eux mêmes du texte ou des images). C'est surtout ce que nous allons retrouver dans nos exemples. Mais pour la petite histoire, une cellule de tableau pourrait contenir elle-même un autre tableau, une div, l'appel à un script et tout élément HTML.

Attributs des balises table, tr et td : Les balises table, tr et td ont ceci de remarquable : Les dimensions s'adaptent automatiquement au contenu des cellules et aux dimensions de la div dans laquelle se trouve le tableau. En pratique, il y a assez peu d'attributs à préciser au niveau des balises. D'autant plus que ces balises acceptent aussi l'attribut style qui permet d'exploiter toutes les possibilités du code CSS telles que color, width, height, background, font-size, etc .... 

• balise table :
  
  • border : permet de spécifier l'épaisseur des bordures ("0" c'est à dire sans bordure par défaut) 
• balises tr et td :
  • align : permet de spécifier l'alignement horizontal (left, right, center, justify) du contenu des cellules ("left" c'est à dire à gauche par défaut).
  • valign : permet de spécifier l'alignement vertical (top, middle, bottom) du contenu des cellules ("middle" c'est à dire au milieu par défaut).
• balise td :
  • colspan : permet de spécifier le nombre de colonnes (1 par défaut) couvertes par la cellule
  • rowspan : permet de spécifier le nombre de lignes (1 par défaut) couvertes par la cellule

Un exemple cas d'école pour illustrer :

Voici le code utilisé pour produire le tableau présenté à droite :

<table border="1" style="background:#00FFFF;">
  <tr align="center" >
    <td colspan="2" style="font-weight:bold;">Tarifs</td>
    <td >Disponibilité</td>  
  </tr>
  <tr>
    <td>en vrac</td>
    <td>10€</td>
    <td>Rupture de stock</td>
  </tr>
  <tr>
    <td>conditionné</td>
    <td>15€</td>
    <td>Disponible</td>
  </tr>
  <tr>
    <td>présentation luxe</td>
    <td>20€</td>
    <td rowspan="2">Sur commande uniquement</td>
  </tr>
  <tr>
    <td>super luxe</td>
    <td>25€</td>
  </tr>
</table>

Quelques détails sur les balises img et a : Pour que notre tableau ressemble à une galerie d'images style Jimdo, il va falloir mettre dans les cellules de notre tableau des images et/ou des liens. Pour les images c'est la balise img, pour les liens c'est la balise a.

• balise img : cette balise est un cas particulier (ce n'est pas la seule) en ce sens qu'on n'utilise pas de balise explicite de fin de bloc (</img). Pour fermer la balise img on utilise />
  
  • src : attribut obligatoire pour donner l'adresse (l'URL sous forme http://...) de l'image elle-même
  • width et height : ces attributs facultatifs permettent de préciser des dimensions en largeur (width) et hauteur (height) à notre image si celles de l'image d'origine ne conviennent pas. Ces dimensions sont exprimées en pixels. Pour éviter la déformation (étirement ou allongement) de l'image, on prendra garde ici de conserver le même rapport entre largeur et hauteur que celui de l'image d'origine.
  • title : cet attribut facultatif permet de définir un texte qui apparaitra automatiquement au survol de l'image par la souris.
• balise a : cette balise permet de diriger le navigateur vers une page internet (en général différente de la page courante) si le visiteur clique à l'intérieur du bloc contenu entre <a ...> et </a>.
  • href : attribut obligatoire pour donner l'adresse (l'URL) de la page cible. Cette URL peut faire référence à une ancre dans la page cible, en terminant cette adresse par /#ident où ident est l'identifiant unique d'un élément HTML de la page cible. Au paragraphe suivant, on a un exemple qui renvoie dans la page "tableau" de ce site mais directement vers l'élément paragraphe d'identifiant source. En effet dans cette page tableau, le source commence par le code HTML
    
    • <p id="source">Voici le source du tableau d'images</p>
  • target : lorsqu'il a la valeur "_blank", cet attribut permet d'ouvrir la page cible dans une nouvelle fenêtre (ou un nouvel onglet) sans fermer la page courante. Si l'attribut target n'est pas précisé, la page cible s'ouvre à la place de la page courante, pour revenir il faudra utiliser le bouton retour du navigateur.

Illustrations :

• Pour voir le rendu de notre exemple, voir ce tableau d'images.
• Le source de ce tableau est reproduit ici sur la même page

Lire la suite (Galerie réservoir d'images)