Cours N°16: Insérer une image dans un tableau

Ce tutoriel a été conçu par nos soins et est donc notre propriété exclusive. Toute ressemblance avec un autre existant ne serait que pure coïncidence. Il est interdit de recopier intégralement ou partiellement nos tutoriels qui sont exclusivement réservés aux membres de ce forum.

Pour ce cours nous allons apprendre à insérer une image simple et une image cliquable dans un tableau en html. Rappelons nous d'abord des balises employées pour créer le tableau :

- <table> est utilisé pour ouvrir votre tableau </table> en fin de tableau pour le fermer.

- border="1" se place dans la balise table. Si la valeur 1 est remplacé par 0 le tableau sera invisible. Plus la valeur est élevée plus le contour du tableau sera gros.

- <tr> représente chaque ligne horizontale de votre tableau.

- <td> représente chaque cellule d'un tableau.

- Pour ce tutoriel la balise bgcolor devient totalement inutile. A la place de celle-ci nous placerons le code html d'une image dans les cellules d'un tableau. (pour rappel voir cours N°7 comment insérer une image).


Nous allons donc commencer par créer un tableau sur deux étages avec deux cellules alignées :

<center><table border="2"><tr><td>EMPLACEMENT IMAGE</td><td>EMPLACEMENT IMAGE</td></tr><tr><td>EMPLACEMENT IMAGE</td><td>EMPLACEMENT IMAGE</td></tr></table></center>

Ce qui nous donne ceci :


Notre tableau est maintenant en place. Il nous faut donc insérer des images à l'intérieur de chaque cellule. Nous allons nous occuper de la première ligne en y insérant des images non cliquables. Voici le lien de l'image que nous allons utiliser :
http://www.pc-design-formation.com/users/1114/42/30/10/avatars/1-21.jpg

Plaçons maintenant cette image dans les deux cellules du haut:

<center><table border="2"><tr><td><img src="http://www.pc-design-formation.com/users/1114/42/30/10/avatars/1-21.jpg" border="0"/></td><td><img src="http://www.pc-design-formation.com/users/1114/42/30/10/avatars/1-21.jpg" border="0"/></td></tr><tr><td>EMPLACEMENT IMAGE</td><td>EMPLACEMENT IMAGE</td></tr></table></center>

En visuel cela nous donnera ceci :

Comme vous avez pu le remarquer la taille des cellules s'adaptent à la taille de l'image. A savoir que si vous placez des images de tailles différentes les cellules prendront obligatoirement le format de la plus grande d'entre elles.


Nous allons maintenant utiliser la même image pour les deux cellules du dessous en y insérant un lien. Le lien choisi :
http://www.pc-design-67.com

<center><table border="2"><tr><td><img src="http://www.pc-design-formation.com/users/1114/42/30/10/avatars/1-21.jpg" border="0"/></td><td><img src="http://www.pc-design-formation.com/users/1114/42/30/10/avatars/1-21.jpg" border="0"/></td></tr><tr><td><a href="http://www.pc-design-67.com" target="blank"><img src="http://www.pc-design-formation.com/users/1114/42/30/10/avatars/1-21.jpg" border="0"/></a></td><td><a href="http://www.pc-design-67.com" target="blank"><img src="http://www.pc-design-formation.com/users/1114/42/30/10/avatars/1-21.jpg" border="0"/></a></td></tr></table></center>




En visuel cela donne ceci :



------------------------------------------------------------------------


Exercice 1 :

Pour ce premier exercice je vous demanderai de reproduire les deux tableaux de ce tutoriel en utilisant l'image et le lien utilisé. (Evitez le copier coller cela ne vous aidera pas à apprendre).


Exercice 2 :

Afin de voir si vous avez compris le devoir nous allons changer l'image et le lien ainsi que la forme du tableau. Voici ce que je vous demande de reproduire :



Informations utiles

Attention dans le tableau ci-dessus il y a des images cliquables et d'autres non. Faites en sorte que le placement reste le même. Nous compliquerons un peu plus les devoirs pour les tutoriels suivants.

Voici le lien des images à utiliser :

image non cliquable https://nsm01.casimages.com/img/2009/03/31//090331103711201093406993.jpg

Image cliquable :
https://nsm01.casimages.com/img/2009/03/31//090331103140201093406966.jpg

Pour les liens cliquables je vous laisse le choix à partir du moment que les sites proposés restent conforment à la nétiquette du forum. Utilisez comme sur l'exemple trois liens différents.