Odstępy komórek CSS

W tym artykule przejdziemy do wielu opcji stylistycznych, które dadzą komponenty tabeli, takie jak nagłówki tabeli i komórki danych tabeli niektóre odstępy. Najczęściej używanym atrybutem CSS w tych okolicznościach jest właściwość odstępów granicznych, która zostanie zbadana i wdrożona w tym samouczku za pomocą Notatnika ++ IDE. Aby zastosować to pojęcie w pliku HTML, zastosowano wiele opcji stylistycznych, takich jak CSS inline i metoda CSS styl.

Przykład 01: Korzystanie z podejścia CSS Style Tag w celu dodania odstępów do komórek tabeli w pliku HTML

W tym przykładzie będziemy rozstawić komórki tabeli za pomocą właściwości odstępów granicznych. W tym przykładzie metoda CSS w stylu zostanie wykorzystana do dodawania cech stylistycznych do komponentów tabeli. Notatnik ++ IDE zostanie użyty do edytowania pliku HTML.

W powyższym skrypcie zaczniemy od nagłówka pliku, w którym otworzymy znacznik stylu. W tym znaczniku podamy dwie właściwości stylizacji wszystkim elementom, uogólniając elementy i tworząc dla nich osobne klasy. Najpierw zdefiniujemy styl dla całej tabeli, w której zdefiniujemy właściwość odstępów granicznych, która następnie przypisuje określoną przestrzeń między zawartością komórki a jej granicą.

Następnie stworzymy kolejną klasę stylistyczną. W tej klasie podamy stylizację nagłówka tabeli, danych tabeli i samej tabeli, określając długość, formę i kolor granicy. Następnie zamkniemy styl i znacznik głowy i otworzymy znacznik ciała. W znaczniku ciała utworzymy tabelę z dwoma wierszami. W pierwszym rzędzie podamy tabelę trzech kolumn za pomocą znacznika „th”, który definiuje nagłówek tabeli. W drugim rzędzie wstawiamy zawartość w kolumnach tabeli za pomocą znacznika „TD”. Następnie zamkniemy znacznik tabeli i znacznik ciała. Zapisanie tego skryptu w „.Format HTML ”pozwoli nam otworzyć go w naszej przeglądarce i uzyskać następujące dane wyjściowe:

W powyższym wyniku widzimy, że różne komórki tabeli mają regularną odległość między nimi, która została określona w atrybucie odstępów granicznych wewnątrz znacznika stylu.

Przykład 02: Korzystanie z podejścia w stylu CSS w celu dodania odstępów do komórek tabeli w pliku HTML

W tym przykładzie użyjemy właściwości odstępów granicznych i niektórych styl. W tym przykładzie zostanie zastosowane podejście CSS w tym przykładzie, aby zastosować charakterystykę stylu do komponentów tabeli.

W powyższym skrypcie zaczniemy od treści pliku, w którym otworzymy znacznik stylu w każdym elemencie indywidualnie. Najpierw otworzymy znacznik tabeli i przypisamy CSS za pomocą słowa kluczowego stylu. Przypisamy tabelę z granicą szerokości „1px”, formy solidnej i czarnego koloru wraz z właściwością odstępów granicznych. Następnie otworzymy nasz pierwszy wiersz tabeli, w którym zdefiniujemy nazwy kolumn za pomocą znacznika „Th”, w którym użyjemy również inline CSS, aby nadać elementowi właściwości stylizacji. Następnie dodamy kolejny wiersz, w którym zdefiniujemy dane tabeli za pomocą znacznika „TD” i użyjemy wbudowanego CSS, aby dać dane również granicę. Następnie zamkniemy stół i znacznik ciała. Zapiszemy ten plik i otworzymy go w naszej przeglądarce, aby uzyskać wynik tego skryptu na stronie naszej przeglądarki.

W powyższym fragmencie możemy zauważyć, że oba rzędy tabeli mają między nimi pewne przestrzenie, które zostały zdefiniowane w znacznikach za pomocą wbudowanego CSS.

