Wyściółka komórkowa jest zdefiniowana jako przestrzeń pośrodku danych komórki i granicy. Kiedy umieścimy dane w komórkach tabeli, musimy stworzyć przestrzeń między granicą komórki a jej danymi. To odstępy są znane jako wyściółka komórkowa w CSS. Możemy ustawić lewą wyściółkę, prawą wyściółkę, górną wyściółkę i dolną wyściółkę osobno, a także połączoną wyściółkę dla wszystkich stron. Jeśli nie ustawym tej wyściółki komórek w naszych komórkach tabeli, zostanie ono ustawione domyślnie zgodnie z danymi komórek. Mamy różne właściwości w CSS do ustawiania tej wyściółki komórkowej.
Korzystając z właściwości „wyściółki”, dostosowuje wyściółkę po wszystkich czterech stronach wewnątrz komórki. Ale jeśli chcemy ustawić wyściółkę tylko z jednej strony, mamy również właściwości do ustawienia. W tym przewodniku zbadamy właściwość wyściółki komórkowej w CSS i wykonamy przykłady tutaj, w których użyjemy tych właściwości.
Właściwości wyściółki komórkowej w CSS:
Wyściółka: wartość.
Padding-Left: Wartość.
PRAWADY: Wartość.
Wyściółka: wartość.
Wyściółka: wartość.
Przykład 1:
Ponieważ musimy zastosować właściwości wyściółki komórkowej na naszych komórkach stołowych, dlatego musimy skonstruować tabelę. Najpierw użyjemy tych właściwości. Możemy utworzyć tabelę w HTML, dodając niektóre znaczniki używane do konstruowania tabeli. Tutaj skonstruujemy tabelę w HTML, otwierając plik. Po dodaniu podstawowych znaczników HTML, zaczynamy konstruować tabelę w treści kodu HTML. Umieściliśmy „
”Tag. W tym znaczniku utworzymy wiersz nagłówka za pomocą „tr”, a następnie znacznika „th”. W znaczniku „th” dodajemy tutaj kilka danych. Następnie ponownie używamy „TR” dla każdego rzędu.
Następnie używamy tagu „TD” w tym znaczniku „TR”. I dodaj dane w tym „TD”, aby dodał dane do wierszy tabeli. Po ukończeniu tego kodu musimy go zapisać za pomocą „.rozszerzenie pliku HTML ”i musimy połączyć ten plik z plik CSS w„ głowicy ”tego pliku HTML. Użyjemy tej tabeli we wszystkich przykładach w tym przewodniku, ale zastosujemy różne właściwości wyściółki komórkowej w każdym przykładzie. Teraz, po zapisaniu tego, przejdziemy do pliku CSS, w którym będziemy używać właściwości CSS. Tak więc wszystkie te właściwości będą miały zastosowanie tutaj w tej tabeli.
Stworzyliśmy jeden nagłówek w HTML. Więc tutaj nie będziemy go stylizować, używając właściwości „kolor”. Ustawiliśmy kolor czcionki na „bordowy”. Następnie ustawiamy również „rodzinę czcionki” i używamy „algierskiego” jako wartości tej właściwości. Następnie zastosuj granicę „2px” na całej tabeli. Typ jest ustawiony tutaj na „solidny”, a kolor „granicy” to „bordowy”.
Następnie ustawiona jest „szerokość” tabeli. Umieszczamy tutaj „Auto”, aby szerokość automatycznie dostosowała się zgodnie z danymi. Po tym jest nieruchomość „kołysanie graniczne”, która jest „upadkiem”. Tak więc granica stołu zostanie zawalona. Teraz musimy stworzyć granicę dla każdej komórki. W tym celu ponownie wykorzystujemy własność „graniczną” dla „th” i „td”. Dane zapisane w tych komórkach są ustawione na „czarny” kolor w właściwości „kolorów”.
Teraz ustawiamy wyściółkę komórkową za pomocą właściwości „wyściółki” w CSS i ustawiamy tutaj wyściółkę „15px”. Utworzy przestrzeń 15px między komórką a danymi z górnej, lewej, dolnej i prawej strony. Jeśli chcemy zastosować tę samą wyściółkę po wszystkich czterech stronach, używamy tej właściwości „wyściółki”. Ta jedna nieruchomość stosuje wyściółkę ze wszystkich stron.
W tym wyjściu zauważ, że między tekstem jest przestrzeń zapisana w komórce a granicą tej komórki. Przestrzeń ze wszystkich czterech stron jest równa. To jest wyściółka komórkowa w CSS, a ta właściwość „wyściółka” ustawia równą wyściółkę ze wszystkich stron.
Przykład nr 2:
Tutaj kod jest taki sam, jak omówiliśmy w pierwszym przykładzie. Po prostu zmieniamy „kolor” nagłówka i kolor „granicy” komórki na „zielony”. Kiedy użyjemy tej właściwości „wyściółki”, dostosuje ona wyściółkę komórkową tylko po lewej stronie. Ustawiamy wartość „wyściółka-lewą” na „60px”. Utworzy przestrzeń 60px po lewej stronie danych komórki i granicy komórki.
W tym wyjściu istnieje przestrzeń po lewej stronie między danymi a granicą wszystkich komórek. Dzieje się tak, ponieważ używamy tutaj właściwości „wyściółki”. Więc tworzy pożądaną przestrzeń tylko po lewej stronie i nie stosuje tej wyściółki po pozostałych trzech stronach.
Przykład nr 3:
W tym przykładzie po prostu zmieniamy „kolor” nagłówka, kolor „granicy” komórki i stół na „pomarańczowy”. Kiedy używamy właściwości „prawej wyściółki”, wpływa ona tylko na wyściółkę komórek po prawej stronie. Zrobi przestrzeń między danymi obecnymi wewnątrz komórki a prawą krawędzią komórki. Wartość „prawej wyściółki” jest ustawiona na „50px.„Zostanie luka 50px między danymi komórki a granicą komórki po prawej stronie.
Widać, że istnieje przestrzeń tylko po prawej stronie między danymi a granicą wszystkich komórek. Wynika to z użycia „prawej wyściółki”. W rezultacie po prostu tworzy potrzebną wyściółkę po prawej stronie i ignoruje pozostałe trzy strony.
Przykład nr 4:
Tutaj po prostu zmieniamy „kolor” nagłówka, „granicę” komórek i granicę stołu na „niebieski”. W tej chwili wykorzystujemy nieruchomość CSS „wyściółka”. Właściwość „wyściółka” wpływa tylko na wyściółkę komórek na górze, gdy jest używana. W tym przypadku „wyściółka” jest ustawiona na „55px”. Na górze pojawi się luka 55px między danymi komórki a granicą komórki.
Tutaj, na górnej stronie każdej komórki znajduje się przestrzeń między danymi a granicą komórki. Wynika to z użycia właściwości „wyściółki”. W rezultacie dodaje to tylko niezbędne wyściółki do górnej strony.
Przykład nr 5:
Teraz zmieniamy „kolor” nagłówka, „granica” komórek i stół na „fioletowy”. Korzystamy z właściwości CSS, „wyściółki”. Po zastosowaniu atrybutu „wyściółki”, ustawia tylko wyściółkę komórek na dole. Spowoduje to, że wyściełanie komórki między danymi wewnątrz komórki a dolną granicą komórki. W tym scenariuszu „dna wyściółki” jest ustawiony na „53px”.
Tutaj możesz obserwować przestrzeń między danymi wewnątrz komórki a dolną granicą komórki. Gdy używamy właściwości „wyściółka”, dodaje ona wyściółkę komórkową tylko na dnie komórki.
Wniosek:
Ten przewodnik szczegółowo wyjaśnił koncepcję wyściółki komórkowej w CSS. Omówiliśmy tutaj różne właściwości wyściółki i wykorzystaliśmy te właściwości w różnych kodach CSS. Ustaliliśmy, że w CSS dostosowujemy wyściółkę komórkową po wszystkich stronach komórki za pomocą właściwości „wyściółki” i nakładania wyściółki z jednej strony tylko przy użyciu różnych właściwości wyściółki. Przyjrzeliśmy się różnorodnym kodom, w których zastosowaliśmy te właściwości, a także wpływ tych właściwości na komórkę tabeli. Ustawiasz wyściółkę komórkową po dokładnym przeczytaniu tego przewodnika.
