Tabellen sind ein grundlegender und entscheidender Aspekt der Webentwicklung und werden verwendet, um Informationen in einem geordneten und klaren Format darzustellen. Es kann jedoch Situationen geben, in denen komplexere Daten dargestellt werden müssen und die Verwendung verschachtelter Tabellen erforderlich ist. Verschachtelte Tabellen sind Tabellen, die sich in anderen Tabellenzellen befinden. In diesem Artikel führen wir Sie durch den Prozess der Erstellung verschachtelter Tabellen in HTML und helfen Ihnen, die Konzepte mit sorgfältigen und detaillierten Erklärungen sowie Abbildungen besser zu verstehen. Unabhängig davon, ob Sie ein Neuling oder ein erfahrener Webdesigner sind, vermittelt Ihnen dieser Artikel das Wissen und die Erfahrung, die Sie benötigen, um die Erstellung verschachtelter Tabellen mit HTML zu beherrschen.
Bevor wir uns mit der Erstellung verschachtelter Tabellen befassen, ist es notwendig, den grundlegenden Aufbau von HTML-Tabellen zu verstehen. HTML-Tabellen werden durch die Implementierung des
-Elements gebildet und enthalten ein oder mehrere -Elemente (Tabellenzeile), die ein | -Element enthalten. Jedes |
-Element repräsentiert eine Zelle in der Tabelle.
Methode
Die folgenden hier gezeigten Methoden werden verwendet, um verschachtelte Tabellen innerhalb von Tabellen zu erstellen. Dazu erstellen wir zunächst die Haupttabelle, indem wir das
-Element in ein -Element einschließen. Die Haupttabelle wird mit dem Klassennamen „main-table“ definiert. Innerhalb der Haupttabelle haben wir zwei Zellen, die mit dem -Element definiert sind. Die erste Zelle enthält eine verschachtelte Tabelle, die in einem anderen -Element enthalten ist. Verschachtelte Tabellen werden mit dem Klassennamen „nested-table“ definiert. Die Zellen einer verschachtelten Tabelle werden mit dem | -Element definiert. Die zweite Zelle der Haupttabelle enthält Text, es gibt jedoch keine verschachtelte Tabelle.
Um sicherzustellen, dass die Tabelle korrekt angezeigt wird, verwenden wir CSS, um einige Stile zu definieren. Die Breite des Tabellenelements ist auf 100 % eingestellt und der Wert für die Randreduzierung ist auf „Reduzieren“ eingestellt. Die Zellen sowohl der Haupttabelle als auch der verschachtelten Tabelle haben einen schwarzen Rand von 1 Pixel und einen Abstand von 8 Pixeln. Die Textausrichtung aller Zellen ist auf links eingestellt.
Darüber hinaus haben wir per CSS auch die Hintergrundfarbe für die Haupttabelle und verschachtelte Tabellen definiert. Die Hintergrundfarbe der Haupttabelle ist hellgrau und die Hintergrundfarbe der verschachtelten Tabelle ist etwas dunkleres Grau. Wenn Sie diese Schritte befolgen, können Sie ganz einfach verschachtelte Tabellen innerhalb von HTML-Tabellen erstellen und ihnen mithilfe von CSS Stile zuweisen.
Beispiel
Hier ist der vollständige Code, den wir uns in diesem Beispiel ansehen werden -
<!DOCTYPE html>
<html>
<head>
<title>How to create nested tables within tables in HTML?</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.main-table {
background-color: #f2f2f2;
}
.nested-table {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<h4>How to create nested tables within tables in HTML?</h4>
<table class="main-table">
<tr>
<td>
Main table cell 1
<table class="nested-table">
<tr>
<td>Nested table cell 1</td>
<td>Nested table cell 2</td>
</tr>
</table>
</td>
<td>Main table cell 2</td>
</tr>
</table>
</body>
</html>
Nach dem Login kopieren Fazit
Letztendlich ist das Generieren eingebetteter Tabellen in HTML eine einfache Aufgabe, die grundlegende Kenntnisse über den Aufbau von HTML-Tabellen erfordert. Wenn Sie die in diesem Artikel erläuterten Schritte befolgen, können Sie ganz einfach eingebettete Tabellen erstellen, die komplexe Daten systematisch und leicht verständlich darstellen. Unabhängig davon, ob Sie große Datenmengen präsentieren müssen oder diese einfach nur in einem präzisen Layout präsentieren möchten, sind eingebettete Tabellen ein nützliches Werkzeug für jeden Webdesigner. Mit dem in diesem Artikel gewonnenen Fachwissen haben Sie nun die Möglichkeit, eingebettete Tabellen in HTML zu erstellen und Ihr Webdesign auf die nächste Stufe zu heben.
|
|
|
Das obige ist der detaillierte Inhalt vonWie erstelle ich verschachtelte Tabellen in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
