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

So implementieren Sie Bildmapping mit CSS

1. Einleitung Mit Imagemaps können Sie Bereiche e...

Detaillierte Erklärung der Verwendung und Unterschiede verschiedener Sperrmechanismen in Linux

Vorwort: Ich glaube, dass diejenigen, die dieses ...

Detaillierter Code des Beispiels zum Herunterladen des Docker-Installationspakets von yum und zur Installation auf einem Offline-Computer

1. Verwenden Sie auf einem vernetzten Computer di...

Beispiel für die Verwendung von UserMap in IMG

usemap ist ein Attribut des <img>-Tags, das ...

Der Unterschied zwischen schreibgeschützt und deaktiviert

Um es zusammenzufassen: „Nur lesen“ ist nur für Ei...

Eine kurze Analyse der Prinzipien von NFS-Servern und der Schritte zum Erstellen, Konfigurieren und Bereitstellen dieser

Inhaltsverzeichnis Einführung in den NFS-Dienst W...

Erfahren Sie, wie Sie mithilfe des Nginx-Dienstes eine Subdomain-Umgebung erstellen, um die Ladeleistung von 2D-Karten zu verbessern.

1. Hintergrund Vor kurzem stießen einige Freunde ...

JavaScript, um einen Lotterieeffekt zu erzielen

In diesem Artikel wird der spezifische JavaScript...

Nginx-Dienst 500: Interner Serverfehler einer der Gründe

500 (Interner Serverfehler) Auf dem Server ist ei...

Beste Tools zum Erstellen und Bearbeiten von Screenshots unter Linux

Als ich mein primäres Betriebssystem von Windows ...

Details zur MySQL-Sicherheitsverwaltung

Inhaltsverzeichnis 1. Vorstellen gemäß der Bestel...

Beispiel für einen WeChat-Applet-Rechner

In diesem Artikel wird der spezifische Code des W...

Detaillierte Erklärung der MySQL/Java-Server-Unterstützung für Emoji und Problemlösung

Dieser Artikel beschreibt die Support- und Proble...

Detaillierte Erklärung des Unterschieds zwischen Docker-Compose-Ports und Expose

Es gibt zwei Möglichkeiten, Container-Ports in Do...

Grafisches Tutorial zur Installation und Konfiguration von mysql 5.7.11 winx64.zip

Installieren und konfigurieren Sie das MySql-Date...