Was ist das „rowspan“-Attribut und wie wird es mit dem „td“-Element in HTML verwendet?

Was Ist Das Rowspan Attribut Und Wie Wird Es Mit Dem Td Element In Html Verwendet



In HTML ist das „ Reihenspanne „ ist ein Attribut, das beim Erstellen von Tabellen verwendet werden kann. Es wird üblicherweise verwendet, um mehrere benachbarte Zellen in vertikaler Richtung zusammenzuführen. Es kann verwendet werden, um komplexe Tischdesigns zu erstellen und gleichzeitig für den Benutzer ein visuelles Interesse zu wecken. Dadurch kann der Entwickler den HTML-Code reduzieren und die Lesbarkeit der Tabellen verbessern. Darüber hinaus kann das Attribut „rowspan“ dabei helfen, eine Tabelle zu organisieren, indem mehrere Zellen gruppiert werden.

Diese Anleitung zeigt, was das „rowspan“-Attribut ist und wie es mit dem „td“-Element verwendet wird.

Was ist ein „rowspan“-Attribut?

Das Attribut „rowspan“ wird verwendet, um mehrere Zellen in vertikaler Richtung zusammenzuführen. Es kann aufgerufen werden als „ rowspan = Wert ', bei dem die ' Wert „ist die Anzahl der Zeilen, die in vertikaler Richtung zusammengeführt werden müssen. Dies trägt dazu bei, die Lesbarkeit für den Benutzer zu verbessern und komplexe Daten ansprechender für den Benutzer anzuzeigen.



Was ist ein „td“-Element?

Der ' td ” oder Tabellendatenelement wird verwendet, um eine Zelle innerhalb einer HTML-Tabelle zu definieren. Es wird meist in Verbindung mit anderen Tabellen-HTML-Elementen wie „“, „“, „

“ verwendet, um Tabelleninhalte zu erstellen. Es kann auch mit Attributen wie „colspan“ und „rowspan“ verwendet werden, um zusätzliche Designfunktionen hinzuzufügen, die Komplexität zu reduzieren und den Lesbarkeitsfaktor zu verbessern usw. Es wird in der HTML-Datei mit dem „ ”-Tags, die die Zeilen in die Tabelle einfügen und das „
' Schild.



Wie verwende ich das „rowspan“-Attribut mit dem „td“-Element?

Zur besseren Demonstration der Beziehung zwischen dem „rowspan“-Attribut und dem „td“-Element. Lassen Sie uns ein praktisches Beispiel durchgehen, indem wir der folgenden Schritt-für-Schritt-Anleitung folgen:



Schritt 1: Erstellung einer Tabelle in HTML

Erstellen Sie zunächst eine Tabelle mit Hilfe des „ ' Schild. Fügen Sie darin mehrere „

”-Tag zum Erstellen von Zellen:



< Stil >

Tisch{

border-collapse:collapse;

Rand: 40px;

}

th,td{

Grenze:2px durchgehend rot;

Polsterung: 20px;

}

< / Stil >

< / Kopf >

< Körper >

< Tisch >

< tr >

< Th > emp.id < / Th >

< Th > Mitarbeitername < / Th >

< Th > Gehalt < / Th >

< / tr >

< tr >

< td > 1 < / td >

< td > John < / td >

< td > 160.000 < / td >

< / tr >

< tr >

< td > 2 < / td >

< td > Joseph < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 3 < / td >

< td > Angela < / td >

< td > 120.000 < / td >

< / tr >

< tr >

< td > 4 < / td >

< td > Scharlach < / td >

< td > 80.000 < / td >

< / tr >

< / Tisch >

< / Körper >

Im obigen Codeausschnitt:

  • Zunächst wurden die fünf Zeilen erstellt und jeder Zelle werden einige Dummy-Daten bereitgestellt.
  • Als nächstes wird das „ Tisch ”-Element ausgewählt ist und das „ Zusammenbruch „Wert für das CSS“ Grenzkollaps ' Eigentum.
  • Danach wird das „ Grenze ' Und ' Polsterung „Eigenschaften werden verwendet, um die Sichtbarkeit des Benutzers zu verbessern und einen attraktiven Effekt für den Benutzer zu erzielen.

