Detaillierte Einführung in TABLE-Tags (TAGS)

Detaillierte Einführung in TABLE-Tags (TAGS)
Grundlegende Syntax der Tabelle

<table>...</table> - definiert eine Tabelle
<tr> - definiert eine Tabellenzeile
<th> - definiert die Tabellenüberschrift
<td> - definiert das Tabellenelement (die spezifischen Daten der Tabelle)

Tabelle mit Rahmen:


Code kopieren
Der Code lautet wie folgt:

<Tabellenrand>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>
Essen Trinken Süß
A B C


Tabelle ohne Rahmen:

Code kopieren
Der Code lautet wie folgt:

<Tabelle>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>

Essen Trinken Süß
A B C

Tabellenspanne

Tabellenelemente, die sich über mehrere Spalten erstrecken <th colspan=#>


Code kopieren
Der Code lautet wie folgt:

<Tabellenrand>
<tr><th colspan=3> Morgenmenü</th>
<tr><th>Essen</th> <th>Getränk</th> <th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>

Morgenmenü
Essen Trinken Süß
A B C

Tabellenelemente, die sich über mehrere Zeilen erstrecken <th rowspan=#>



Code kopieren
Der Code lautet wie folgt:

<Tabellenrand>
<tr><th rowspan=3> Morgenmenü</th>
<th>Essen</th> <td>A</td></tr>
<tr><th>Trinken</th> <td>B</td></tr>
<tr><th>Süß</th> <td>C</td></tr>
</Tabelle>
Morgenmenü Essen A
Trinken B
Süß C

Tabellengrößeneinstellungen

<Tabellenrand=#>

Einstellungen für die Rahmengröße:


Code kopieren
Der Code lautet wie folgt:

<Tabellenrand=10>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>
Essen Trinken Süß
A B C

<Tabellenrahmenbreite=# Höhe=#>

Einstellungen für die Tabellengröße:


Code kopieren
Der Code lautet wie folgt:

<Tabellenrahmen Breite=170 Höhe=100>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>
Essen Trinken Süß
A B C

<Tabellenrand-Zellenabstand=#>

Abstandseinstellung für Tabellenelemente:


Code kopieren
Der Code lautet wie folgt:

<Tabellenrand-Zellenabstand=10>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>
Essen Trinken Süß
A B C

<Tabellenrand-Zellenpadding=#>

Interne Leereinstellungen der Tabelle:


Code kopieren
Der Code lautet wie folgt:

<Tabellenrand-Zellenpadding=10>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>
Essen Trinken Süß
A B C

Ausrichtung/Layout von Text innerhalb einer Tabelle

<tr align=#>

<th align=#> #=links, zentriert, rechts

<td ausrichten=#>

Code kopieren
Der Code lautet wie folgt:

<Tabellenrahmenbreite=160>
<tr>
<th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr>
<td align=left>Ein</td>
<td align=center>B</td>
<td align=right>C</td>
</Tabelle>

Essen Trinken Süß
A B C

<tr valign=#>

<th valign=#> #=oben, Mitte, unten, Grundlinie

<td valign=#>

Code kopieren
Der Code lautet wie folgt:

<Tabellenrahmenhöhe=100>
<tr>
<th>Essen</th><th>Trinken</th>
<th>Süß</th><th>Andere</th>
<tr>
<td valign=top>Ein</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>
<td valign=baseline>D</td>
</Tabelle>

Essen Trinken Süß Andere
A B C D

Ausrichtung/Layout der Tabellen auf der Seite (Floating Table)

<Tabelle ausrichten=links>


Code kopieren
Der Code lautet wie folgt:

<Tabelle ausrichten="links" Rahmen>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>

Meine Favoriten …<br> Kekse, Schokolade und mehr.
Essen Trinken Süß
A B C

Meine Favoriten...
Kekse, Schokolade und mehr.

<Tabelle ausrichten=rechts>

Essen Trinken Süß
A B C

Meine Favoriten...
Kekse, Schokolade und mehr.

<table vspace=# hspace=#> #=Leerzeichenwert


Code kopieren
Der Code lautet wie folgt:

<Tabelle ausrichten="links" Rahmen vspace=20 hspace=30>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>

Meine Favoriten …<br> Kekse, Schokolade und mehr.
Essen Trinken Süß
A B C

Meine Favoriten...
Kekse, Schokolade und mehr.

Tabellentitel

<caption align=#> ... </caption> #=links, zentriert, rechts

Code kopieren
Der Code lautet wie folgt:

<Tabellenrand>
<caption align=center>Mittagessen</caption>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>

Mittagessen

Essen Trinken Süß
A B C

<caption valign=#> ... </caption> #=oben, unten

valign=top ist Standard.


Code kopieren
Der Code lautet wie folgt:

<Tabellenrand>
<caption valign=bottom>Mittagessen</caption>
<tr><th>Essen</th><th>Getränk</th><th>Süßes</th>
<tr><td>A</td><td>B</td><td>C</td>
</Tabelle>

Essen Trinken Süß
A B C
Mittagessen

<<:  Detaillierte Erklärung komplexer CSS-Selektoren und CSS-Schriftarten und Farbattribute

>>:  Fortgeschrittene JavaScript-Programmierung: Variablen und Umfang

Artikel empfehlen

HTML 5.1 lernen: 14 neue Features und Anwendungsbeispiele

Vorwort Wie wir alle wissen, gehört HTML5 dem Wor...

Lösung für das Problem des Informationsverlusts mit "_" im Header bei Verwendung des Nginx-Proxys

Vorwort Bei der Entwicklung eines Gateway-Projekt...

Detailliertes Tutorial zur Installation von CentOS, JDK und Hadoop auf VirtualBox

Inhaltsverzeichnis 1. Voraussetzungen 1.1 Unterst...

Tipps zum reflektierenden Lernen von JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Schnittstelle...

Eine kurze Analyse und Aufschlüsselung der Vor- und Nachteile von drei Baumstrukturtabellendesigns in MySQL

Inhaltsverzeichnis Einführung Frage Design 1: Adj...

Grafisches Tutorial zur Installation des MySQL 5.7.21 Installers unter Windows 10

Installieren Sie MySQL und machen Sie sich Notize...

Für die Verwendung des Docker-Befehls ist kein Sudo erforderlich

Da der Docker-Daemon an den Unix-Socket des Hosts...

Vue-Beispielcode mit dem Animationseffekt „Übergangskomponente“

Die Übergangsdokumentadresse definiert eine Hinte...

Detaillierte Erklärung des HTML-Seitenkopfcodebeispiels

Wissenspunkt 1: Legen Sie die Basis-URL der Webse...

Grundlegende Verwendung von benutzerdefinierten Anweisungen in Vue

Inhaltsverzeichnis Vorwort Text 1. Globale Regist...

So mounten Sie eine Festplatte in Linux und richten sie so ein, dass sie beim Booten automatisch gemountet wird

Da jedermanns Zeit kostbar ist, werde ich die Pro...

Anweisungen zur Verwendung des Datenbankverbindungspools Druid

Ersetzen Sie ihn durch den optimalen Datenbankver...

Verwenden Sie die Befehle more, less und cat in Linux, um Dateiinhalte anzuzeigen

Unter Linux können die Befehle cat, more und less...

Mysql verwendet den Kill-Befehl, um das Deadlock-Problem zu lösen (eine bestimmte SQL-Anweisung, die ausgeführt wird, abzubrechen).

Bei der Verwendung von MySQL zum Ausführen bestim...

CSS3 realisiert eine springende Ballanimation

Normalerweise besuche ich gerne die Sonderseiten ...