Detaillierte Erklärung der Lösung des Problems des Zusammenführens von Zeilen und Spalten in Tabellen in HTML

Detaillierte Erklärung der Lösung des Problems des Zusammenführens von Zeilen und Spalten in Tabellen in HTML

Da wir eine Website erstellen wollten, enthielt der Inhalt neben langen Textabsätzen auch eine große Anzahl von Tabellen, was zu Problemen mit dem Tabellenlayout führte.

Eine einfache Tabelle wie:

Dieses Formular ist relativ einfach, einfach nur <tr></tr><td></td> (oder <th></th>

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<Stil>
td{width:200px;
   Höhe: 100px;
   Rand: #000 2px durchgezogen;
   Rand: 0px;
   Polsterung: 0px;
}
</Stil>
</head></p><p><body>
<Tabelle>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</Tabelle>
</body>
</html>

Wenn jedoch ungleichmäßige Abstände vorhanden sind, müssen Sie Colspan (über Spalten) und Rowspan (über Zeilen) verwenden.

colspan (über Spalten) und rowspan (über Zeilen) haben dieselbe Bedeutung wie die Oberflächenbedeutung und können auch als Zusammenführung von Zeilen und Spalten betrachtet werden.

colspan (über Spalten):

Der rote Teil im obigen Bild zeigt an, dass sich die Zelle über zwei Spalten erstreckt.
Der Code lautet wie folgt (nur ein Teil des Codes):

<Tabelle>
<tr>
<td colspan="2" style="Hintergrund:#F00"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</Tabelle>

Wenn Sie eine solche übersichtliche Tabelle wünschen, müssen Sie zunächst die Anzahl der Zellen in der Zeile unter der Zeile schätzen, in der sich die aufzuspannende Zelle befindet. Dadurch wird die Anzahl der aufzuspannenden Zellen bestimmt.

Nehmen wir das obige Bild als Beispiel: Die Anzahl der Gitter in der zweiten und dritten Reihe beträgt 3. Wenn Sie also den Effekt im obigen Bild erzielen möchten, müssen die erste Reihe und die erste Spalte zwei Spalten umfassen, also colspan="2"

Die Methode Rowspan (über Zeilen) ähnelt der Methode Colspan (über Spalten).

Beispiele für das gleichzeitige Auftreten von „rowspan“ (über Zeilen) und „colspan“ (über Spalten):

Der Code lautet wie folgt (nur ein Teil des Codes):

<Tabelle>
<tr>
<th></th>
<th colspan="5"></th>
</tr>
<tr>
<th></th>
<th <span style="color:#000000;">colspan</span>="3"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th rowspan="3"></th>
<th></th>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
</Tabelle>
<Tabelle>
<tr Klasse="zj">
<th rowspan="4"></th>
<th colspan="8"></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th colspan="4"></th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th></th>
<th colspan="7"></tr>
</Tabelle>

Dies ist das Ende dieses Artikels zur Lösung des Problems des Zusammenführens von Zeilen und Spalten in HTML-Tabellen. Weitere Informationen zum Zusammenführen von Zeilen und Spalten in HTML-Tabellen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Verständnis und Lösungen für 1px-Linien in der mobilen Entwicklung

>>:  Empfehlen Sie einen coolen blinkenden Alarmknopf

Artikel empfehlen

Tiefgreifendes Verständnis der sieben Kommunikationsmethoden von Vue-Komponenten

Inhaltsverzeichnis 1. Requisiten/$emit Einführung...

Der Prozess der Installation von MySQL 8.0.26 auf CentOS7

1. Laden Sie zunächst die entsprechende Datenbank...

Die perfekte Lösung, um das Passwort in mysql8.0.19 zu vergessen

Lesetipp: MySQL 8.0.19 unterstützt Kontosperrfunk...

isPrototypeOf-Funktion in JavaScript

Inhaltsverzeichnis 1. istPrototyp von() Beispiel ...

Vue verwendet benutzerdefinierte Anweisungen, um Wasserzeichen am unteren Seitenrand hinzuzufügen

Projektszenario Fügen Sie dem gesamten Hintergrun...

Entwicklung einer Vue Element-Frontend-Anwendung zum Abrufen von Backend-Daten

Inhaltsverzeichnis Überblick 1. Erfassung und Ver...

SQL-Implementierung von LeetCode (177. N-höchstes Gehalt)

[LeetCode] 177.N-höchstes Gehalt Schreiben Sie ei...

19 MySQL-Optimierungsmethoden im Datenbankmanagement

Nach der MySQL-Datenbankoptimierung kann nicht nu...

Docker installiert Redis 5.0.7 und behebt externe Konfigurations- und Datenprobleme

Redis ist eine Open-Source-NoSQL-Datenbank, die i...

Lösen Sie das Problem, dass Docker das MySQL-Image zu langsam zieht

Nachdem wir eine halbe Stunde lang versucht hatte...

Websocket+Vuex implementiert eine Echtzeit-Chat-Software

Inhaltsverzeichnis Vorwort 1. Der Effekt ist wie ...

So setzen Sie das MySQL-Root-Passwort unter Windows zurück

Heute habe ich festgestellt, dass WordPress keine...

Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden

Inhaltsverzeichnis 1. Einleitung 2. Lösung 2.1 Ko...

Zusammenfassung von fünf Befehlen zum Überprüfen des Swap-Speichers in Linux

Vorwort Unter Linux können zwei Arten von Swap-Sp...

Zusammenfassung einiger meiner häufig verwendeten Linux-Befehle

Ich habe zwei Jahre lang im Betrieb und in der Wa...