HTML-Tabelle_Powernode Java Academy

HTML-Tabelle_Powernode Java Academy

Um eine Tabelle in HTML zu zeichnen, verwenden Sie das Tabellen-Tag

  • tr bedeutet Reihe
  • td gibt die Spalte an
  • th steht für Tabellenkopfzeile, die normalerweise für Spaltennamen verwendet wird.

Hier ist ein Beispiel.

<html>
    <Kopf>
        <title>Tabelle in html</title>
    </Kopf>
    <Text>
        <p>Horizontale Kopfzeile</p>
        <Tabellengrenze="1">
         <tr>
            <th>Name</th>
            <th>Alter</th>
            <th>Geschlecht</th>
         </tr>
         <tr>
            <td>zdd</td>
            <td>30</td>
            <td>männlich</td>
         </tr>
         </Tabelle>
         <p>Vertikale Kopfzeile</p>
         <Tabellengrenze="1">
         <tr>
            <th>Name</th>
            <td>Herbst</td>
         </tr>
         <tr>
            <th>Alter</th>
            <td>30</td>
         </tr>
         <tr>
            <th>Geschlecht</th>
            <td>weiblich</td>
         </tr>
        </Tabelle>
    </body>
</html>

Rendern

Horizontale Kopfzeile

Name
Alter
Geschlecht
zd
30
männlich

Vertikale Kopfzeile

Name
Herbst
Alter
30
Geschlecht
weiblich

Randloser Tisch

Wenn Sie beim Definieren einer Tabelle das Rahmenattribut nicht angeben, hat die Tabelle keine Rahmen.

<Tabelle>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>ddz</td><td>27</td></tr>
</Tabelle>

Rendern

zd
30
ddz
27

Leere Zellen

Wenn für eine Zelle kein Inhalt angegeben ist, ist die Zelle leer und hat keinen Rahmen, wie unten gezeigt, was nicht sehr schön ist.

zd
30
27

Was wäre, wenn das Problem gelöst wäre? Die Methode besteht darin, Leerzeichen zu leeren Zellen hinzuzufügen. Da HTML zusätzliche Leerzeichen ignoriert, können wir keine Leerzeichen direkt hinzufügen, sondern müssen &nbsp; nbsp hinzufügen, um Leerzeichen darzustellen.

<Tabellengrenze="1">
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>&nbsp;</td>20</tr>
</Tabelle>

Rendern

zd
30
20

Tabelle mit Titel

Verwenden Sie das Caption-Attribut, aber der Titel darf anscheinend keine Leerzeichen enthalten, da er sonst bei der Anzeige umbrochen wird!

<Tabellengrenze="1">
<caption>Mein Formular</caption>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>&nbsp;</td><td>20</td></tr>
</Tabelle>

Mein Formular

zd
30
20

Tabellen, die sich über Zeilen oder Spalten erstrecken

Verwenden von „colspan“ zum Überspannen von Zeilen

<Tabellengrenze="1">
<tr><th>Name</th><th colspan="2">Telefon</th></tr>
Bill Gates 555 77 854 555 77 855
</Tabelle>

Name
Telefon
Bill Gates
555 77 854
555 77 855

Verwenden von „rowspan“ zum Überspannen von Spalten

<Tabellengrenze="1">
<tr><th>Name</th><td>Bill Gates</td></tr>
<tr><th rowspan="2">Telefon</th><td>555 77 854</td></tr>
<tr><td>555 77 855</td></tr>
</Tabelle>

Verschachtelte Tabellen

Das Tabellen-Tag kann verschachtelt werden, was bedeutet, dass Sie eine Tabelle innerhalb einer Tabelle erstellen können, indem Sie einem tr- oder td-Tag ein Tabellen-Tag hinzufügen.

<<:  Detaillierte Schritte zum Einrichten und Konfigurieren von NIS-Domänendiensten auf Centos8

>>:  Beim Aktualisieren der automatisch inkrementierten Primärschlüssel-ID in MySQL sind Probleme aufgetreten

Artikel empfehlen

Installation von Ubuntu 18.04 meldet: ldlinux.c32 konnte nicht geladen werden und die Lösungsschritte dazu sind fehlgeschlagen

Vorwort Ich habe einen alten Laptop mit Win7. Um ...

Lösung für das Problem, dass Java keine Verbindung zu MySQL 8.0 herstellen kann

In diesem Artikel finden Sie eine Sammlung von Ja...

Zusammenfassung der MySQL-Funktionsmethode LOAD_FILE()

In MySQL liest die Funktion LOAD_FILE() eine Date...

Docker verwendet Root, um in den Container zu gelangen

Führen Sie zuerst den Docker-Container aus Führen...

MySQL-Abfragemethode mit mehreren Bedingungen

MySQL-Abfrage mit mehreren Bedingungen Umgebung: ...

Vue+Bootstrap realisiert ein einfaches Studentenverwaltungssystem

Ich habe Vue und Bootstrap verwendet, um ein rela...

Eine kurze Diskussion über HTML-Titel, Absätze, Zeilenumbrüche, horizontale Linien und Sonderzeichen

Titel XML/HTML-CodeInhalt in die Zwischenablage k...

Web-Theorie: Bringen Sie mich nicht zum Nachdenken über Lesehinweise

Kapitel 1 <br />Das wichtigste Prinzip, um ...

Erfahren Sie mehr über MySQL-Datenbanken

Inhaltsverzeichnis 1. Was ist eine Datenbank? 2. ...

Java importiert Daten aus Excel in MySQL

Manchmal müssen wir bei unserer tatsächlichen Arb...

Einführung in Netzwerktreiber für Linux-Geräte

Kabelgebundenes Netzwerk: Ethernet Drahtloses Net...

Schreiben Sie einen einfachen Rechner mit JavaScript

Die Wirkung ist wie folgt:Referenzprogramm: <!...

JavaScript implementiert die Kontrollkästchenauswahlfunktion

In diesem Artikelbeispiel wird der spezifische Ja...

In IIS 7.5 unterstützt HTML die Include-Funktion wie SHTML (Modulzuordnung hinzufügen).

Als ich das erste Mal anfing, fand ich viele Fehl...

So zeigen Sie JSON-Daten auf einer HTML-Seite an und formatieren sie

JSON-Daten werden auf der HTML-Seite angezeigt un...