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

Implementierungscode zur Installation von vsftpd in Ubuntu 18.04

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

Installieren Sie Redis und MySQL auf CentOS

1|0MySQL (MariaDB) 1|11. Beschreibung Das Datenba...

So löschen Sie node_modules und installieren es neu

Inhaltsverzeichnis Schritt 1: Installieren Sie no...

CSS Houdini erzielt einen dynamischen Welleneffekt

CSS Houdini gilt als die aufregendste Innovation ...

Vue implementiert einfache Rechnerfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Lösen Sie das Problem der VScode-Konfiguration durch Remote-Debugging des Linux-Programms

Werfen wir einen Blick auf das Problem des VScode...

Wie stellt MySQL die Datenintegrität sicher?

Die Bedeutung von Datenkonsistenz und -integrität...

So ändern Sie den MySQL-Zeichensatz

1. Überprüfen Sie den Zeichensatz von MySQL Varia...

Beispielcode zur Implementierung des Vollbild-Scrolleffekts von fullpage.js mit CSS

Als ich kürzlich CSS studierte, stellte ich fest,...

Detaillierte Erläuterung des Implementierungsprozesses und der Verwendung des Linux-Papierkorbmechanismus

Vorwort: rm unter Linux-Systemen ist irreversibel...

So verwenden Sie das Datums-Plugin vue-bootstrap-datetimepicker in vue-cli 3

Nachfragehintergrund In letzter Zeit plane ich, V...

MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten

Dieser Artikel stellt vor, wie Sie IP-Adressdaten...

MySQL-String-Aufteilungsvorgang (String-Abfangen mit Trennzeichen)

String-Extraktion ohne Trennzeichen Fragenanforde...

MySQL-Methode mit hoher Parallelität zum Generieren einer eindeutigen Bestellnummer

Vorwort Nachdem dieser Blogbeitrag veröffentlicht...

MySQL-Datenbank Daten laden, vielfältige Verwendungsmöglichkeiten

Inhaltsverzeichnis Vielfältige Einsatzmöglichkeit...