Eine Tabelle ist eine wesentliche Komponente in HTML, um Daten in einem strukturierten Format mit Zeilen und Spalten anzuzeigen. In HTML werden Tabellen mit den Tags <table>, <tr> und <td> erstellt.
Das Tag <table> stellt den Haupttabellencontainer dar, der alle Zeilen und Spalten enthält. Zeilen werden mit dem Tag <tr>(Tabellenzeile) definiert, während Zellen innerhalb der Zeilen mit dem Tag <td>(Tabellendaten) definiert werden. Darüber hinaus können Sie das Tag <th>(Tabellenkopf) verwenden, um Kopfzellen für die Tabelle zu definieren.
Sie können Attribute wie „colspan“ und „rowspan“ verwenden, um Zellen in der Tabelle zusammenzuführen oder Zellen über mehrere Zeilen und Spalten hinweg zu verteilen. Darüber hinaus können Sie CSS-Eigenschaften anwenden, um das Erscheinungsbild und Layout der Tabelle anzupassen.
Tabelle( <table>)
- Das <table> Element wird zum Erstellen einer Tabelle in HTML verwendet.
- Daten werden in Zeilen( <tr>) und Spalten( <td> oder <th>) platziert.
- Jede Datenzelle wird innerhalb von <td>(Datenzelle) oder <th>(Kopfzelle) Elementen platziert.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Spaltenüberschrift( <th>)
- Das <th> Element wird zum Erstellen von Spaltenüberschriften in einer Tabelle verwendet.
– Normalerweise in der ersten Zeile der Tabelle platziert.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Datenzeilen( <tr>):
– Das <tr> Element wird zum Erstellen von Datenzeilen in einer Tabelle verwendet.
- Innerhalb dieser Elemente werden Datenzellen( <td>) oder Kopfzellen( <th>) platziert. <tr>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Spaltenübergreifend( colspan)
Das colspan Attribut wird verwendet, um die Anzahl der Spalten zu bestimmen, die eine Datenzelle oder Kopfzelle in der Tabelle umfassen wird.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Zeilenübergreifend( rowspan)
Das rowspan Attribut wird verwendet, um die Anzahl der Zeilen zu bestimmen, die eine Datenzelle oder Kopfzelle in der Tabelle umfassen wird.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Zellen zusammenführen( colspan und rowspan)
Sie können beide Attribute colspan und kombinieren rowspan, um Zellen in einer Tabelle zusammenzuführen.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border Eigentum
- Die border Eigenschaft gibt die Dicke des Tabellenrandes an.
- Der Wert von border ist eine nicht negative ganze Zahl.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding Eigentum
- ,Die cellpadding Eigenschaft gibt den Abstand zwischen dem Zellinhalt und dem Rand der Zelle in der Tabelle an.
- Der Wert von cellpadding ist eine nicht negative ganze Zahl
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing Eigentum
– Die cellspacing Eigenschaft gibt den Abstand zwischen Zellen in der Tabelle an.
- Der Wert von cellspacing ist eine nicht negative ganze Zahl.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Mit diesen Attributen und Elementen können Sie Tabellen in HTML entsprechend Ihren Anforderungen erstellen und anpassen. Mit ihnen können Sie Daten übersichtlich und übersichtlich auf Ihrer Website darstellen.