Przykład 03: Korzystanie z techniki CSS odstępów dwukierunkowego dla tabeli w pliku HTML

W tym przykładzie użyjemy atrybutu podwójnego wymiaru odstępów granicznych, aby nadać komórkom tabeli pewne odstępy. W tym przykładzie technika CSS stylowa zostanie zastosowana do zastosowania cech stylistycznych do komponentów tabeli.

W poniższym skrypcie zaczniemy od nagłówka pliku, w którym otworzymy tag stylu. Uogólniając komponenty i ustanawiając odrębne klasy dla każdej. Najpierw utworzymy styl dla całej tabeli, w tym właściwość odstępów granicznych, która przypisuje określoną odległość między zawartością komórki a jej granicą w dwóch wymiarach niezależnie.

Następnie, w innej klasie stylu, zastosujemy stylizację do nagłówka tabeli, danych tabeli i samej tabeli, ustawiając długość, formę i kolor obramowania. Styl i znaczniki zostaną następnie zamknięte podczas otwarcia znacznika ciała. Zrobimy stół z dwoma rzędami w znaczniku ciała. Znacznik „th” zostanie użyty w pierwszym rzędzie do określenia nagłówka tabeli. A znacznik „TD” zostanie użyty w drugim rzędzie do wstawienia danych do kolumn tabeli. Następnie zamkniemy tabelę i znaczniki ciała zapisujące ten skrypt w „.Format HTML ”, abyśmy mogli go uruchomić w naszej przeglądarce i uzyskać następujące wyniki:

W powyższym wyjściu widzimy, że poszczególne komórki tabeli mają dwie różne luki w poziomie i pionowo między nimi, które zostały zdefiniowane w właściwości odstępów granicznych wewnątrz znacznika stylu.

Przykład 04: Za pomocą alternatywnej metody do przypisywania przestrzeni między elementami tabeli

W tym przykładzie wykorzystamy alternatywę właściwości odstępów granicznych, aby zapewnić pewne styl komponentów tabeli, takich jak dane nagłówka tabeli i tabeli. W tym przykładzie zastosowano podejście CSS styl.

W poniższym skrypcie zaczniemy od nagłówka pliku i otworzymy znacznik stylu, podsumowując komponenty i przypisując jedną klasę do każdej części. Najpierw zaprojektujemy styl dla całego stołu, w tym funkcję upadku granicznego, która zawaliwa granicę każdego elementu, aby dodać przestrzeń między nimi. Nagłówek tabeli, dane tabeli i sama tabela zostaną następnie stylizowane przez dostosowanie długości, kształtu i koloru granicy. Znacznik ciała zostanie następnie otwarty, ale styl i znaczniki zostaną zamknięte.

W znaczniku ciała utworzymy tabelę z dwoma wierszami. Znacznik „th”, który określa nagłówek tabeli, zostanie użyty w pierwszym rzędzie, aby nadać tabeli trzy kolumny. Znacznik „TD” zostanie użyty w drugim rzędzie do umieszczania informacji w kolumnach tabeli. Następnie zamkniemy stół i tagi nadwozia. Będziemy przechowywać ten skrypt w „.Format HTML ”, abyśmy mogli uzyskać do niego dostęp do naszej przeglądarki i odbierać następujące dane wyjściowe:

W powyższej mocy widoczne jest, aby elementy tabeli mają jedną obramowanie z pewną przestrzenią z powodu właściwości załamania granicy.

Wniosek:

W tym artykule omówiliśmy kilka właściwości stylizacji, które pomogły nam w podaniu komórek stołowych odstępów. Właściwość odstępów granicznych jest najczęściej używaną właściwością w tym scenariuszu, który został omówiony i zaimplementowany w tym artykule za pomocą Notatnika ++ IDE. Dodaliśmy trzy unikalne przykłady wraz z ich wyjaśnieniem dla każdego kroku dla łatwości naszych użytkowników.