Tabellen in HTML aufteilen und zusammenführen (colspan, rowspan)
|
Der Code demonstriert die horizontale Zusammenführung:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<title>Demonstration Tabellen-Tag 2 - Zellenzusammenführung</title>
<style type="text/css">
td{
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<table border="1" cellspacing="0" width="50%" height="150">
<caption>Zellen horizontal zusammenführen</caption>
<!--colspan muss die Anzahl der zusammenzuführenden Spalten angeben, also ob es zwei oder drei Spalten sind usw.-->
<tr> <th colspan="2">Name und Alter</th> <th>Telefonnummer</th> </tr>
<tr> <td>Jacke</td> <td>24</td> <td>1351234567</td> </tr>
<tr> <td>Tom</td> <td>22</td> <td>1351234567</td> </tr>
<tr> <td>Rose</td> <td>22</td> <td>1351234567</td> </tr>
<tr> <td>Mehr</td> <td>25</td> <td>1351234567</td> </tr>
</Tabelle>
<br/>
<table border="1" cellspacing="0" width="50%" height="150">
Laufergebnisse:
Der Code demonstriert die vertikale Zusammenführung:
<table border="1" cellspacing="0" width="50%" height="150">
<caption>Zellen vertikal zusammenführen</caption>
<tr><th>Klasse</t> <th>Name</th><th>Alter</th> <th>Telefon</th> </tr>
<tr><td rowspan="2">Klasse 601</td> <td>Jack</td> <td>24</td> <td>1351234567</td> </tr>
<tr> <td>Tom</td> <td>22</td> <td>1351234567</td> </tr>
<!--rowspan muss die Anzahl der zusammenzuführenden Spalten angeben, also ob es sich um zwei oder drei Zeilen handelt usw.-->
<tr><td rowspan="3">Klasse 602</td> <td>Rose</td> <td>22</td> <td>1351234567</td> </tr>
<tr> <td>Mehr</td> <td>25</td> <td>1351234567</td> </tr>
<tr> <td>Li Si</td> <td>25</td> <td>1351234567</td> </tr>
</Tabelle>
</body>
</html>Laufergebnisse:
Dies ist das Ende dieses Artikels über das Teilen und Zusammenführen von Tabellen (Colspan, Rowspan) in HTML. Weitere verwandte Inhalte zum Teilen und Zusammenführen von Tabellen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Beispielcode zur Implementierung eines zufälligen Roll Callers in HTML
>>: So fixieren Sie Inhalte beim Scrollen einer HTML-Seite an einer festen Position
Artikel empfehlen
Hinweise zum erweiterten Zeichengerätetreiber des Linux-Kernel-Gerätetreibers
/****************** * Erweiterter Zeichengerätetr...
Ausführliche Erklärung zu Sitzung und Cookie in Tomcat
Vorwort HTTP ist ein zustandsloses Kommunikations...
So benennen Sie unter Linux eine Gruppe von Dateien auf einmal um
Unter Linux verwenden wir normalerweise den Befeh...
Anfänger lernen einige HTML-Tags (2)
Verwandter Artikel: Anfänger lernen einige HTML-Ta...
Detaillierte Erläuterung des Prozesses zum Bereitstellen von MySql auf dem Centos-Server und zum Herstellen einer Verbindung mit Navicat
(1) Serverkonfiguration: [root@localhost ~]# cd /...
Tkinter verwendet JS-Canvas, um Farbverlaufsfarben zu erzielen
Inhaltsverzeichnis 1. Verwenden Sie RGB zur Darst...
Vorbereitung der Vue Element-Front-End-Anwendungsentwicklung für die Entwicklungsumgebung
Inhaltsverzeichnis Überblick 1. Entwickeln Sie di...
Installation und Bereitstellung des Linux-Tools Nethogs zur Überwachung der Netzwerkbandbreite nach Prozess
Überblick Es gibt viele Open-Source-Tools zur Net...
Lösung für das React-Programm „reine Funktionskomponente setState“ aktualisiert die Seitenaktualisierung nicht
Inhaltsverzeichnis Problembeschreibung: Ursachena...
Natives JS zur Implementierung der Drag-Position-Vorschau
In diesem Artikel wird eine kleine Demo gezeigt, ...
Beispielmethode zum Suchen von Schlüsselwörtern und deren vorangehenden und nachfolgenden Informationen in Linux-Protokollen
Bei der täglichen Arbeit müssen wir häufig Protok...
Der Unterschied und die Ausführungsmethode von select count() und select count(1)
Count(*) oder Count(1) oder Count([column]) sind ...
Kurze Einführung und Verwendung von Table und div
Web-Frontend 1 Studierendenausweis Name Geschlech...
Implementierung der Multi-Environment-Konfiguration (.env) des Vue-Projekts
Inhaltsverzeichnis Was ist eine Multiumgebungskon...
Verwenden Sie personalisierte Suchmaschinen, um die personalisierten Informationen zu finden, die Sie benötigen
Viele Menschen leben heute im Internet und die Suc...