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>
Header 1 | Header 2 |
---|---|
Data 1 | Data 2 |
-
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>
Header 1 | Header 2 |
---|---|
Spanning Cell | |
Spanning Cell | Data 1 |
Data 2 |
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>
Header 1 | Header 2 |
---|---|
Data 1 | Data 2 |
Data 3 | Data 4 |
Footer 1 | Footer 2 |
-
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>
Header 1 | Header 2 |
---|---|
Data 1 | Data 2 |
Data 3 | Data 4 |
-
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>
Header 1 | Header 2 | Header 3 | Header 4 |
---|---|---|---|
Data 11 | Data 12 | Data 13 | Data 14 |
Data 21 | Data 22 | Data 23 | Data 24 |
Table Footer Title | Table Footer Summary |
-
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.