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

Die Hintergrundfarbe oder das Bild im Div-Container wächst mit dem Wachstum

Code kopieren Der Code lautet wie folgt: Höhe: au...

Implementierungscode zur Installation von vsftpd in Ubuntu 18.04

Installieren Sie vsftpd $ sudo apt-get installier...

Detaillierte Erläuterung des Installationsprozesses der Standard-MySQL-Version (x64) für Windows

MySQL x64 stellt kein Installationsprogramm berei...

Anweisung zur Ermittlung der Browserversion und Kompatibilität mit mehreren Browsern

<!--[wenn lte IE 6]> <![endif]--> Sich...

So führen Sie JavaScript in Jupyter Notebook aus

Später habe ich auch hinzugefügt, wie man Jupyter...

Detaillierte Erläuterung gängiger Methoden von JavaScript String

Inhaltsverzeichnis 1. charAt Grammatik Parameter ...

CSS3-Randeffekte

Was ist CSS? CSS (Abkürzung für Cascading Style S...

Beispiel für eine HTTPS-Konfigurationsmethode für den Nginx-Server

Linux: Linux-Version 3.10.0-123.9.3.el7.x86_64 Ng...

Die einfachste Formularimplementierung des Flexbox-Layouts

Flexibles Layout (Flexbox) erfreut sich zunehmend...

jQuery implementiert eine einfache Änderung der Schaltflächenfarbe

Wir möchten in HTML und CSS die Farbe eines Butto...

So verwenden Sie Node-Scaffolding zum Erstellen eines Servers zur Implementierung der Token-Verifizierung

Inhalt Verwenden Sie Scaffolding, um schnell ein ...

Das Konzept der MySQL-Tablespace-Fragmentierung und Lösungen für damit verbundene Probleme

Inhaltsverzeichnis Hintergrund Was ist Tablespace...

Tutorial zur Verwendung von $attrs und $listeners in Vue

Inhaltsverzeichnis einführen Beispiel Zusammenfas...

Detailliertes Tutorial zum Kompilieren und Installieren von mysql8.0.29 in der LNMP-Umgebung von CentOS8

1. Voraussetzungen Da ich es schon mehrmals insta...

Lernen Sie, benutzerdefinierte Hooks in React zu erstellen

1. Was sind benutzerdefinierte Hooks Wiederverwen...