Tabellenbezogene Tags

In diesem Artikel erklären wir tabellenbezogene Tags.

Dies erklärt, wie man Tabellen und Tabellenüberschriften in HTML zusammen mit Beispielen beschreibt.

YouTube Video

Tabellenbezogene Tags

<table> Tag

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• Das <table>-Tag wird verwendet, um eine Tabelle zu erstellen, die Daten in Zeilen und Spalten organisiert und anzeigt.

  Das <table>-Tag organisiert Daten visuell und erstellt Tabellen mit mehreren Zeilen und Spalten. Zeilen werden mit dem <tr>-Tag definiert, Kopfzellen mit dem <th>-Tag und Datenzellen mit dem <td>-Tag.

• Sie können den Stil und das Layout der Tabelle mit CSS anpassen.

<tr> Tag

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• Das <tr>-Tag wird verwendet, um Zeilen in einer Tabelle zu definieren.

  Das <tr>-Tag wird verwendet, um jede Zeile einer Tabelle zu erstellen, die Zellen (<td> oder <th>) enthält.

• Jede Zeile kann mehrere Zellen enthalten und bildet die Gesamtstruktur der Tabelle.

<th> und <td> Tags

1<th>Header 1</th>
2<td>Data 1</td>

• Das <th>-Tag definiert die Kopfzelle einer Tabelle. Typischerweise in Kopfzeilen verwendet, ist der Inhalt der Zellen fett und zentriert.
• Das <td>-Tag definiert eine Standard-Datenzelle, die normale Tabellendaten anzeigt.

colspan und rowspan Attribute

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan und rowspan sind Attribute, die verwendet werden, wenn Tabellenzellen mehrere Spalten oder Zeilen überspannen.

• Das Attribut colspan ermöglicht es einer Zelle, sich über mehrere Spalten zu erstrecken.
• Das rowspan-Attribut erlaubt es einer Zelle, sich über mehrere Zeilen zu erstrecken.

<thead>, <tbody>, <tfoot> Tags

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• Der <thead>-Tag wird verwendet, um den Kopfbereich einer Tabelle zu definieren. Er enthält typischerweise die Spaltenüberschriften.

  Der <thead>-Tag befindet sich oben in der Tabelle und definiert die Spaltentitel oder Überschriften. Dies hilft, Datenabschnitte klar zu unterscheiden.

• Der <tbody>-Tag definiert den Hauptteil der Tabelle. Er enthält die Datenzeilen.

  Der <tbody>-Tag enthält den Hauptteil der Tabellendaten. Er befindet sich zwischen den Zeilen, die von den Tags <thead> und <tfoot> eingeschlossen werden.

• Der <tfoot>-Tag definiert den Fußteil der Tabelle, der Summen oder Anmerkungen enthält.

  Der <tfoot>-Tag befindet sich am Ende der Tabelle und wird zur Anzeige von Summen oder anderen Anmerkungen verwendet. Er ist besonders nützlich beim Zusammenfassen oder Anzeigen von Summen für große Datensätze.

<caption>- und <colgroup>-Tags

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• Der <caption>-Tag fügt eine Beschriftung (Überschrift) hinzu, um den Tabelleninhalt klarer zu machen. Er wird normalerweise oben in der Tabelle platziert und dient dazu, den gesamten Tabelleninhalt zusammenzufassen.

• Der <colgroup>-Tag gruppiert Spalten innerhalb einer Tabelle und wird verwendet, um Stile oder Layouts anzuwenden. Sie können Hintergrundfarben oder Breiten für bestimmte Spalten festlegen, indem Sie den <col>-Tag einschließen.

Tabellenbeispiel

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• Das <table>-Tag wird verwendet, um eine Tabelle zu erstellen, die Daten in Zeilen und Spalten anzeigt.

• Das <thead>-Tag fasst die Kopfzeilen der Tabelle zusammen. Es enthält normalerweise <th>-Tags, die als Kopfzeilen dienen.

• Das <tbody>-Tag fasst den Hauptinhalt der Tabelle zusammen. Es enthält normalerweise Datenzeilen, die aus <td>-Tags bestehen.

• Das <tfoot>-Tag fasst die Fußzeilen der Tabelle zusammen. Es eignet sich zum Anzeigen von Gesamtsummen oder Anmerkungen.

• Das <colgroup>-Tag gruppiert die Spalten einer Tabelle und wird verwendet, um Stile darauf als Ganzes anzuwenden.

• Das <caption>-Tag fügt der Tabelle eine Beschriftung oder Überschrift hinzu, wodurch es den Benutzern erleichtert wird, den Tabelleninhalt zu verstehen.

• Das Attribut colspan ermöglicht es einer Zelle, sich über mehrere Spalten zu erstrecken.

• Das rowspan-Attribut erlaubt es einer Zelle, sich über mehrere Zeilen zu erstrecken.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video