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

Verwenden Sie die CSS-Eigenschaft border-radius, um den Bogen festzulegen

Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

Verwenden Sie die CSS-Eigenschaft border-radius, um den Bogen festzulegen

Verbesserung der Aktualisierungsfunktion für Zen-Codierungsressourcen

So erstellen Sie ein Apr-Modul zur Tomcat-Leistungsoptimierung

Detaillierte Erläuterung der Konfiguration und Einführung des MySQL-Halbsynchron-Replikationsprinzips

Das KTL-Tool realisiert die Methode zum Synchronisieren von Daten von MySQL zu MySQL

So erstellen Sie Ihren eigenen nativen JavaScript-Router

Linux-Systemaufrufe für Betriebsdateien

XHTML-Tutorial für die ersten Schritte: XHTML-Webseiten-Bildanwendung

Detaillierte Schritte zum Herunterladen und Installieren von Tomcat unter Linux

So fügen Sie einen Docker-Port hinzu und erhalten eine Docker-Datei

Artikel empfehlen

Vue3.0 Adaptiver Betrieb von Computern mit unterschiedlichen Auflösungen

Eine kurze Erläuterung der Situationen in MySQL, die zu Indexfehlern führen

Grundlegende Verwendung der Funktion find_in_set in MySQL

Reine JS-Methode zum Exportieren von Tabellen nach Excel

Docker installiert Elasticsearch7.6-Cluster und legt Passwort fest

Nginx-Reverseproxy und Lastausgleichspraxis

So implementieren Sie einen einfachen HTML-Videoplayer

Optimierung der Datenbank-SQL-Anweisung

Detaillierte Schritte zum Ändern des Standardkennworts bei der Installation von MySQL in Ubuntu

mysql-5.7.28 Installations-Tutorial unter Linux

Detaillierte Erklärung der Getter-Verwendung in vuex

MySQL 8.0.13 Download- und Installations-Tutorial mit Bildern und Text

Die drei neuen Indizes, die in MySQL 8 hinzugefügt wurden, sind versteckt, absteigend und Funktionen

Detaillierte Erklärung der Unterschiede zwischen px-, em-, rem-, %, vw- und vh-Einheiten in CSS

Ein Debugging-Prozessprotokoll für chinesische Zeichentrickfiguren in der Startkonsole des Tomcat-Quellcodes