Wysokość jest pomiarem czegoś od dołu do góry lub od głowy do stopy. Wysokość wiersza tabeli jest zdefiniowana jako odległość między górą a podstawą rzędu. W CSS mamy właściwość „wysokości linii”, która pozwala nam dostosować wysokość rzędu stołowego. Atrybut CSS „wysokości linii” można użyć do zmiany wysokości wiersza tabeli. Kiedy zmieniamy wartość tej właściwości „wysokości linii”, nasz wiersz tabeli jest zmieniany na tę wysokość. Użyjemy tej właściwości „wysokości linii”, aby ustawić wysokość wiersza tabeli w tym samouczku, i pokażemy, jak ustawia wysokość wiersza tabeli i jak dostosować wysokość wiersza tabeli za pomocą kilku przykładów.
Przykład 1:
Aby ustawić wysokość wiersza tabeli, musimy zaprojektować tabelę w pliku HTML. Ten plik HTML jest tworzony tutaj w kodzie Visual Studio. Ale możesz użyć dowolnego oprogramowania do tworzenia tych kodów. To oprogramowanie jest używane do uruchamiania przykładów. Musimy wybrać język podczas tworzenia nowego pliku w kodzie Visual Studio. W przeciwnym razie domyślnie go rozpozna. Gdy HTML jest wybierany jako język, rozszerzenie pliku jest tworzone automatycznie, gdy plik jest zapisywany pod dowolną nazwą. Po prostu umieszczamy „!”W tym pliku po wybraniu HTML jako języka i naciśnięciu„ Enter ”. Podstawowe tagi kodu „HTML” są wytwarzane automatycznie.
Należy teraz utworzyć „stół” w „ciała”. Tabela jest tworzona przez najpierw utworzenie nagłówka, a następnie za pomocą „
”Tag. Tabela, którą tworzymy, ma pięć kolumn i sześć wierszy. Pierwszym wierszem stołu jest wiersz nagłówka stołu, a my używamy „TH”, aby dodać do niego dane. Tag „TD” służy również do umieszczenia danych do komórek tabeli za pomocą „TR” dla wierszy tabeli. Następnie przejdziemy do pliku CSS, który zostanie użyty do ustawienia wysokości wiersza tabeli.
Styluj nagłówek, nazywając „H1” i stosując właściwości CSS. Wybraliśmy „zielony” dla parametru „kolor”, który służy do zmiany koloru tekstu. „Rodzina czcionki” nagłówek to „Algierskie”, zatem, zastosuj „granicę” „2px” do całego tabeli, z typem ustawionym na „solid”, a kolory graniczne ustawione na „fioletowe”. „Szerokość” stołu jest następnie określona, a „auto” jest szerokością. Następnie używamy właściwości „kołysanie granic” i ustawiamy ją na „zawalenie się” do zawalenia granicy całej tabeli.
Po tym musimy stworzyć „granicę” dla wszystkich komórek. Ustawiamy tę samą granicę dla komórki, której używamy dla tabeli tutaj. Tekst w komórkach będzie renderowany w „zielonym”, gdy ustawiamy ten „kolor” w właściwości CSS. Teraz ustawiamy wysokość wiersza tabeli. Tak więc tutaj umieszczamy „TR”, który jest używany do wierszy i ustawiamy wysokość wiersza, wykorzystując właściwość CSS „Line-Height”. Ustawiamy „30px” na wysokość rzędu tabeli. Ta wysokość będzie miała zastosowanie do wszystkich rzędów tabeli.
Wyjście pokazuje tabelę. W tym tabeli wysokość rzędów tabeli wynosi 30px każdy. Możemy ustawić wysokość wiersza zgodnie z naszym wyborem. Ustawiamy go na 30px w tym kodzie i możesz to sprawdzić w danym wyjściu.
Przykład nr 2:
Tabela, której tu używamy, jest taki sam jak ten, którego użyliśmy w poprzednim przykładzie. Ale zmienimy wartość właściwości wysokości linii, aby dostosować wysokość wiersza tabeli. Zmienimy „rodzinę czcionki” na „Times New Roman”. Następnie stosujemy niektóre atrybuty do całej tabeli i ustanawiamy granicę. Najpierw z „granicą” „2px” i w formie „solidnej”, a także w kolorze „zielonym”. Używamy słowa kluczowego „Auto” dla właściwości „szerokości” i słowa kluczowego „zawalenia się” dla właściwości „kołnierz”.
Musimy również ustalić granicę komórek. Tak więc używamy teraz właściwości „granicy” do „th” i „tr”. Wartości są ustawione na „2px solid zielony”, a tekst komórki jest kolorowy „niebieski”. Następnie, dla wszystkich wierszy oprócz wiersza nagłówka, ustawiamy wysokość „20px”, wykorzystując właściwość „wysokości linii”. Ale chcemy również ustawić wysokość rzędu nagłówka. W tym celu używamy tutaj „TH” i używamy „wysokości linii” i ustawiamy go na „80px”. Kiedy ta tabela będzie renderować na ekranie wyjściowym, wysokość wiersza nagłówka wyniesie „80px”, a wysokość pozostałych wierszy będzie „20px”.
Tutaj widać, że wysokość pierwszego rzędu jest większa niż pozostałe wiersze, ponieważ ustawiliśmy jego wysokość na „80px”, a wysokość drugiego rzędu to „20px”. Dlatego istnieje różnica między wysokością pierwszego rzędu, który jest rzędem nagłówka a wysokością innych wierszy.
Przykład nr 3:
W tej tabeli podajemy nazwę każdemu wierszowi jako „t1”, „t2”, „t3” i tak dalej. Następnie ustawiamy różne wysokości dla każdego wiersza w CSS. Zastosujemy właściwość „wysokości linii” osobno w każdym wierszu, używając nazwisk, które podaliśmy tutaj w tym pliku HTML.
Po pierwsze, stylizujemy nagłówek, który pojawia się na górze, aby był atrakcyjny, wykorzystując niektóre właściwości. Używamy „koloru”, który jest właściwością CSS i ustawiamy kolor „lekki koral” dla tego nagłówka. „Rodzina czcionki” nagłówek to „Algierski”. Granica stołu jest ustawiona jako „bordowy”. Ustawiamy go na „solid”, więc pojawia się jako granica linii solidnej i ma szerokość „2px”. Następnie „zapadnij” granicę, aby wyświetlała się jako pojedyncza granica.
Teraz tworzymy „granicę” wokół wszystkich komórek stołu. Stosujemy tę samą granicę co granica. Ten sam kolor „bordowy” i solidny typ „2px”. Tekst „kolor” jest „czarny”. Teraz ustawimy wysokość każdego wiersza osobno za pomocą nazwy wierszy. Używamy „T1” z „TR”, który reprezentuje pierwszy rząd tabeli i ustawia jego wysokość, używając właściwości „wysokości linii” i stawiając „20px” jako jej wartość. Następnie użyj „T2” z „TR”, umieszczając „.„Między nimi, który jest drugim rządem. Wysokość tego rzędu jest ustawiona na „30px”.
Po tym mamy „T3”, który jest trzecim rządem. Piszemy to z „TD”, gdy piszemy „T1” lub „T2”, ale tutaj jego wysokość wynosi „50px”. Ustawiamy „70px” dla czwartego rzędu za pomocą „T4” i „90px” dla piątego rzędu. Ustaw także „120px” dla szóstych wierszy, a nazwa szóstego rzędu to „T6”. Teraz ustawiamy różne wysokości wierszy dla wszystkich sześciu wierszy.
Różnica wysokości między wszystkimi wierszami jest widoczna w tym danym wyjściu. Tutaj wysokość pierwszego rzędu jest mniejsza niż drugi rząd i tak dalej. Wszystkie rzędy mają różne wysokości, więc w ten sposób możemy ustawić wysokość wierszy w CSS.
Wniosek:
W tym samouczku pokazano, czym jest wysokość wiersza tabeli, jak ustawić wysokość wiersza tabeli w CSS i która właściwość CSS służy do określenia wysokości wiersza tabeli. Jak powiedzieliśmy, wysokość rzędu stołu jest mierzona od góry do dołu rzędu i wyjaśniono, że właściwość „wysokości linii” CSS jest używana do ustawiania wysokości wierszy. Wykorzystaliśmy tę właściwość na wszystkich połączonych wierszach i na rzędu każdego stołu osobno. W tym samouczku omówiliśmy różne kody, a także wyniki tych kodów. Po dokładnym przeczytaniu tego samouczka ustawiasz wysokość wiersza tabeli w projektach.
