Tabellen werden verwendet, um die Daten lesbar zu organisieren. Sie verfügen über ein dabellähnliches Layout, um Daten wie Statistiken, Bilder und mehr anzuzeigen. In HTML wird die Tabelle mit der “erstellt
Element und die “Das Tag wird verwendet, um das Bild in ein Dokument einzubetten. Die wichtigsten Attribute, die im Tag "" "verwendet werden, ist"Alt" Und "src”.
In diesem Artikel wird ein Verfahren zum Hinzufügen eines Bildes in der Tabellenzelle in HTML erläutert.
So fügen Sie ein Bild in der Tabellenzelle in HTML hinzu?
Die HTML "Das Tag wird verwendet, um ein Bild in eine Tabellenzelle einzulegen.
Syntax
Folgen Sie der Syntax, um ein Bild in die Tabellenzelle einzubetten:
Hier:
“
Das Element gibt die Tabellenzelle an, in der das Bild hinzugefügt werden muss.
“Das Tag wird verwendet, um das Bild anzugeben.
“srcDas Attribut legt den Pfad des Bildes fest.
“Alt”Bedeutet 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 den angegebenen Anweisungen folgen:
“
Element wird verwendet, um eine Tabelle zu erstellen.
“
”Element gibt eine Zeile an.
“
”Stellt eine Überschrift dort an, wo die“colspanEigenschaft bedeutet, wie viele Spalten eine Zelle abdecken sollte.
“
”Erstellt Tabellenzellen für Daten. Der "”Tags mit den erforderlichen Attributen werden in dieses Tag eingefügt, um die Bilder in eine Tabellenzelle einzubetten:
Früchte und Gemüse
Name
Bild
Obst/Gemüse
Apfel
Frucht
Karotte
Gemüse
Orange
Frucht
Es kann beobachtet werden, dass die HTML -Tabelle zusammen mit eingebetteten Bildern erfolgreich erstellt wurde:
CSS
Jetzt werden wir die CSS -Eigenschaften diskutieren, die verwendet werden, um das Layout der Tabelle festzulegen.
Stil „Tabelle“ Element
Erstens zu "auf die" zu "
Element nach Tag -Name und wenden Sie die folgenden Eigenschaften an: Tisch Text-Align: Mitte; Breite: 800px; Grenzkollapse: 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.
“GrenzkollapseEigentum definiert, ob die Grenze zusammengebrochen ist oder nicht.
“Rand”Fügt Platz um den Tisch hinzu.
“Schriftgröße”Definiert die Text Schriftgröße der Tabelle.
Stil „Th“ und „TD“ Element
th, td Grenze: 1px festes Lila;
Hier das "GrenzeDie Eigenschaft passt den Rand um die Elemente an, indem die Werte für Grenzbreite, Stil und Farbe angegeben werden.
Ausgang
In diesem Beitrag geht es darum, Bilder in die Tabellenzelle in HTML einzufügen.
Abschluss
Um ein Bild in die “hinzuzufügen“
"Zelle, benutze die""Tag innerhalb der HTML"
" Element. Das "" -Element gibt das "an"src”Attribut, um die Bild -URL bereitzustellen. Insbesondere, um die Bildgröße anzupassen, fügen Sie das hinzuHöhe" Und "BreiteAttribute innerhalb des Tags "". Dieser Blog hat das Verfahren veranschaulicht, um ein Bild in der HTML -Tabellenzelle hinzuzufügen.