Nach der Ausführung des Codes sieht die Tabelle folgendermaßen aus:



Die obige Ausgabe zeigt, dass die Tabelle erstellt und gestaltet wurde.

Schritt 2: Verwenden des „rowspan“-Attributs mit dem „td“-Element

Der ' Reihenspanne ”-Attribut verbindet benachbarte Zellen in vertikaler Richtung. Es wird mit dem „

” Element/Tag. Das Attribut nimmt eine Zahl als Wert an und gibt an, wie viele Zellen in vertikaler Richtung zusammengeführt werden. Die nächste angrenzende Zelle muss eine Zelle weniger haben, und dieser Platz wird durch das „rowspan“-Attribut wie unten gezeigt gefüllt:

< Körper >

< Tisch >

< tr >

< Th >Emp.id< / Th >

< Th >Name des Mitarbeiters< / Th >

< Th >Gehalt< / Th >

< / tr >

< tr >

< td > 1 < / td >

< td >John< / td >

< td > 160 .000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >Joseph< / td >

< td Reihenspanne = „2“ > 120 .000< / td >

< / tr >

< tr >

< td > 3 < / td >

< td >Angela< / td >

< / tr >

< tr >

< td > 4 < / td >

< td >Scharlachrot< / td >

< td > 80 .000< / td >

< / tr >

< / Tisch >

< / Körper >

Im obigen Code:

  • Der „rowspan“ ist mit dem Mitarbeiter verbunden, der ein „ Gehalt ” td-Element.
  • Der Wert von ' 2 „wird für das Attribut „rowspan“ bereitgestellt, das die gleichen Daten in beiden benachbarten Zellen festlegt, wie unten gezeigt:

Die Ausgabe zeigt, dass die beiden Zellen zusammengeführt werden und die Lesbarkeit für den Benutzer nun verbessert wird.

Abschluss

Der ' Reihenspanne Das Attribut funktioniert mit dem „ td ”-Element, um mehrere benachbarte Zellen in vertikaler Richtung zusammenzuführen. Das Attribut nimmt eine Zahl als Wert und gibt an, wie viele Zellen zusammengeführt werden. Es wird dort verwendet, wo dieselben Daten mehreren Zellen bereitgestellt werden. Dieser Blog hat gezeigt, was „rowspan“ ist und wie man es mit dem „td“-Element in HTML verwendet.

Andere

Kategorie

Beliebte Beiträge

30 Beispiele für die C++-Vektoren

Sichern Sie Raspberry Pi-Daten mit Duplicati

Remote auf einen bestimmten Git-Commit zurücksetzen

Verwendung von Kubernetes nodeSelector

Wie überprüfe ich, ob in Windows 11 verwendete Ports verwendet werden?

So konvertieren Sie Markdown in HTML

So sichern Sie Ihr Windows-Benutzerkonto

Hinzufügen von 1 Tag zu einem Datum mit JavaScript

So zeichnen Sie in MATLAB ein Diagramm

Mounten Sie das Laufwerk unter Linux

Wie klont man das öffentliche GitHub-Repository in Git?

So beheben Sie, dass die Xbox-App in Windows 10 nicht geöffnet wird

Git-Commit-Nachricht: Best Practices

Wie erhalte ich SHA des neuesten Commit aus dem Remote-Git-Repository?

Liste der 10 besten datenwissenschaftlichen Bücher und Beschreibungen für den Generalisten

Wie kann ich eine einzelne Datei vom Remote Origin Master auschecken/aktualisieren?

So installieren Sie Google Chrome unter Kali Linux

Verwandeln Sie Raspberry Pi mit Hamachi in ein virtuelles privates Netzwerk

So manipulieren und steuern Sie Daten mit dem Bash-Array

Wie kann ich Git lokal verwenden?