Höhe ist die Messung von etwas von unten nach oben oder vom Kopf zum Fuß. Die Höhe der Tabellenreihe ist definiert als der Abstand zwischen der Oberseite und der Basis der Reihe. In CSS haben wir die Eigenschaft „Linienhöhe“, mit der wir die Höhe der Tabellenreihe anpassen können. Das CSS-Attribut „Zeilenhöhe“ kann verwendet werden, um die Zeilenhöhe der Tabelle zu ändern. Wenn wir den Wert dieser Eigenschaft „Linienhöhe“ ändern, wird unsere Tabellenzeile in dieser Höhe geändert. Wir werden diese Eigenschaft "Linienhöhe" verwenden, um die Höhe der Tabellenzeile in diesem Tutorial festzulegen, und wir zeigen Ihnen, wie die Höhe der Tabellenzeile festgelegt wird und wie die Höhe der Tabellenzeile anhand mehrerer Beispiele angepasst werden.
Beispiel 1:
Um die Zeilenhöhe der Tabelle festzulegen, müssen wir die Tabelle in der HTML -Datei entwerfen. Diese HTML -Datei wird hier im Visual Studio -Code erstellt. Sie können jedoch jede Software verwenden, um diese Codes zu erstellen. Diese Software wird verwendet, um die Beispiele auszuführen. Wir müssen die Sprache auswählen, wenn wir eine neue Datei im Visual Studio -Code erstellen. Andernfalls erkennt es es standardmäßig. Wenn HTML als Sprache ausgewählt wird, wird die Dateierweiterung automatisch erstellt, wenn die Datei unter einem beliebigen Namen gespeichert wird. Wir setzen nur "!"In dieser Datei nach der Auswahl von HTML als Sprache und Drücken" Eingeben ". Die Kern -Tags des „HTML“ -Codes werden automatisch erstellt.
Die "Tabelle" im "Körper" muss jetzt erstellt werden. Die Tabelle wird erstellt, indem zuerst die Überschrift erstellt und dann die “verwendet werden
" Schild. Die von uns erstellte Tabelle enthält fünf Spalten und sechs Zeilen. Die erste Zeile der Tabelle ist die Überschriftenzeile der Tabelle, und wir verwenden „Th“, um Daten dazu hinzuzufügen. Das „TD“ -Tag wird auch verwendet, um Daten in die Zellen der Tabelle mit „TR“ für die Zeilen der Tabelle zu setzen. Danach werden wir zur CSS -Datei fortfahren, mit der die Zeilenhöhe der Tabelle festgelegt wird.
Stylen Sie die Überschrift, indem Sie „H1“ nennen und CSS -Eigenschaften anwenden. Wir haben "grün" für den Parameter "Farbe" gewählt, der verwendet wird, um die Farbe des Textes zu ändern. Die „Schriftfamilie“ dieser Überschriften ist „algerisch“ und wenden Sie dann einen „Grenze“ von „2px“ auf die gesamte Tabelle an, wobei der Typ auf „Solid“ und die Grenze auf „lila“ eingestellt ist. Die „Breite“ der Tabelle wird dann angegeben, wobei „automatisch“ die Breite ist. Dann verwenden wir die Eigenschaft „Grenzkollapse“ und setzen dies auf "Zusammenbruch", um den Rand der gesamten Tabelle zu kollabieren.
Danach müssen wir den „Grenze“ für alle Zellen schaffen. Wir setzen den gleichen Rand für die Zelle, die wir für die Tabelle hier verwenden. Der Text in den Zellen wird in „grün“, wenn wir diese „Farbe“ in der CSS -Eigenschaft festlegen. Jetzt setzen wir die Zeilenhöhe der Tabelle ein. Hier setzen wir "Tr", das für die Zeilen verwendet wird. Wir setzen „30px“ für die Höhe der Tabelle Zeile ein. Diese Höhe gilt für alle Reihen der Tabelle.
Die Ausgabe zeigt die Tabelle. In dieser Tabelle beträgt die Höhe der Zeilen der Tabelle jeweils 30px. Wir können die Höhe der Reihe nach unserer Wahl festlegen. Wir setzen es in diesem Code auf 30px und Sie können dies in der angegebenen Ausgabe überprüfen.
Beispiel # 2:
Die Tabelle, die wir hier verwenden, ist die gleiche wie die, die wir im vorherigen Beispiel verwendet haben. Aber wir werden den Eigenschaftswert der Linienhöhe ändern, um die Zeilenhöhe der Tabelle anzupassen. Wir werden die „Schriftfamilie“ der Schrift in „Times New Roman“ ändern. Dann wenden wir einige Attribute auf die gesamte Tabelle an und etablieren die Grenze. Erstens mit einer „Grenze“ von „2px“ und in „fester“ Form sowie in der Farbe „grün“ sowie in der Farbe „grün“. Wir verwenden das Schlüsselwort "Auto" für die Eigenschaft "Breite" und das Schlüsselwort "Zusammenbruch" für die Eigenschaft "Border-Collapse".
Wir müssen auch die Grenze für die Zellen etablieren. Wir verwenden also das „Grenz“ -Sturm jetzt für „th“ und „tr“. Die Werte werden auf "2PX Solid Green" eingestellt und der Text der Zelle ist Farbe "blau". Dann setzen wir für alle Zeilen mit Ausnahme der Überschriftenzeile die Höhe "20px", indem wir die Eigenschaft "Linienhöhe" verwenden. Wir wollen aber auch die Höhe der Überschriftenreihe festlegen. Dafür verwenden wir das "Th" und verwenden hier "Linienhöhe" und setzen es auf "80px". Wenn diese Tabelle auf dem Ausgangsbildschirm rendert, lautet die Höhe der Überschriftenzeile "80px" und die Höhe der verbleibenden Zeilen "20px" beträgt "20px".
Hier können Sie sehen, dass die Höhe der ersten Reihe größer ist als die verbleibenden Zeilen, da wir ihre Höhe auf „80px“ eingestellt haben und die Höhe der anderen Reihe „20px“ ist, die Höhe der anderen Reihe ist, ist „20px“. Deshalb gibt es einen Unterschied zwischen der Höhe der ersten Reihe, der die Header -Reihe und der Höhe der anderen Reihen ist.
Beispiel # 3:
In dieser Tabelle geben wir jeder Zeile den Namen als "T1", "T2", "T3" und so weiter. Dann setzen wir für jede Zeile in CSS unterschiedliche Höhen. Wir werden in jeder Zeile die Eigenschaft „Linienhöhe“ separat anwenden, indem wir die Namen der Zeilen verwenden, die wir hier in dieser HTML-Datei angegeben haben.
Erstens stylen wir die Überschrift, die oben erscheint, um sie attraktiv zu machen, indem wir einige Eigenschaften verwenden. Wir verwenden die „Farbe“, die die CSS -Eigenschaft ist, und setzen die Farbe „Light Coral“ für diese Überschrift. Die „Schriftfamilie“ der Überschriften ist "algerisch". Die Tischgrenze wird als „Maroon“ festgelegt. Wir setzen es auf „solide“, so dass es als durchgezogene Linienrand erscheint und es in Breite „2px“ ist. Dann „Zusammenbruch“ den Rand, damit er als einzelne Grenze angezeigt wird.
Jetzt schaffen wir einen „Grenze“ um alle Zellen der Tabelle. Wir wenden den gleichen Rand wie die Tischgrenze an. Die gleiche „kastanienbraune“ Farbe und solide Art von „2px“. Der Text "Farbe" ist "schwarz". Jetzt werden wir die Höhe jeder Zeile separat einstellen, indem wir den Namen der Zeilen verwenden. Wir verwenden "T1" mit "tr", das die erste Zeile der Tabelle darstellt und ihre Höhe unter Verwendung der Eigenschaft "Linienhöhe" und "20px" als Wert einstellen. Verwenden Sie dann "T2" mit "tr", indem Sie platzieren ".Zwischen ihnen, was die zweite Reihe ist. Die Höhe dieser Reihe ist auf "30px" eingestellt.
Danach haben wir "T3", was die dritte Reihe ist. Wir schreiben es mit "TD", während wir den "T1" oder "T2" schreiben, aber hier ist seine Größe "50px". Wir setzen "70px" für die vierte Reihe mit "T4" und "90px" für die fünfte Reihe ein. Setzen Sie außerdem "120px" für die sechsten Zeilen und der Name der sechsten Reihe lautet "T6". Jetzt setzen wir verschiedene Zeilenhöhen für alle sechs Reihen.
Der Höhenunterschied zwischen allen Zeilen ist in diesem gegebenen Ausgang zu sehen. Hier ist die Höhe der ersten Reihe kleiner als die zweite Reihe und so weiter. Alle Zeilen sind in unterschiedlichen Höhen. Auf diese Weise können wir die Höhe der Zeilen in CSS einstellen.
Abschluss:
In diesem Tutorial wurde gezeigt, wie hoch die Zeilenhöhe der Tabelle ist, wie die Zeilenhöhe der Tabelle in CSS festgelegt wird und welche CSS -Eigenschaft die Zeilenhöhe der Tabelle ermittelt wird. Wie wir bereits erwähnt haben, wird die Höhe der Zeile einer Tabelle von oben nach unten in der Reihe gemessen und erklärt, dass die Eigenschaft „Linienhöhe“ von CSS zum Festlegen der Höhe der Zeilen verwendet wird. Wir haben diese Eigenschaft auf allen Zeilen zusammen und in der Zeile jeder Tabelle getrennt verwendet. Wir haben verschiedene Codes in diesem Tutorial sowie die Ergebnisse dieser Codes durchgesehen. Nachdem Sie dieses Tutorial gründlich gelesen haben, setzen Sie die Höhe der Zeile der Tabelle in Projekten fest.
