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 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

Einige Fehler, die JavaScript-Anfänger häufig machen

HTML-Tabelle_Powernode Java Academy

Einige Fehler, die JavaScript-Anfänger häufig machen

Implementierung der Docker-Bereitstellung eines MySQL-Clusters

So überprüfen Sie, wo die Metadatensperre in MySQL blockiert ist

Informationen zum dynamischen Hinzufügen von Routen basierend auf Benutzerberechtigungen in Vue

HTML-Tutorial: Titelattribut und Alt-Attribut

Pessimistisches Sperren und optimistisches Sperren in MySQL

Die einfachste Formularimplementierung des Flexbox-Layouts

Detaillierte Erläuterung der MySQL-Sicherungs- und Wiederherstellungspraxis von mysqlbackup

Lösen Sie das Problem des Docker-Pull-Image-Fehlers

Detaillierte Konfiguration der drahtlosen Netzwerkkarte unter Ubuntu Server

Artikel empfehlen

Ein kleiner HTML-Code fügt die Baidu-Suchleiste in Ihre Seite ein

Verwenden Sie nginx, um virtuelle Hosts auf Domänennamenbasis zu konfigurieren

Docker stellt Containern dynamisch Ports zur Verfügung

Analyse der Prinzipien verschiedener Möglichkeiten zur Nachahmung des Lupeneffekts in CSS3

So filtern Sie doppelte Daten heraus, wenn Sie große Datenmengen in MySQL einfügen

Docker setzt Macvlan ein, um eine hostübergreifende Netzwerkkommunikation zu erreichen

Analyse der Verschachtelungsregeln von XHTML-Tags

Detaillierte Beschreibung der Verwendung der erweiterten Konfiguration von Firewalld unter Linux

Nachdem Sie die Einführung des CSS-Boxmodells gelesen haben, werden Sie nicht verwirrt sein

Verwenden Sie Iframe, um Wettereffekte auf Webseiten anzuzeigen

HTML Einführungstutorial HTML Tag Symbole schnell beherrschen

jQuery-Plugin zum Implementieren eines schwebenden Menüs

Baidu Input Method öffnet API und behauptet, es könne portiert und nach Belieben verwendet werden

Zusammenfassung des Verständnisses des virtuellen DOM in Vue

SQL-Implementierung von LeetCode (182. Doppelte Postfächer)