Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

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

Artikel empfehlen

Zusammenfassung häufig verwendeter Befehle für Linux-Dateioperationen

0. Neuer Betrieb: mkdir abc #Erstelle einen neuen...

Beispiel für die Migration einer MySQL-Online-Protokollbibliothek

Ich möchte Ihnen von einem aktuellen Fall erzähle...

So ändern Sie in Nginx die über http aufgerufene Website in https

Inhaltsverzeichnis 1. Hintergrund 2. Voraussetzun...

Installieren Sie das Linux-System automatisch basierend auf Cobbler

1. Komponenten installieren yum install epel-rpm-...

So verwenden Sie Tinymce in Vue3.0+ und implementieren die Funktion zum Hochladen mehrerer Bilder und zum Bearbeiten der Formel zum Hochladen von Dateien

Zugehörige Dokumente Ein Teil dieses Artikels wir...

MySQL-Indexoptimierung: Detaillierte Einführung in die Paging-Erkundung

Inhaltsverzeichnis MySQL-Indexoptimierung – Pagin...

LinkedIn wird überarbeitet, um das Surfen auf der Website zu vereinfachen

Das geschäftliche Social-Networking-Portal Linked...

Methode zur Implementierung von Website-Hintergrundmusik

Für einzelne Webmaster war es schon immer das Ziel...

Verwenden von CSS3 und JavaScript zum Entwickeln von Beispielcode für die Web-Farbauswahl

Die Web-Farbauswahlfunktion in diesem Beispiel ve...

Schritte und Methoden zur Bindung von Domänennamen und IPs in der Alibaba Cloud

1 Rufen Sie die Alibaba Cloud-Konsole auf, suchen...

So erstellen Sie eine MySQL-Master-Slave-Datenbank mit Docker unter MacOS

1. Ziehen Sie das MySQL-Image Holen Sie sich das ...

Lösung für die hohe CPU-Auslastung des Tomcat-Prozesses

Inhaltsverzeichnis Fall Kontextwechsel-Overhead? ...

Detaillierte Erklärung zum Ändern des Stils von el-select: popper-append-to-body und popper-class

So ändern Sie den Stil der von elementUI bereitge...

Javascript realisiert 10-Sekunden-Countdown zur Bezahlung

In diesem Artikel wird der spezifische Code von J...

Optimierung von Datentabellen in MySQL-Datenbanken, Analyse von Fremdschlüsseln und Nutzung von drei Paradigmen

Dieser Artikel veranschaulicht anhand von Beispie...