In diesem Artikel zeige ich Ihnen, wie Sie eine Tabelle in HTML erstellen, durch die Sie die Eigenschaften der Tabelle kennen, wie z. B.: colspan , rowspan , cellpadding und cellpacing .

HTML-Tabelle wird verwendet, um Daten in tabellarischer Form anzuzeigen. Jede Tabelle wird in zwei Komponenten unterteilt, nämlich Spalten und Zeilen . Sie bestehen aus den Tags table , tr , td , tbody , thead , tfoot .

In Webanwendungen werden Tabellen selten verwendet, nur Datenverwaltungsanwendungen werden häufig verwendet. Der Grund kann sein, dass die Struktur der Tabelle sehr schwer aussieht, es ist schwierig, sie mit CSS zu kombinieren, um komplexe Schnittstellenvorlagen zu erstellen. Bei der Anzeige von Tabellendaten steht jedoch immer noch die Tabelle an erster Stelle.

Was ist das Tabellen-Tag in HTML?

Das Tabellen-Tag in HTML ist ein spezielles Tag, das verwendet wird, um tabellarische Daten im Browser anzuzeigen. Jede Tabelle hat eine definierte Anzahl von Zeilen und Spalten. Sie können auch zwei benachbarte Zellen wie in Word zu einer Zelle zusammenführen. Sehen Sie sich das Bild unten an, um mehr über diese Karte zu erfahren.

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td>Hàng 1 cột 1</td> <td>Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Darin :

• Die Eigenschaft border="1" soll den Rand der Tabelle deklarieren
• Das cellspacing="0" deklariert den Abstand zwischen dem oberen und unteren Rand des Rahmens
• Das cellpadding="5" den Abstand zwischen dem Inhalt der Zelle und dem Rand an
• Wenn Sie eine Spalte hinzufügen möchten, fügen Sie einfach ein td hinzu
• Wenn Sie eine Zeile hinzufügen möchten, fügen Sie einfach eine weitere tr hinzu

Bitte ändern Sie die Anzahl der zu beobachtenden tr- und td-Tags manuell, dies hilft Ihnen, die Tabelle besser zu verstehen.

Colspan in HTML

Colspan html ist ein Attribut des Tabellen-Tags, es wird verwendet, um Zellen in derselben Zeile zusammenzuführen. Wenn Sie beispielsweise 2 Zellen zusammenführen möchten, deklarieren Sie den Wert dafür als 2, führen Sie 3 Zellen zusammen, deklarieren Sie 3.

Bei der Deklaration von colspan wird die Anzahl der td-Tags der aktuellen Zeile im Vergleich zu anderen Zeilen reduziert.

Wie im Beispiel unten hat das erste tr -Tag nur zwei td -Tags und das zweite tr -Tag bis zu 3 td -Tags. Der Grund dafür ist, dass es im ersten tr -Tag ein td -Tag mit colspan = 2 gibt.

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td colspan="2">Hàng 1 cột 1 và Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Zeilenspanne in HTML

Ähnlich wie colspan wird rowspan verwendet, um zwei Zellen zusammenzuführen. Es wird jedoch nach Spalte und nicht nach Zeile aggregiert. Wie viele Zellen Sie zusammenführen möchten, geben Sie die Anzahl dafür ein.

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td rowspan="2">Hàng 1 cột 1</td> <td>Hàng 1 cột 3</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

Tag-Gruppe thead – tbody – tfoot

In dem Artikel zu lernen, was HTML ist, habe ich eine kurze Einführung in das Layout der Website gegeben, einschließlich Komponenten wie Kopfzeile , Inhalt , Fußzeile , die der Tabelle ähnlich sind. Die Leute werden die Tabelle in drei Hauptkomponenten unterteilen, nämlich header , body und footer mit den Tags thead , tbody und tfoot .

 <table border="1" cellspacing="0" cellpadding="5"> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tbody> <tr> <td> mitrun </td> <td> mitrun1001@gmail.com </td> </tr> <tr> <td> web888 </td> <td> web888.vn@gmail.com </td> </tr> </tbody> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

Führen Sie es aus, das Ergebnis ist, dass die Schnittstelle immer noch die gleiche ist wie die übliche Art und Weise. Wenn wir jetzt jedoch die Position der tbody und des Kopfes thead , sehen Sie, was passiert.

Beispiel : Ändern Sie die Position der Tags thead, tbody und tfoot

 <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <td> TheHalfheart </td> <td> TheHalfHeart@gmail.com </td> </tr> <tr> <td> Freetuts </td> <td> Freetuts.net@gmail.com </td> </tr> </tbody> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

Das Hochfahren der Schnittstelle ist noch normal. Gemäß den tbody sollte der Körper oben sein, weil er oben ist, aber genau in der Mitte. Das bedeutet, dass, wenn wir diese Gruppen verwenden, egal wo sie platziert sind, die Anzeige immer noch der Ad-tbody-tfoot- Regel folgt.

Die am häufigsten verwendeten HTML-Tabellenattribute

Hier möchte ich die 4 Attribute des Tabellen-Tags in HTML zusammenfassen, für später speichern.

• border : Wird verwendet, um die Rahmengröße der Tabelle zu deklarieren.
• Cellspacing : Geben Sie die Breite des Rahmens an.
• cellpadding : Geben Sie den Abstand zwischen dem Rand und den Daten in der Zelle an.
• width : Deklarieren Sie die Breite der Spalten ( im tr-Tag ).

Häufig gestellte Fragen zu HTML-Tabellen

Wie erstelle ich eine Tabelle ohne Rand in HTML?

Um eine Tabelle ohne Rahmen zu erstellen, setzen wir die Eigenschaft border="0" .

 <table border="0"> </table>

So erstellen Sie einen Abstand zwischen Buchstaben und dem Rand von Zellen in einer Tabelle

Wir verwenden die Eigenschaft cellpadding , um Platz zwischen den Daten und dem Rand der Tabelle zu schaffen. Eingabeeinheiten sind Pixel.

 1 2 3 <table celpadding="10"> </table>

So legen Sie die Länge der Spalten in der Tabelle fest

Wir setzen die Eigenschaft width in den tr-Tags, um die Länge der Spalten festzulegen.

 <table celpadding="10"> <tr width="20%"> </tr> <tr width="80%"> </tr> </table>

Daher habe ich in diesem Artikel die HTML-Tags eingeführt, die sich auf die Tabelle beziehen. Als Erstes ist in diesem Artikel zu beachten, wie mehrere Zellen mit zwei Tags colspan und rowspan werden. Die zweite besteht darin, die Tag-Gruppen thead , tbody und tfoot zu verstehen, um die richtige Position dafür zusammenzustellen. Diesen Artikel werde ich hier abbrechen, danke, dass Sie dieser Serie folgen.