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

Ajout D Une Image A L Interieur D Une Cellule De Tableau En Html



Des tableaux sont utilisés pour organiser les données de manière lisible. Ils ont une disposition de type graphique pour afficher des données, telles que des statistiques, des images, etc. En HTML, le tableau est créé en utilisant le ' » et l'élément « La balise ' est utilisée pour intégrer l'image dans un document. Les attributs les plus significatifs utilisés dans la balise ' ' sont ' tout ' et ' src ”.

Cet article expliquera une procédure pour ajouter une image à l'intérieur de la cellule du tableau en HTML.

Comment ajouter une image dans une cellule de tableau en HTML ?

Le HTML ' ” est utilisé pour insérer une image dans une cellule du tableau.







Syntaxe



Suivez la syntaxe pour intégrer une image dans la cellule du tableau :



< td >< image src = '' tout = '' largeur = '' >< / td >

Ici:





  • '
    ” indique la cellule du tableau où l'image doit être ajoutée.
  • ' ” La balise est utilisée pour spécifier l'image.
  • ' src ” L'attribut définit le chemin de l'image.
  • ' tout ” signifie le texte qui sera affiché à l'écran en cas d'échec du chargement de l'image.
  • ' largeur ” détermine la largeur de l'image.

Exemple

Dans le fichier HTML, créez un tableau en suivant les instructions fournies :

  • '
” est utilisé pour créer un tableau.
  • '
  • ” élément spécifie une ligne.
  • '
  • ' ajuste un titre où le ' colpan ” La propriété indique le nombre de colonnes qu'une cellule doit couvrir.
  • '
    ” crée des cellules de tableau pour les données. Les ' ” les balises avec les attributs requis sont insérées dans cette balise pour intégrer les images dans une cellule de tableau :
  • < tableau >

    < tr >

    < e colpan = '3' style = 'taille de la police : 28px ;' >Fruits et Légumes< / e >

    < / tr >

    < tr >

    < e >Nom< / e >

    < e style = 'largeur : 250px ;' >Image< / e >

    < e >Fruits / Légumes< / e >

    < / tr >

    < tr >

    < td >Pomme< / td >

    < td >< image src = '/images/pommes.jpg' tout = 'Pomme' largeur = '200' >< / td >

    < td >Fruits< / td >

    < / tr >

    < tr >

    < td >Carotte< / e >

    < td >< image src = '/images/carotte.jpg' tout = 'carotte' largeur = '200' >< / e >

    < td >Légume< / e >

    < / tr >

    < tr >

    < td >Orange< / e >

    < td >< image src = '/images/orange.jpg' tout = 'orange' largeur = '200' >< / e >

    < td >Fruits< / e >

    < / tr >

    < / tableau >

    On peut observer que le tableau HTML a été créé avec succès avec les images intégrées :



    CSS

    Nous allons maintenant discuter des propriétés CSS utilisées pour définir la disposition du tableau.

    Élément de style 'tableau'

    Tout d'abord, accédez au '

    ” par nom de balise et appliquez les propriétés suivantes :

    tableau {

    aligner le texte : centre ;

    largeur : 800px ;

    border-collapse : effondrement ;

    marge : auto ;

    taille de police : 20px ;

    }

    La description du code ci-dessus est donnée ci-dessous :

    • ' aligner le texte ” définit l'alignement du texte.
    • ' largeur ” détermine la largeur du tableau.
    • ' border-collapse ” La propriété définit si la bordure est réduite ou non.
    • ' marge ” ajoute de l'espace autour de la table.
    • ' taille de police ” définit la taille de police du texte du tableau.

    Élément de style 'th' et 'td'

    e , td {

    frontière : 1px solide violet ;

    }

    Ici le ' frontière ” La propriété ajuste la bordure autour des éléments en spécifiant les valeurs de largeur, de style et de couleur de la bordure.

    Sortir

    Cet article concerne l'insertion d'images dans la cellule du tableau en HTML.

    Conclusion

    Pour ajouter une image à l'intérieur du '

    ', utilisez la touche ' 'balise dans le HTML'
    ' élément. L'élément ' ' spécifie le ' src ” pour fournir l'URL de l'image. Plus précisément, pour ajuster la taille de l'image, ajoutez le ' la taille ' et ' largeur » dans la balise « ». Ce blog a illustré la procédure pour ajouter une image dans la cellule du tableau HTML.