CSS -Tischhöhe

CSS -Tischhöhe

In unserem täglichen Leben sagen wir, dass die Höhe die Messung von etwas von unten nach oben oder von Kopf zu Fuß ist. Wir haben die „Höhen“ -Spertion in CSS, die uns diese Möglichkeit bietet, die Höhe der Tabelle gemäß unserer Wahl festzulegen. Wir können es in Pixel oder Prozentsätzen einstellen. Wenn wir einen Wert in dieser Eigenschaft „Höhe“ festlegen, wird unsere Tabelle in dieser gegebenen Höhe eingestellt. In diesem Leitfaden verwenden wir diese Eigenschaft, um die Höhe der Tabelle festzulegen, und informieren Sie, wie die Höhe der Tabelle festgelegt wird. Wir werden die Höhe der Tabelle hier in verschiedenen Beispielen festlegen.

Beispiel 1

Wir müssen zuerst die Tabelle in der HTML -Datei entwerfen, um die Höhe der Tabelle festzulegen. Visual Studio -Code wird verwendet, um diese HTML -Datei zu erstellen. Sie können jede Software verwenden, um diese Codes durchzuführen. Wir verwenden diese Software, um Beispiele in diesem Handbuch auszuführen. Wenn wir eine neue Datei im Visual Studio -Code erstellen, müssen wir die Sprache auswählen, oder sie erkennt sie standardmäßig. Wenn wir HTML als Sprache auswählen, wird die Dateierweiterung automatisch generiert, wenn wir die Datei unter einem beliebigen Namen speichern.

Nach der Auswahl von HTML als Sprache tippen wir einfach “!"In diese Datei und klicken Sie auf" Eingeben ". Die grundlegenden Tags des „HTML“ -Codes werden automatisch gebildet. Legen Sie einfach den Körperanteil in den HTML -Körper. Der CSS -Dateilink wird vor dem Körper innerhalb des "Kopf" -Tags platziert. Wir erstellen die Tabelle, indem wir zuerst die Überschrift erstellen und dann die “verwenden

" Schild. Es gibt fünf Spalten und sechs Zeilen in der Tabelle, die wir machen. Die erste Zeile ist die Überschriftenzeile der Tabelle und wir verwenden „Th“, um Daten zur Überschriftenzeile der Tabelle hinzuzufügen.

Wir verwenden auch das TD -Tag, um Daten in die Zellen der Tabelle mit „TR“ einzufügen, die die Zeilen der Tabelle darstellen. Dann gehen wir weiter zur CSS -Datei, mit der die Höhe dieser Tabelle festgelegt wird.

Stylen Sie die Überschrift, indem Sie „H1“ erwähnen und hier Eigenschaften von CSS verwenden. Wir setzen die "Farbe" auf "rot". Die "Schriftfamilie" dieser Überschrift ist "Times New Roman". Stylen Sie dann die gesamte Tabelle, indem Sie einen „Rand“ von „2px“ anwenden und ihren Typ auf „solide“ stellen. Die Farbe des Randes ist „grau“.

Dann haben wir die „Breite“ des Tisches. Wir verwenden "250px" für die Breite. Hier setzen wir die „Höhe“ des Tisches fest. Für die Festlegung der Höhe der Tabelle verwenden wir die Eigenschaft „Höhe“ von CSS. Wenn wir den Wert hier in dieser Eigenschaft "Höhe" festlegen, wird die Höhe der Tabelle festgelegt. Wir setzen die „Höhe“ dieser Tabelle auf "150px",. Wenn diese Tabelle also auf dem Bildschirm rendert, gibt es eine „150px“ -Heide.

Danach setzen wir den Rand an einen einzelnen Rand für alle Zellen und Tischgrenzen, indem wir die Eigenschaft „Grenzkollapse“ verwenden und diese Eigenschaft auf „Zusammenbruch“ setzen. Wir wenden auch den Rand auf die Zellen und die Kopfreihe an. Wir verwenden auch das „Grenze“ -Spert. Der Rand befindet sich in „grau“ von „festem“ Typ und „2px“ in seiner Breite.

Die unten angegebene Tabelle befindet sich in der Höhe von 150px. Es verwaltet seinen Inhalt auf dieser Höhe, die wir im CSS -Code erwähnt haben. Wenn wir die Höhe der Tabelle festlegen, wird sie in derselben Höhe erstellt.

Beispiel # 2

