Ajouter une image à l'intérieur d'une cellule de tableau en HTML

Cet article présentera une méthode pour ajouter des images à l’intérieur de la cellule du tableau en HTML.

Utilisez la balise img pour ajouter une image à l’intérieur de l’élément td en HTML

Nous pouvons utiliser la balise img à l’intérieur de l’élément td, les données du tableau, pour ajouter une image à l’intérieur de la cellule du tableau. Une balise td définit chaque cellule du tableau.

Toutes les données à l’intérieur de <td></td> sont le contenu de la cellule du tableau. On peut préciser la source de l’image dans la balise img.

<td>
 <img src="image.jpg">
</td>

Cela affichera l’image nommée image.jpg dans une cellule du tableau.

Par exemple, créez un tableau à l’aide de la balise table. Donnez-lui une bordure de 3 dans l’attribut bordure ​​afin que la bordure dans le tableau soit visible.

Créez ensuite trois lignes de tableau à l’aide de la balise tr. Le premier tr est pour les en-têtes de tableau th, et les autres pour les données du tableau td.

Dans la première ligne tr du tableau, donnez les rubriques Name, Address et Image à l’aide de la balise th. Ensuite, dans les deuxième et troisième lignes, spécifiez le nom, l’adresse et l’image à l’intérieur de td.

Par exemple, écrivez Jack Austin et France comme données de table pour le deuxième tr.

Ensuite, à l’intérieur du td, créez la balise img comme indiqué ci-dessus et insérez une image. De même, remplissez les données de la deuxième ligne.

Spécifiez la hauteur et la largeur de l’image à l’intérieur de la balise img avec les attributs height et width.

L’exemple ci-dessous montre l’implémentation de l’instruction ci-dessus pour ajouter l’image à l’intérieur de la cellule du tableau. Il y a trois lignes dans le tableau.

La première ligne contient l’en-tête de chaque colonne et les lignes restantes contiennent les données.

Nous avons ajouté une image dans la troisième colonne du tableau en utilisant la balise img. Nous avons appris que la balise img pouvait être écrite partout où nous insérions l’image.

Nous supposons que l’image se trouve dans le même dossier/répertoire que le fichier HTML. Le chemin correct de l’image doit être spécifié dans le src de la balise img ; sinon, l’image ne sera pas affichée.

Exemple de code :

<table border="3" align="center">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Image</th>
  </tr>
  <tr>
    <td>Jack Austin</td>
    <td>France</td>
    <td><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>United States</td>
    <td height=100 width=100><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
</table>