Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

Verwenden Sie HTML, um komplexe Tabellen zu erstellen. Komplexe Tabellen verwenden im Allgemeinen zwei Attribute von td: Rowspan- und Colspan-Attributwerte.

In HTML definiert das <td>-Tag eine Standardzelle in einer HTML-Tabelle.

(1) Das rowspan-Attribut gibt die Anzahl der Zeilen an, die eine Zelle umfassen kann.

(2) Das Attribut colspan gibt die Anzahl der Spalten an, die eine Zelle umfassen kann.

<html>   
<Kopf>   
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />   
    <title>Mehrere Header-Tabellen</title>   
</Kopf>   
<Text>   
<table id="tab" cellpadding="1" cellspacing="1" border="1">   
<tr>   
 <th rowspan="2">Seriennummer</th>
 <th rowspan="2">Überwachungsstandort</th>
 <th rowspan="2">Stromversorgungspfad</th>
 <th rowspan="2">Versorgungsspannung</th>
 <th rowspan="2">Laststrom</th>
 <th rowspan="2">Anzahl der Blitzeinschläge</th>
 <th rowspan="2">Zeitpunkt des letzten Blitzeinschlags</th>
 <th colspan="2">Offener Status des Backup-Schutzes</th>
 <th rowspan="2">SPD-Schadensmenge</th>   
 <th colspan="2">Ausgabe-Offen-Zustand</th>
</tr>   
<tr>   
 <th>Klasse B</th> 
 <th>C-Ebene</th>
 <th>1. Straße</th> 
 <th>2. Straße</th>  
</tr> 
<tr> <th rowspan="4">1</th>
</tr>  
<tr>   
    <th>1</th>   
    <th>78</th>   
    <th>96</th>   
    <th>67</th>   
    <th>98</th>   
    <th>88</th>   
    <th>75</th>   
    <th>94</th>   
    <th>69</th>   
    <th>23 </th>   
 <th>33 </th> 
</tr> 
<tr>
 <th colspan="2">Tipps und Vorschläge</th>   
    <th colspan="2">Status der intelligenten Blitzschutzbox</th>   
    <th colspan="2">Blitzschutzkastenmodell</th>   
    <th colspan="3">Seriennummer des Blitzschutzkastens</th>   
    <th colspan="2">Blitzschutzkasten-Version</th>
</tr>  
<tr>   
    <th colspan="2">Es wird empfohlen, die gesamte Maschine gemäß den Vorschriften zu überprüfen</th>   
    <th colspan="2">Online</th>   
    <th colspan="2">2018041201-035PF</th>   
    <th colspan="3">2018041201-256</th>   
    <th colspan="2">V1.0.0</th>   
</tr>    
</Tabelle>   
</body>   
</html>

Effektbild:

HTML-Tabelleneinstellungen ohne Rahmen und Trennlinien

Randlos

<table id="tbl" border=1 width="80%" frame=void ></table>

Das Frame-Attribut gibt die Regeln für die Rahmendarstellung an. Die verfügbaren Einstellungen sind wie folgt:

void Keine Grenze festlegen;
oben wird nur die obere Grenze angezeigt;
unten wird nur die untere Grenze angezeigt;
vsides zeigt nur linke und rechte Ränder an;
hsides zeigt nur die oberen und unteren Ränder an;
lhs zeigt nur den linken Rand an;
rhs Nur den rechten Rand anzeigen.

Keine Trennlinie

<table id="tbl" border=1 width="80%" rules=none ></table>

Das Attribut rules gibt die Regeln für die Anzeige von Trennlinien an. „none“ bedeutet überhaupt keine Trennlinie. Sie können auch „rows“ und „cols“ festlegen. Die wörtliche Bedeutung kann leicht zu Irreführungen führen. Bitte beachten Sie hier: rows bedeutet keine Trennlinie zwischen Zeilen, d. h. die Daten in derselben Zeile sind nicht durch eine Trennlinie getrennt; cols bedeutet keine Trennlinie zwischen Spalten, d. h. die Daten in derselben Spalte sind nicht durch eine Trennlinie getrennt.

Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung komplexer Überschriften in HTML-Tabellen. Weitere verwandte Inhalte zu komplexen Überschriften 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!

<<: 10 wichtige Unterschiede zwischen HTML5 und HTML4

>>: Vue3 erhält die aktuelle Routingadresse

Diagramm des Tutorials zum Herunterladen und Installieren von MySQL8.0 für Win10 64-Bit

Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

Diagramm des Tutorials zum Herunterladen und Installieren von MySQL8.0 für Win10 64-Bit

So verwenden Sie Docker-Container zur Implementierung der Proxy-Weiterleitung und Datensicherung

Detaillierte Erklärung der MySQL-Datenbank-Trigger

Zusammenfassung der 7 Protokolltypen in MySQL

Tutorial zur Installation von MYSQL8.X auf Centos

MySQL 8.0.21 Installationstutorial mit Bildern und Text

Grundlegende Schritte zur Verwendung einer Mysql-SSH-Tunnelverbindung

Gründe und Methoden zum Warten auf die Sperre der Tabellenmetadaten in MySQL

Detailliertes Beispiel für SpringBoot + nginx zum Erreichen der Ressourcen-Upload-Funktion

So verwenden Sie Vue+ElementUI Tree

Artikel empfehlen

HTML-Sonderzeichen-Konvertierungstabelle

Vue Element Front-End-Anwendungsentwicklung, dynamische Menü- und Routing-Assoziationsverarbeitung

Lösung für den ineffektiven globalen Stil der benutzerdefinierten Miniprogrammkomponente

Detaillierte Schritte zum Einrichten und Konfigurieren von NIS-Domänendiensten auf Centos8

So unterstützen Sie vollständiges Unicode in MySQL/MariaDB

Eine Reihe häufig verwendeter Betriebs- und Wartungsbefehle für Linux (Zusammenfassung)

So verwenden Sie Zen-Codierung in Dreamweaver

Gründe und Lösungen für die Auswahl des falschen Index durch MySQL

Detaillierte Erläuterung der Befehle zum Status und zur Leistung des Linux-Servers

Was bedeutet this.parentNode.parentNode (übergeordneter Knoten des übergeordneten Knotens)?

Detaillierte Erläuterung von drei Beziehungsbeispielen für MySQL-Fremdschlüssel

Detaillierte Erläuterung des Persistenzimplementierungsprinzips von Transaktionen in MySQL

Detaillierte Erklärung gängiger Befehle in MySQL 8.0+

Implementierung einer Fuzzy-Abfrage wie %% in MySQL

Beim Ändern eines Datensatzes in MySQL lautet die Aktualisierungsoperation Feld = Feld + Zeichenfolge