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

Datendiebstahl mit CSS in Firefox

0x00 Einführung Vor einigen Monaten habe ich eine...

MySQL-Installationsinformationen unter Linux-Server anzeigen

Sehen Sie sich die Installationsinformationen von...

Der vollständige Implementierungsprozess von Sudoku mit JavaScript

Inhaltsverzeichnis Vorwort So lösen Sie Sudoku Fü...

Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site

Ich habe vor Kurzem den günstigsten Tencent-Cloud...

So optimieren Sie die langsame Like-Fuzzy-Abfrage in MySQL

Inhaltsverzeichnis 1. Einleitung: 2. Die erste Id...

Virtual Box-Tutorialdiagramm zum Duplizieren virtueller Maschinen

Nachdem man sich an VM gewöhnt hat, ist der Wechs...

JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion

In diesem Artikel wird der spezifische JavaScript...

Concat() von kombinierten Feldern in MySQL

Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...

MySQL 8.0 kann jetzt JSON verarbeiten

Inhaltsverzeichnis 1. Kurzübersicht 2. JSON-Grund...

CentOS 7.6 Installation der MySQL 5.7 GA-Version Tutorial-Diagramm

Inhaltsverzeichnis Umgebungsvorbereitung Umgebung...

Detaillierte Erklärung der Vue-Filter

<Text> <div id="Wurzel"> &l...

Informationen zur Verwendung der Vue v-on-Direktive

Inhaltsverzeichnis 1. Auf Ereignisse achten 2. Üb...