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. <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
Detaillierte Erklärung der Verwendung und Erfahrung mit tinyMCE
Detaillierte Erklärung der tinyMCE-Verwendung Ini...
Detaillierte Erklärung zum Herunterladen, Installieren und Verwenden des Nginx-Servers
herunterladen http://nginx.org/en/download.html E...
Beheben Sie das Problem der Kennwortänderung bei der ersten Anmeldung nach der Installation von MySQL 8.0
Hier finden Sie eine Einführung zum Ändern des Pa...
Die neueste Installations- und Konfigurationsmethode für MySQL-5.7.21
1. Entpacken Sie das heruntergeladene MySQL-Kompr...
Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue
1. Zuerst erstellen wir eine JSON-Datei zur inter...
Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL
Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...
Detaillierte Erläuterung der Verwendung von Redux bei der nativen WeChat-Applet-Entwicklung
Prämisse In komplexen Szenarien müssen große Date...
So verwenden Sie JavaScript, um die am häufigsten wiederholten Zeichen in einer Zeichenfolge abzurufen
Inhaltsverzeichnis Thema analysieren Gebrauchsgeg...
Anwendung von Hadoop-Zählern und Datenbereinigung
Datenbereinigung (ETL) Vor dem Ausführen des MapR...
So berechnen Sie mit Linux den von zeitgesteuerten Dateien belegten Speicherplatz
Öffnen Sie den Editor für geplante Aufgaben. Cent...
Docker installiert Redis und führt den visuellen Client für den Betrieb ein
1 Einleitung Redis ist eine leistungsstarke, auf ...
MySQL-Komplettabsturz: Detaillierte Erklärung der Abfragefilterbedingungen
Überblick In tatsächlichen Geschäftsszenarioanwen...
Schritte zum Aufteilen und Komprimieren von CSS mit Webpack und zum Importieren mit Link
Schauen wir uns zunächst die Codedateistruktur an...
Datums- und Zeitkomponente des WeChat-Applets (Jahr, Monat, Tag, Stunde und Minute)
In diesem Artikelbeispiel wird der spezifische Co...
Schritte zur Lösung des Zeitzonenproblems in MySQL 8.0
Softwareversion Windows: Windows 10 MySQL: mysql-...