HTML Tabelle

HTML-Tabelle und durch<table>Das <table>-Tag definiert sie.

Eine HTML-Tabelle ist ein Element einer Auszeichnungssprache, das zur Anzeige strukturierter Daten verwendet wird.

Jede Tabelle hat mehrere Zeilen (definiert durch das <tr>-Tag), jede Zeile ist in mehrere Zellen unterteilt (definiert durch das <td>-Tag), und eine Tabelle kann eine Kopfzeile enthalten (definiert durch das <th>-Tag), um Spaltentitel festzulegen.<tr>:tr steht für Tabellenzeile und repräsentiert eine Zeile in der Tabelle.<td>:td steht für Tabellendaten und repräsentiert eine Datenzelle in der Tabelle.<th>:th steht für Tabellenkopf und repräsentiert eine Kopfzelle in der Tabelle.

  • trDatenzellen können Text, Bilder, Listen, Absätze, Formulare, horizontale Linien, Tabellen usw. enthalten.
  • tdHTML-Tabellengenerator:
  • thHier ist ein einfaches HTML-Tabellenbeispiel:

Beispiel

Spaltentitel 1https://www.jyshare.com/front-end/7688/。

Hier ist ein einfaches HTML-Tabellenbeispiel:

Beispiel

<table>
  <thead>
    <tr>
      <th>Zeile 1, Spalte 1</th>
      <th>Zeile 1, Spalte 2</th>
      <th>Zeile 1, Spalte 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zeile 2, Spalte 1</td>
      <td>Zeile 2, Spalte 2</td>
      <td>Zeile 2, Spalte 3</td>
    </tr>
    <tr>
      <td>Im obigen Beispielcode repräsentiert das <table>-Element die gesamte Tabelle, die zwei Hauptteile enthält: <thead> und <tbody>.</td>
      <td><thead> wird verwendet, um den Kopfbereich der Tabelle zu definieren:</td>
      <td>In <thead> wird das <th>-Element verwendet, um Spaltentitel zu definieren. Im Beispiel sind die Spaltentitel "Spaltentitel 1", "Spaltentitel 2" und "Spaltentitel 3".</td>
    </tr>
  </tbody>
</table>

<tbody> wird verwendet, um den Tabellenkörper zu definieren:

  • In <tbody> wird das <tr>-Element verwendet, um Zeilen zu definieren, und <td>-Elemente werden verwendet, um Zellendaten zu definieren. Im Beispiel gibt es zwei Datenzeilen mit jeweils drei Zellen.Durch die Verwendung des <th>-Elements zum Definieren von Spaltentiteln können diese fett dargestellt und von normalen Zellen getrennt werden.

  • HTML-Tabellen können auch andere Teile haben, wie <tfoot> (Tabellenfuß) und <caption> (Tabellentitel). <tfoot> wird verwendet, um Zusammenfassungen, statistische Informationen usw. am unteren Ende der Tabelle zu definieren. <caption> wird verwendet, um einen Titel für die gesamte Tabelle zu definieren.HTML-Tabellen unterstützen das Zusammenführen von Zellen und das Überspannen von Zeilen/Spalten sowie das Anwenden anderer Stile und Attribute, um verschiedene Anforderungen zu erfüllen.

Wir können CSS auch verwenden, um den Stil und das Aussehen der Tabelle weiter anzupassen.

Online-Instanz

Beispiel

Eine Spalte:


Examples

Online-Instanz

Beispiel

<h4>Probieren Sie es aus »</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>(Weitere Instanzen finden Sie am Ende dieser Seite.)</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Tabellen-Instanzen</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>

Beispiel

Beispiel

Tabellen-Instanz

Beispiel

<table border="1"> <tr> <td>Zeile 1, Zelle 1</td> <td>Zeile 1, Zelle 2</td> </tr> <tr> <td>Zeile 2, Zelle 1</td> <td>Zeile 2, Zelle 2</td> </tr> </table>

HTML-Tabellen- und Rahmen-Eigenschaften

HTML-Tabellen- und Rahmen-Eigenschaften

Verwenden Sie die border-Eigenschaft, um eine Tabelle mit einem Rahmen anzuzeigen:

Beispiel

Beispiel

<table border="1"> <tr> <td>Zeile 1, Zelle 1</td> <td>Zeile 1, Zelle 2</td> </tr> </table>

HTML-Tabellenüberschriften

Tabellenüberschriften werden mit dem <th>-Tag definiert.

Die meisten Browser zeigen Überschriften als fetten, zentrierten Text an:

Beispiel

<table border="1"> <tr> <th>Überschrift 1</th> <th>Überschrift 2</th> </tr> <tr> <td>Zeile 1, Zelle 1</td> <td>Zeile 1, Zelle 2</td> </tr> <tr> <td>Zeile 2, Zelle 1</td> <td>Zeile 2, Zelle 2</td> </tr> </table>

Im Browser wird es wie folgt angezeigt:


Examples

Weitere Beispiele

Randlose Tabelle
Dieses Beispiel zeigt eine Tabelle ohne Rahmen.

Tabellenüberschriften (Überschrift) in der Tabelle
Dieses Beispiel zeigt, wie man Tabellenkopfzeilen anzeigt.

Tabelle mit einem Titel (caption)
Dieses Beispiel zeigt eine Tabelle mit einem Titel.

Zeilen- oder spaltenübergreifende Tabellenzellen
Dieses Beispiel zeigt, wie man zeilen- oder spaltenübergreifende Tabellenzellen definiert.

Tabellen-Tags innerhalb von Zellen
Dieses Beispiel zeigt, wie man Elemente innerhalb verschiedener Elemente anzeigt.

Zelleninnenabstand (Cell padding)
Dieses Beispiel zeigt, wie man cell padding verwendet, um Abstand zwischen Zellinhalt und Zellrahmen zu schaffen.

Zellenabstand (Cell spacing)
Dieses Beispiel zeigt, wie man cell spacing verwendet, um den Abstand zwischen Zellen zu vergrößern.

Eine schöne Tabelle

HTML-Tabellen-Tags

Tag Beschreibung
<table> Definiert eine Tabelle
<th> Definiert einen Tabellenkopf
<tr> Definiert eine Tabellenzeile
<td> Definiert eine Tabellenzelle
<caption> Definiert einen Tabellentitel
<colgroup> Definiert eine Gruppe von Spalten für eine Tabelle
<col> Definiert Attribute für Tabellenspalten
<thead> Definiert eine Tabellenfußzeile
<tbody> Definiert einen Tabellenkörper
<tfoot> Definiert eine Tabellenfußzeile
Andere Erweiterungen