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

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs

Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs

Die richtige Verwendung von MySQL-Indizes und detaillierte Erklärung der Indexprinzipien

Lernen Sie Node.js von Grund auf

Zusammenfassung der grundlegenden Wissenspunkte der Linux-Gruppe

Das verteilte Überwachungssystem Zabbix verwendet SNMP- und JMX-Kanäle zum Sammeln von Daten

Beispiel für den Export und Import von Docker-Containern

„Implizite Konvertierung“ von MySQL 5.6 führt zu Indexfehlern und ungenauen Daten

JS-Interviewfrage: Kann forEach aus der Schleife aussteigen?

Detaillierte Erläuterung des Vue Router Routing Guard

nginx Konfigurationsort Zusammenfassungsort Regelmäßiges Schreiben und Umschreiben von Regeln

Artikel empfehlen

Detaillierte Erklärung der Filter und Anweisungen in Vue

Beispiel zur Erhöhung des Swap-Speichers im CentOS7-System

Beispielcode zur Implementierung der Menüberechtigungssteuerung in Vue

el-table in vue realisiert automatischen Deckeneffekt (unterstützt feste)

TypeScript-Lernhinweise: Typeingrenzung

Erklärung der Funktionsweise und Verwendung von Redux

nginx Konfigurationsort Zusammenfassungsort Regelmäßiges Schreiben und Umschreiben von Regeln

Vertieftes Verständnis davon in JavaScript

Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini

So ändern Sie die Systemsprache von CentOS7 in vereinfachtes Chinesisch

Analyse der Vor- und Nachteile von gespeicherten MySQL-Prozeduren

32 typische spalten-/rasterbasierte Websites

Detailliertes Beispiel für die Blockierung von Flash durch HTML-Elemente

Zusammenfassung der Linux Logical Volume Management (LVM)-Nutzung

Detailliertes Tutorial zum Erstellen eines privaten Git-Servers unter Linux