Diese Beschreibung erläutert ein Verfahren zum Hinzufügen eines Bildes innerhalb der Tabellenzelle in HTML.
Wie füge ich ein Bild in einer Tabellenzelle in HTML hinzu?
Der HTML-Code „
Syntax
Folgen Sie der Syntax, um ein Bild in die Tabellenzelle einzubetten:
< td >< Bild Quelle = '' alles = '' Breite = '' >< / td >
Hier:
- „
”-Element gibt die Tabellenzelle an, in der das Bild hinzugefügt werden muss. - „
”-Tag wird verwendet, um das Bild anzugeben. - „ Quelle ”-Attribut legt den Pfad des Bildes fest.
- „ alles ” bezeichnet den Text, der auf dem Bildschirm angezeigt wird, falls das Bild nicht geladen werden kann.
- „ Breite “ bestimmt die Breite des Bildes.
Beispiel
Erstellen Sie in der HTML-Datei eine Tabelle, indem Sie die bereitgestellten Anweisungen befolgen:
- „
”-Element wird verwendet, um eine Tabelle zu erstellen. - „
”-Element gibt eine Zeile an. - „
“ passt eine Überschrift an, wo das „ colspan ”-Eigenschaft gibt an, wie viele Spalten eine Zelle abdecken soll. - „
” erstellt Tabellenzellen für Daten. Die ' ”-Tags mit den erforderlichen Attributen werden innerhalb dieses Tags eingefügt, um die Bilder in eine Tabellenzelle einzubetten: < Tisch >
< tr >
< th colspan = '3' Stil = 'Schriftgröße: 28px;' >Obst und Gemüse< / th >
< / tr >
< tr >
< th >Name< / th >
< th Stil = 'Breite: 250px;' >Bild< / th >
< th >Obst / Gemüse < / th >
< / tr >
< tr >
< td >Apfel< / td >
< td >< Bild Quelle = '/images/apples.jpg' alles = 'Apfel' Breite = '200' >< / td >
< td >Obst< / td >
< / tr >
< tr >
< td >Karotte< / th >
< td >< Bild Quelle = '/images/karotte.jpg' alles = 'Karotte' Breite = '200' >< / th >
< td >Gemüse< / th >
< / tr >
< tr >
< td >Orange< / th >
< td >< Bild Quelle = '/images/orang.jpg' alles = 'Orange' Breite = '200' >< / th >
< td >Obst< / th >
< / tr >
< / Tisch >Es kann beobachtet werden, dass die HTML-Tabelle zusammen mit eingebetteten Bildern erfolgreich erstellt wurde:
CSS
Nun werden wir die CSS-Eigenschaften besprechen, die zum Festlegen des Layouts der Tabelle verwendet werden.
Stilelement „Tabelle“.
Greifen Sie zunächst auf „
Tisch {”-Element nach Tag-Namen und wenden Sie die folgenden Eigenschaften an:
Textausrichtung : Center ;
Breite : 800px ;
Grenze zusammenbrechen : Zusammenbruch ;
Rand : Auto ;
Schriftgröße : 20px ;
}Die Beschreibung des obigen Codes ist unten angegeben:
- „ Textausrichtung ” legt die Textausrichtung fest.
- „ Breite “ bestimmt die Breite der Tabelle.
- „ Grenze zusammenbrechen ”-Eigenschaft definiert, ob der Rahmen eingeklappt ist oder nicht.
- „ Rand “ fügt Platz um den Tisch hinzu.
- „ Schriftgröße “ definiert die Textschriftgröße der Tabelle.
Stil „th“ und „td“ Element
th , td {
Grenze : 1px fest Violett ;
}Hier das ' Grenze ”-Eigenschaft passt den Rahmen um die Elemente an, indem sie die Werte für Rahmenbreite, Stil und Farbe angibt.
Ausgabe
In diesem Beitrag dreht sich alles um das Einfügen von Bildern in die Tabellenzelle in HTML.
Fazit
Um ein Bild in das „
” Zelle verwenden Sie die “ „Tag innerhalb des HTML“ ' Element. Das „ “-Element spezifiziert die „ Quelle ”-Attribut, um die Bild-URL bereitzustellen. Genauer gesagt, um die Bildgröße anzupassen, fügen Sie das „ Höhe ' und ' Breite “-Attribute innerhalb des „
“-Tags. Dieser Blog hat das Verfahren zum Hinzufügen eines Bildes in der HTML-Tabellenzelle veranschaulicht.
- „
- „