Verschachtelte Tabelle in HTML-HTML-Tutorial-php.cn

„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

, , und

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.

Verschachtelte Tabelle in HTML

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.

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.

Code:

<body>
<table border="10" bordercolor = "#0B1941">
<tr>
<td>
<table border="10" bordercolor = "#F8F3F3">
<tr>
<td>
<table border="10" bordercolor = "#C74D4F">
<tr>
<td>
<table border="10" bordercolor = "#DCE127">
<tr>
<td>
<table border="10" bordercolor = "#3CAB16">
<tr> <td> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table>

Nach dem Login kopieren

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:

Verschachtelte Tabelle in HTML

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:

Verschachtelte Tabelle in HTML

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.

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> NestedTables </title>
</head>
<body>
<caption title="Container Table"> Container Table </caption>
<table border="5px" bordercolor = "red">
<tr>
<td >
<table>
<tr> <th colspan="2"> Nested Table 2 </th> </tr>
<tr> <th> Column 1 </th> <th> Column 2 </th> </tr>
<tr> <td> Our First Table </td>
<td> Nested Within </td> </tr>
</table>
</td>
<td>
<table >
<tr> <th> Nested Table 2 </th> </tr>
<tr>
<td>
<ul>
<li> List Object 1 </li>
<li> List Object 2 </li>
<li> List Object 3 </li>
</ul>
</td>
</tr>
</table> </td> </tr>
<tr>
<td>
<table>
<tr> <th colspan="2" align="center"> Nested Table 3 </th> </tr>
<tr>
<td> <a href=""> Nested Table </a> </td>
<td> Demo Continued </td> </tr>
</table> </td>
<td>
<table>
<tr> <th> Nested Table 4 </th> </tr>
<tr>
<td> <img src="images.png" height="120px" width="120px" alt="Sorry Image could not be displayed"> </td> </tr> </table>
</td>
</tr>
</table>
</body>
</html>

Nach dem Login kopieren

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.

Verschachtelte Tabelle in HTML

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.

Verschachtelte Tabelle in HTML

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!

Verwandte Etiketten：

html html5 HTML Tutorial HTML Properties HTML tags

Quelle：php

Vorheriger Artikel：Tabelle ohne Rand in HTML Nächster Artikel：Tabellenrahmen in HTML

Erklärung dieser 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

Neueste Artikel des Autors