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

JS realisiert die automatische Wiedergabe der Timeline

Vor kurzem habe ich einen solchen Effekt implemen...

Ein Beispiel zum Schreiben eines großen Sonnenwettersymbols in reinem CSS

Wirkung Das Wirkungsdiagramm sieht wie folgt aus ...

Detailliertes Beispiel zur Implementierung von Transaktions-Commit und -Rollback in MySQL

Vor Kurzem mussten wir eine geplante Migration de...

js implementiert Tabellen-Drag-Optionen

In diesem Artikelbeispiel wird der spezifische JS...

Referenzen und Referenzdetails in Vue3

Der Editor teilt Ihnen auch die entsprechenden Pr...

Detaillierte Erklärung der grundlegenden Syntax und Datentypen von JavaScript

Inhaltsverzeichnis JavaScript importieren 1. Inte...

Detaillierte Erklärung des "/"-Problems, wenn proxy_pass gemäß dem Pfad weiterleitet

Wenn Sie beim Konfigurieren von proxy_pass in ngi...

Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd

Inhaltsverzeichnis 1. React kombiniert mit Antd, ...

Detailliertes grafisches Tutorial zum Aktivieren des sicheren Remotezugriffs mit Docker

1. Bearbeiten Sie die Datei docker.service vi /us...

Mehrere Möglichkeiten, die Lesbarkeit von Webseiten zu verbessern

1. Verwenden Sie kontrastierende Farben. Mit Kont...

Kombinieren von XML- und CSS-Stilen

student.xml <?xml version="1.0" enco...

So gehen Sie mit vergessenen Passwörtern in Windows Server 2008 R2 um

Was tun, wenn Sie Windows Server 2008R2 vergessen...

Beispielcode zur Implementierung der Formularvalidierung mit reinem CSS

In unserem täglichen Geschäft ist die Formularval...

Detaillierte Erläuterung des MySQL Multi-Version Concurrency Control Mechanism (MVCC)-Quellcodes

Inhaltsverzeichnis 1. Einleitung 2. MVCC (Multi-V...

Eine kurze Diskussion über vier Lösungen für Vue Single Page SEO

Inhaltsverzeichnis 1.Bereitstellung der serversei...