„Verschachtelte Tabelle“ ist eines der wichtigsten Konzepte bei der Verwendung von Tabellen in der HTML-Codierung. Die verschachtelten Tabellen oder „Tabellen innerhalb der Tabelle“ sind ein Konzept, das bei der Erstellung größerer und komplexer Tabellen verwendet wird. Die meisten komplexen und großen Tabellen enthalten möglicherweise eine Verschachtelung von Tabellen innerhalb der Haupttabelle, um eine bessere Kontrolle über die Codierung zu haben. Die Verwendung verschachtelter Tabellen kann dabei helfen, schöne und interessante Erscheinungsbilder und Grafiken zu erzeugen, kann jedoch zu Fehlern am Ende führen.
Natürlich wird es schwieriger, wenn Sie anfangen, verschachtelte Tabellen zu verwenden, da Sie beim Erstellen von Tabellen innerhalb von Tabellen alle Tags und Elemente codieren, verwalten und verwalten müssen. Aber wenn man sich erst einmal ein solches Konzept angeeignet hat und sich mit der Komplexität auseinandersetzt, wird es viel einfacher, mit den darin enthaltenen Tags zu jonglieren.
Wie erstelle ich eine Tabelle innerhalb einer Tabelle?
Eine Tabelle kann innerhalb einer anderen Tabelle erstellt werden, indem einfach die Tabellen-Tags wie
,
,
usw. verwendet werden, um unsere verschachtelte Tabelle zu erstellen. Da Verschachtelungstabellen zu höheren Komplexitätsstufen führen können, denken Sie daran, die Verschachtelungstabellen innerhalb derselben Zelle zu beginnen und zu enden. Sie können verschachtelte Tabellen auf beliebig vielen Ebenen erstellen; Denken Sie daran, eine innere Tabelle innerhalb derselben Zelle zu erstellen.
Unten finden Sie eine Interpretation verschachtelter Tabellen. Das folgende Bild zeigt eine fünfstufige Verschachtelung von Tabellen mit der Farbe „Blau“ als äußerste oder die Containertabelle mit verschachtelten Tabellen, die in den Farben Weiß, Rot, Gelb und Grün dargestellt werden.
Wir werden dieses Mal versuchen, Schritt für Schritt ein weiteres Beispiel für verschachtelte Tabellen zu erstellen.
Zuerst benötigen wir den Haupttisch, den Container, in dem wir mit der Verschachtelung beginnen können.
Zweitens entscheiden Sie, in welcher Zeile, Spalte oder Zelle eine weitere Tabelle vorhanden sein soll. Sobald Sie sich entschieden haben, fahren Sie mit dem nächsten Schritt fort
ist das Element, in dem eine völlig neue Tabelle erstellt wird. Hierarchisch vorgehen,
….
….
(verschachtelte Tabelle hier)
Die darin enthaltene verschachtelte Tabelle muss mit allen Standardregeln zum Schließen vollständig geschlossen werden.
und
Elemente.
Das Formatieren der verschachtelten Tabelle ist genauso einfach und ähnlich wie bei jedem anderen HTML-Element.
Das obige Beispiel hatte den Hauptcontainer, eine Tabelle mit zwei Spalten und eine verschachtelte Tabelle innerhalb von zwei Zeilen und zwei Spalten.
Beobachten Sie nun das folgende Beispiel für verschachtelte Tabellen. Was wir oben als Interpretation der Verschachtelungsebenen besprochen haben, werden wir unten versuchen, durch Codierung ein solches Beispiel zu erstellen.
Der obige Code gibt die folgende Anzeige aus, die 5 Verschachtelungsebenen unserer Tabellen zeigt, die durch verschiedene Farben unterschieden werden. Beobachten Sie die Platzierung von Tabellen ineinander, d. h. die Verschachtelung innerhalb von:
Das Konzept der Verschachtelung innerhalb der Tabellen wird visuell interessanter, wenn der Programmierer Tabellen zur Formatierung der gesamten Webseite verwendet. Die Tabelle kann dann wie jede andere Tabelle und andere HTML-Elemente formatiert werden, in denen der Programmierer möglicherweise verschachtelt ist.
Beispiele für verschachtelte Tabellen in HTML
Im Folgenden finden Sie die genannten Beispiele:
Beispiel #1
Beobachten Sie das folgende Beispiel einer verschachtelten Tabelle, nur eine Tabelle innerhalb der Haupttabelle. Um die Haupttabelle und die darin enthaltene verschachtelte Tabelle zu unterscheiden, haben wir unterschiedliche Randradien und Randfarben der Tabelle verwendet.
Code:
<body>
<table border="5px" bordercolor="#8707B0">
<tr>
<td>Left side of the main table</td>
<td>
<table border="5px" bordercolor="#F35557">
<h4 align="center">Nested Table</h4>
<tr>
<td>nested table C1</td>
<td>nested table C2</td>
</tr>
<tr>
<td>nested table</td>
<td>nested table</td>
</tr>
</table>
</td>
</tr>
</table>
Nach dem Login kopieren
Ausgabe:
Hinweis: Die Verschachtelung einer Tabelle innerhalb der Hauptcontainertabelle. Die verschachtelte Tabelle innerhalb der Haupttabelle ist die mit dem roten Rand. Es wird im
Element der Containertabelle.
Beispiel #2
Unser folgender Code demonstriert die Verschachtelung anderer HTML-Elemente in den verschachtelten Tabellen in unserer Hauptcontainertabelle.
Der obige Code zeigt, wie eine Tabelle mehrere andere Tabellen enthalten kann, die jede Art von Inhalt enthalten können, den Sie normalerweise einer einfachen HTML-Seite hinzufügen. Der obige Code dafür ist ohne Grenzen.
Hinweis: Im obigen Beispiel können die hinzugefügten HTML-Elemente wie eine PNG-Datei, ein Hyperlink, eine Tabelle oder eine Liste von Objekten einfach zu einem der
Elemente. In der obigen Interpretation habe ich alle Ränder der darin verschachtelten Tabellen abgemeldet.
Bitte beachten Sie, dass die Tische sichtbar sind, wenn ihre Ränder sichtbar sind. Der Containertisch ist einer mit rotem Rand und verschachtelten Tischen mit blauen, gelben, grünen und schwarzen Rändern.
Es ist durchaus sinnvoll, Tabellen zur vollständigen Formatierung einer Webseite zu verwenden. Beachten Sie jedoch Folgendes: Je komplexer Ihre Verschachtelung ist, desto langsamer wird das Laden Ihrer Seite, da die Darstellung für Ihren Browser sehr kompliziert wird .
Das obige ist der detaillierte Inhalt vonVerschachtelte Tabelle in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
