W naszym życiu codziennym mówimy, że wysokość jest pomiarem czegoś od dołu do góry lub od głowy do stopy. Mamy właściwość „wysokości” w CSS, która daje nam możliwość ustawienia wysokości tabeli zgodnie z naszym wyborem. Możemy ustawić go w pikselach lub wartościach procentowych. Kiedy ustawiamy dowolną wartość w tej właściwości „wysokości”, nasza tabela jest dostosowywana w danej wysokości. W tym przewodniku użyjemy tej właściwości do ustawiania wysokości tabeli i poinformujemy, jak ustawi wysokość tabeli. Ustawiamy wysokość tabeli tutaj w różnych przykładach.
Przykład 1
Musimy najpierw zaprojektować tabelę w pliku HTML, aby ustawić wysokość tabeli. Kod Visual Studio służy do tworzenia tego pliku HTML. Możesz użyć dowolnego oprogramowania do wykonania tych kodów. Używamy tego oprogramowania do wykonywania przykładów w tym przewodniku. Podczas tworzenia nowego pliku w kodzie Visual Studio musimy wybrać język lub domyślnie go rozpozna. Gdy wybieramy HTML jako język, rozszerzenie pliku jest generowane automatycznie, gdy zapisujemy plik pod dowolną nazwą.
Po wybraniu HTML jako języka po prostu wpisujemy „!”W tym pliku i naciśnij„ Enter ”,. Podstawowe znaczniki kodu „HTML” są tworzone automatycznie. Po prostu umieść część ciała w ciele HTML. Link pliku CSS jest umieszczany przed ciałem w znaczniku „głowicy”. Tworzymy tabelę, najpierw generując nagłówek, a następnie używając „
”Tag. W tabeli jest pięć kolumn i sześć rzędów. Pierwszy rząd to wiersz nagłówka tabeli i używamy „TH”, aby dodać dane do wiersza nagłówka tabeli.
Używamy również znacznika „TD” do wstawienia danych do komórek tabeli z „TR” reprezentującym wiersze tabeli. Następnie przejdziemy do pliku CSS, który zostanie użyty do ustawienia wysokości tej tabeli.
Stylizuj nagłówek, wspominając „H1” i użyj właściwości CSS tutaj. Ustawiamy „kolor” na „czerwony”. „Rodzina czcionki” tego nagłówka to „Times New Roman”. Następnie stygnij całą tabelę, stosując „granicę” „2px” i ustaw jej typ na „Solid”. Kolor granicy to „szary”.
Następnie mamy „szerokość” stołu. Używamy „250px” do szerokości. Tutaj ustawymy „wysokość” stołu. Do ustawienia wysokości tabeli używamy właściwości „wysokości” CSS. Kiedy ustawimy wartość tutaj w tej właściwości „wysokości”, ustawi wysokość tabeli. Ustawiamy „wysokość” tej tabeli na „150px”. Tak więc, kiedy ta tabela pozostanie na ekranie, będzie miał wysokość „150px”.
Następnie ustawiamy granicę na pojedynczą granicę dla wszystkich komórek i granic tabeli za pomocą właściwości „kołysanie granicy” i ustanawianie tej właściwości do „zawalenia się”. Stosujemy również granicę na komórki i kierujący rzędem. Używamy również właściwości „granicy” z „th” i „td” i ustawiamy tę samą granicę, którą wyznaczyliśmy dla tabeli. Granica jest w „szarym” typu „solidnym” i „2px” w szerokości.
Tabela podana poniżej znajduje się na wysokości „150px”. Zarządza swoją zawartością na tej wysokości, o której wspomnialiśmy w kodzie CSS. Po ustawieniu wysokości stołu zostanie ona utworzona na tej samej wysokości.
Przykład nr 2
Tabela, której tu używamy, jest taka sama, jak stworzyliśmy w poprzednim przykładzie. Ale tutaj zmienimy wysokość tabeli za pomocą właściwości wysokości. Ustawiamy „niebieski” dla „nagłówka”, który pojawia się przed tabelą u góry strony. Następnie ustaw „rodzinę czcionki” na „Kalibri”, a jego waga jest „odważniejsza”. Następnie stosujemy pewne właściwości do całego stolika. Ustaw granicę za pomocą „granicy” „2px” i w formie „solidnej” i w kolorze „pomarańczowym”. Szerokość tej tabeli to „300px”. Tym razem i zwiększamy wysokość stołu tutaj do „250px”. W tym przykładzie „załamanie graniczne” znów jest „upadek”. Ustawienie „th” i „td”, stosując tę samą granicę co stół i „kolor” „czerwony”, ustawia kolor tekstu zapisany w komórkach i kierując komórkami „czerwony”. „Rodzina czcionki” dla tego tekstu jest „arial”.
Na tym wyjściu wysokość tabeli jest zwiększona z poprzedniej tabeli, którą utworzyliśmy w przykładzie 1, ponieważ zmieniamy wysokość tutaj w kodzie CSS. Następnie zwiększyliśmy wysokość stołu.
Przykład nr 3
Ponownie używamy tej samej tabeli, co ten, którego użyliśmy w pierwszym przykładzie. Ale zmienimy wartość właściwości wysokości, aby dostosować wysokość tabeli. „Kierowanie się”, które wyświetla się przed stołem u góry, jest ustawione na „fioletowe”. Następnie zmień „rodzinę czcionki” na „Algierskie”. Następnie stosujemy niektóre atrybuty do całej tabeli i ustanawiamy granicę. Po pierwsze, z „granicą” „2px” i w formie „solidnej”, a także w kolorze „zielonym”. Tym razem szerokość stołu to „auto”, podczas gdy wysokość stołu wynosi „100px."
W takim przypadku „kołysanie graniczne” jest ustawione z „zawaleniem się”. „TH” i „TD” są ustawione na tę samą granicę co stół. Kolor tekstu zapisany w komórkach i komórkach kierujących jest ustawiony na „fioletowy”. „Font-family” tego tekstu to „Cambria”.
Podany zrzut ekranu jest wyjściem tego kodu. Tutaj widać, że tabela automatycznie dostosowuje swoją szerokość, a wysokość tej tabeli wynosi „100px”.
Przykład nr 4
Ustawiamy tę samą tabelę przy użyciu różnych wartości właściwości. „Kolor” nagłówka jest „pomarańczowy”, a jego „rodzinna czcionka” to „Algierskie”. W tym przypadku kolor graniczny całego stołu jest „fioletowy”. „Szerokość” całej tabeli jest ponownie „auto”, ale „wysokość” tabeli to „400px”. Granica wszystkich komórek jest „fioletowa”, a tekst „kolor” jest „czerwony”. „Rodzina czcionki” tekstu to „Sans-Serif”.
Tutaj, na zrzucie ekranu, możesz zauważyć wysokość stołu. Tabela jest podobna do powyższej ilustracji. Ale na poniższej ilustracji wysokość tabeli jest zmieniana.
Przykład nr 5
W tym kodzie ustawiamy nagłówek do „zielonego” koloru „algierskiej” „rodziny czcionki”. Następnie właściwości tabeli są takie same, które omówiliśmy w poprzednim przykładzie. Tutaj ustawiamy wysokość tabeli za pomocą procentowego zamiast piksela. Zamierzamy dostosować wysokość stołu do „50%”. Teraz sprawdzimy wyjście, jak wygląda tabela, gdy ustawimy jej wysokość na procent.
Tutaj wysokość stołu wynosi „50%”, a jego szerokość to auto. Możemy ustawić dowolną wartość w tej właściwości „wysokości” tabeli. Możemy ustawić wysokość tabeli odpowiadającej naszemu wyborowi.
Wniosek:
Ten przewodnik miał pokazać, jaka jest wysokość stołu, jak ustawić wysokość stołu w CSS i która właściwość CSS jest używana do ustawiania wysokości stołu. Jak omówiliśmy, wysokość jest pomiarem stołu od góry do dołu. Przeszliśmy tutaj kilka kodów, a także włączyliśmy dane wyjściowe. Po dokładnym przestudiowaniu tego przewodnika, będziesz mógł ustawić wysokość stołu w CSS w przyszłości.