Die Tabelle, die wir hier verwenden. Aber hier werden wir die Höhe der Tabelle mithöhe die Höhe der Höhe ändern. Wir setzen "blau" für die "Überschrift", die vor der Tabelle oben auf der Seite erscheint. Setzen Sie dann seine "Schriftfamilie" auf "Calibri" und sein Gewicht ist "mutiger". Dann wenden wir einige Eigenschaften auf die gesamte Tabelle an. Setzen Sie den Rand mit "Rand" von "2PX" und in "fester" Form und in "orange" Farbe. Die Breite dieser Tabelle lautet "300px". Diesmal und wir erhöhen die Höhe der Tabelle hier auf "250px". Der "Grenzkollapse" ist in diesem Beispiel erneut "Zusammenbruch". Die Einstellung der "Th" und "TD", indem der gleiche Rand wie die Tabelle und die "Farbe" "rot" angewendet wird, setzt die Farbe des in den Zellen geschriebenen Texts und die Überschrift Zellen auf "rot". Die "Schriftfamilie" für diesen Text ist "Arial".

In dieser Ausgabe wird die Tabellenhöhe aus der vorherigen Tabelle erhöht, die wir in Beispiel 1 erstellt haben, da wir die Höhe hier im CSS -Code ändern. Dann haben wir die Höhe des Tisches erhöht.

Beispiel # 3

Wir verwenden die gleiche Tabelle erneut wie die, die wir im ersten Beispiel verwendet haben. Aber wir werden den Höhepunkt der Höheneigenschaft ändern, um die Höhe der Tabelle anzupassen. Das „Übergang“, das vor dem Tisch oben angezeigt wird, ist auf "lila" eingestellt. Wechseln Sie dann die „Schriftfamilie“ der Schrift in „algerisch“. Dann wenden wir einige Attribute in die gesamte Tabelle an und stellen die Grenze fest. Erstens mit einer „Grenze“ von „2px“ und in „fester“ Form sowie in der Farbe „grün“ sowie in der Farbe „Grün“. Diesmal ist die Breite der Tabelle „automatisch“, während die Höhe der Tabelle „100px“ lautet.”

In diesem Fall wird „Grenzkollapse“ mit "Zusammenbruch" festgelegt. Die "Th" und "TD" sind an denselben Rand wie der Tisch gesetzt. Die Farbe des Textes in den Zellen und Überschriftenzellen ist auf „lila“ eingestellt. Die „Schriftfamilie“ dieses Textes ist "Cambria".

Der angegebene Screenshot ist die Ausgabe dieses Code. Hier sehen Sie, dass die Tabelle ihre Breite automatisch anpasst und die Höhe dieser angegebenen Tabelle "100px" lautet.

Beispiel # 4

Wir setzen dieselbe Tabelle mit verschiedenen Werten der Eigenschaften. Die „Farbe“ der Überschrift ist „orange“ und die „Schriftfamilie“ ist „algerisch“. In diesem Fall ist die Randfarbe des gesamten Tisches "lila", "lila". Die „Breite“ der gesamten Tabelle ist wieder „automatisch“, aber die „Höhe“ der Tabelle lautet "400px". Der Rand aller Zellen ist "lila" und der Text "Farbe" ist "rot". Die "Schriftfamilie" des Textes ist "sans-serif".

Hier, im Screenshot, können Sie die Höhe des Tisches bemerken. Die Tabelle ähnelt der obigen Abbildung. In der folgenden Abbildung wird jedoch die Höhe der Tabelle geändert.

Beispiel Nr. 5

In diesem Code setzen wir die Überschrift auf die „grüne“ Farbe von „algerisch“ „Schriftfamilie“. Dann sind die Tabelleneigenschaften die gleichen, die wir im vorherigen Beispiel besprochen haben. Hier setzen wir die Höhe der Tabelle mit Prozentsatz anstelle von Pixel fest. Wir werden die Höhe der Tabelle auf "50%" anpassen. Jetzt werden wir die Ausgabe einchecken, wie die Tabelle aussieht, wenn wir ihre Höhe in Prozent festlegen.

Hier beträgt die Höhe der Tabelle „50%“ und die Breite ist automatisch. Wir können jeden Wert in dieser „Höhe“ der Tabelle festlegen. Wir können die Höhe der Tabelle festlegen, die unserer Wahl entspricht.

Abschluss:

Diese Anleitung sollte Ihnen zeigen, wie hoch die Höhe der Tabelle ist, wie die Höhe der Tabelle in CSS festgelegt wird und welche CSS -Eigenschaft zum Einstellen der Höhe der Tabelle verwendet wird. Wie wir diskutiert haben, ist die Höhe die Messung der Tabelle von oben nach unten. Wir haben hier mehrere Codes durchgesehen und auch die Ausgabe aufgenommen. Nachdem Sie diesen Leitfaden gründlich untersucht haben, können Sie in Zukunft die Höhe der Tabelle in CSS festlegen.