Die Zellpolsterung ist definiert als der Raum in der Mitte der Daten der Zelle und des Randes. Wenn wir die Daten in die Zellen der Tabelle einfügen, müssen wir Platz zwischen dem Rand der Zelle und ihren Daten schaffen. Dieser Abstand ist als Zellpolster in CSS bekannt. Wir können die linke Polsterung der Zelle, die rechte Polsterung, die obere Polsterung und die untere Polsterung separat sowie kombinierte Polsterung für alle Seiten einstellen. Wenn wir diese Zellpolsterung nicht in unsere Tabellenzellen einstellen, wird sie standardmäßig gemäß den Daten der Zellen festgelegt. Wir haben unterschiedliche Eigenschaften in CSS, um diese Zellpolsterung festzulegen.
Durch die Verwendung der Eigenschaft „Polsterung“ wird die Polsterung auf allen vier Seiten innerhalb der Zelle eingestellt. Aber wenn wir die Polsterung nur auf einer Seite einstellen wollen, haben wir auch die Eigenschaften, um dies festzulegen. In diesem Leitfaden werden wir die Mobilfunkmobilie in CSS untersuchen und hier Beispiele durchführen, in denen wir diese Eigenschaften verwenden werden.
Eigenschaften für die Zellpolsterung in CSS:
Polsterung: Wert.
Padding-Links: Wert.
Padding-Rechts: Wert.
Padding-Top: Wert.
Padding-Bottom: Wert.
Beispiel 1:
Da wir die Eigenschaften der Zellpolsterung auf unsere Tabellenzellen anwenden müssen, müssen wir die Tabelle konstruieren. Erstens werden wir diese Eigenschaften darauf verwenden. Wir können die Tabelle in HTML erstellen, indem wir einige Tags hinzufügen, die zum Erstellen der Tabelle verwendet werden. Hier konstruieren wir eine Tabelle in HTML, indem wir die Datei öffnen. Nach dem Hinzufügen grundlegender Tags des HTML -Erbaus der Tabelle im Körper des HTML -Code. Wir setzen das "
" Schild. In diesem Tag werden wir die Überschriftenzeile mit dem „TR“ und dem „Th“ -Tag erstellen. Im "Th" -Tag fügen wir hier einige Daten hinzu. Dann verwenden wir für jede Zeile wieder "tr".
Dann verwenden wir das "TD" -Tag in diesem „TR“ -Tag. Fügen Sie Daten in dieser „TD“ hinzu, damit die Zeilen der Tabelle Daten hinzufügen. Nachdem wir diesen Code abgeschlossen haben, müssen wir ihn mit dem speichern.HTML ”-Dateierweiterung und wir müssen diese Datei mit der CSS -Datei im„ Kopf “dieser HTML -Datei verknüpfen. Wir werden diese Tabelle in allen Beispielen in diesem Handbuch verwenden, aber in jedem Beispiel verschiedene Eigenschaften der Zellpolsterung anwenden. Nachdem wir dies gespeichert haben, werden wir uns in die CSS -Datei bewegen, in der wir CSS -Eigenschaften verwenden werden. Alle diese Eigenschaften gelten hier in dieser Tabelle.
Wir haben eine Überschrift in HTML erstellt. Also, hier werden wir es ein wenig stylen, indem wir die Eigenschaft „Farbe“ verwenden. Wir setzen die Schriftfarbe auf "Kastanienbranchen". Dann setzen wir auch seine „Schriftfamilie“ und verwenden den „Algerier“ als Wert dieser Eigenschaft. Wenden Sie dann den 2PX -Rand auf der gesamten Tabelle an. Der Typ ist hier auf "fest" und die Farbe der "Grenze" ist "Maroon".
Als nächstes wird die „Breite“ der Tabelle eingestellt. Wir setzen hier „automatisch“, damit die Breite automatisch nach den Daten eingestellt wird. Danach ist das „Grenzkollaps“ -Sturm hier und es ist „Zusammenbruch“. Der Rand des Tisches wird also zusammengebrochen. Jetzt müssen wir für jede Zelle einen Rand schaffen. Dafür nutzen wir also erneut das „Grenz“ -Sachgut für „Th“ und „TD“. Die in diesen Zellen geschriebenen Daten sind auf die „schwarze“ Farbe in der Eigenschaft „Farbe“ eingestellt.
Jetzt setzen wir die Zellpolsterung mit Hilfe der „Polster“ -Spertion in CSS und setzen hier die „15px“ -Polsterung. Es erzeugt einen 15px -Speicherplatz zwischen der Zelle und den Daten von oben, links, unten und rechts. Wenn wir auf allen vier Seiten die gleiche Polsterung anwenden möchten, verwenden wir diese „Polster“ -Spertum. Diese eine Eigenschaft wendet die Polsterung auf allen Seiten an.
Beachten Sie in dieser Ausgabe, dass zwischen dem Text, der in der Zelle und dem Rand dieser Zelle geschrieben ist. Der Raum von allen vier Seiten ist gleich. Dies ist Zellpolsterung in CSS und diese „Polster“ -Stechnik setzt auf allen Seiten gleiche Polsterung ein.
Beispiel # 2:
Hier ist der Code der gleiche wie wir im ersten Beispiel diskutiert haben. Wir ändern nur die „Farbe“ der Überschrift und die Farbe des „Randes“ der Zelle in „grün“. Wenn wir diese Eigenschaft „Polster-Links“ verwenden, wird die Zellpolsterung nur auf der linken Seite eingestellt. Wir setzen den Wert von "Padding-Links" auf "60px". Auf der linken Seite der Zellendaten und der Zellgrenze erzeugt es 60px -Raum.
In dieser Ausgabe befindet sich auf der linken Seite zwischen den Daten und dem Rand aller Zellen ein Platz. Dies liegt daran. Es schafft also den gewünschten Raum nur auf der linken Seite und es wird diese Polsterung auf den verbleibenden drei Seiten nicht angewendet.
Beispiel # 3:
In diesem Beispiel ändern wir einfach die „Farbe“ der Überschrift, die Farbe des „Randes“ der Zelle und die Tabelle in „orange“. Wenn wir die Eigenschaft „Polster rechts“ verwenden, wirkt sich nur die Polsterung von Zellen auf der rechten Seite aus. Es wird einen Platz zwischen den Daten in der Zelle und der rechten Kante der Zelle schaffen. Der Wert von „Padding-Right“ hier ist auf „50px“ gesetzt.”Es bleibt eine 50px -Lücke zwischen den Daten der Zelle und der Zelle Rand auf der rechten Seite.
Sie können sehen, dass zwischen den Daten und dem Rand aller Zellen nur ein Raum auf der rechten Seite liegt. Dies liegt an der verwendeten Eigenschaft „Polsterrechte“. Infolgedessen erzeugt es nur die erforderliche Polsterung auf der rechten Seite und ignoriert die verbleibenden drei Seiten.
Beispiel Nr. 4:
Hier verändern wir einfach die „Farbe“ der Überschrift, den „Rand“ der Zellen und den Tischgrenze zu „Blau“. Wir verwenden gerade die CSS-Immobilie „Padding-Top“. Die Eigenschaft „Polstertop“ beeinflusst nur die Polsterung von Zellen oben, wenn sie verwendet wird. Das "Polstertop" ist in diesem Fall auf "55px" eingestellt. Oben wird es eine 55px -Lücke zwischen den Daten der Zelle und der Rand der Zelle geben.
Hier befindet sich auf der Oberseite jeder Zelle ein Platz zwischen den Daten und der Zellgrenze. Dies liegt an der Verwendung der „Polstertop“ -Sicht. Infolgedessen fügt es nur die erforderliche Polsterung zur oberen Seite hinzu.
Beispiel Nr. 5:
Jetzt verändern wir die „Farbe“ der Überschrift, "Rand" der Zellen und die Tabelle in "lila". Wir verwenden die CSS-Immobilie "Padding-Bottom". Wenn das Attribut „Padding-Bottom“ angewendet wird, wird nur die Polsterung von Zellen auf den Boden gesetzt. Es wird eine Zellpolsterung zwischen den Daten in der Zelle und dem unteren Rand der Zelle erzeugen. In diesem Szenario ist das „Padding-Bottom“ auf „53px“ eingestellt.
Hier können Sie den Raum zwischen den Daten in der Zelle und dem unteren Rand der Zelle beobachten. Wenn wir die Eigenschaft „Polsterboden“ verwenden, fügt sie die Zellpolsterung nur auf der Unterseite der Zelle hinzu.
Abschluss:
Dieser Leitfaden hat das Zellpolsterkonzept in CSS im Detail erläutert. Wir haben hier verschiedene Polstereigenschaften besprochen und diese Eigenschaften in verschiedenen CSS -Codes verwendet. Wir haben festgestellt, dass wir in CSS die Zellpolsterung auf allen Seiten der Zelle mithilfe der Eigenschaft „Polster“ einstellen und auf einer Seite nur mit unterschiedlichen Polstereigenschaften auf einer Seite auftragen. Wir haben uns eine Vielzahl von Codes angesehen, in denen wir diese Eigenschaften sowie die Auswirkungen dieser Eigenschaften auf die Tabellenzelle verwendet haben. Sie setzen die Zellpolsterung nach dem gründlichen Lesen dieses Leitfadens ein.
