Bild innerhalb einer Tabellenzelle in HTML hinzufügen

Dieser Artikel stellt eine Methode vor, um Bilder in die Tabellenzelle in HTML einzufügen.

Verwenden Sie das img-Tag, um ein Bild innerhalb des td-Elements in HTML hinzuzufügen

Wir können das img-Tag im td-Element, den Tabellendaten, verwenden, um ein Bild in die Tabellenzelle einzufügen. Ein td-Tag definiert jede Zelle in der Tabelle.

Alle Daten innerhalb von <td></td> sind der Inhalt der Tabellenzelle. Wir können die Bildquelle im img-Tag angeben.

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

Dadurch wird das Bild mit dem Namen image.jpg in einer Tabellenzelle angezeigt.

Erstellen Sie beispielsweise eine Tabelle mit dem Tag table. Geben Sie ihm im Attribut border eine Umrandung von 3, damit die Umrandung in der Tabelle sichtbar ist.

Als nächstes erstellen Sie drei Tabellenzeilen mit dem tr-Tag. Das erste tr steht für die Tabellenüberschriften th, die anderen für die Tabellendaten td.

Geben Sie in der ersten Tabellenzeile tr die Überschriften Name, Address und Image mit dem Tag th an. Geben Sie dann in der zweiten und dritten Zeile den Namen, die Adresse und das Bild innerhalb von td an.

Schreiben Sie zum Beispiel Jack Austin und France als Tabellendaten für das zweite tr.

Erstellen Sie dann innerhalb des td das img-Tag wie oben gezeigt und fügen Sie ein Bild ein. Füllen Sie auf ähnliche Weise die Daten für die zweite Zeile aus.

Geben Sie die Höhe und Breite für das Bild innerhalb des img-Tags mit den Attributen height und width an.

Das folgende Beispiel zeigt die Implementierung der obigen Anweisung, um das Bild in die Tabellenzelle einzufügen. Es gibt drei Zeilen in der Tabelle.

Die erste Zeile enthält die Überschrift jeder Spalte, und die restlichen Zeilen enthalten die Daten.

Wir haben in der dritten Spalte der Tabelle ein Bild mit dem img-Tag hinzugefügt. Wir haben gelernt, dass das Tag img überall dort geschrieben werden kann, wo wir das Bild eingefügt haben.

Wir gehen davon aus, dass sich das Bild im selben Ordner/Verzeichnis wie die HTML-Datei befindet. Der korrekte Bildpfad muss im src des img-Tags angegeben werden; Andernfalls wird das Bild nicht angezeigt.

Beispielcode:

<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>