Przyjrzeliśmy się wielu metodom stylizacji elementów strony, takich jak informacje tekstowe, linki, obrazy, nagłówki, ale to wszystko jeszcze nie wystarczy. W moich artykułach często wykorzystuję elementy HTML takie jak tabele, bo w większości przypadków tak właśnie jest pomagają uporządkować ważne informacje i uprościć ich prezentację.
W tym artykule przedstawię Ci zawiłości stylizowania tabel HTML i poznasz nowe właściwości CSS zaprojektowane, aby osiągnąć te cele.
Hipertekstowy język znaczników HTML zapewnił nam dużą liczbę możliwości powiązania stylów CSS z dziesięcioma unikalnymi znacznikami przeznaczonymi do pracy z tabelami. Sugeruję powtórzenie ich przed dalszymi studiami:
Etykietka
Opis
Określa zawartość tabeli.
Określa nazwę tabeli.
Definiuje komórkę nagłówka tabeli.
Definiuje wiersz tabeli.
Definiuje komórkę danych tabeli.
Służy do przechowywania nagłówka grupy w tabeli (nagłówek tabeli).
Używany do przechowywania „treści” tabeli.
Używany do przechowywania „stopki” tabeli.
Definiuje określone właściwości kolumny dla każdej kolumny w znaczniku
.
Definiuje grupę kolumn w tabeli.
Praca z wcięciami tabeli
Używanie dopełnienia w tabeli
Wcięcie tabeli
1
2
3
4
2
3
4
W tym przykładzie:
Stół umieściliśmy na środku stosując technikę centrowania poziomego z wcięciami zewnętrznymi (margines: 0 auto).
Dla nazwy tabeli (tag
) ustawiamy dolne wypełnienie na 19 pikseli. Mam nadzieję, że nieparzyste liczby Ci nie przeszkadzają :)
Wynik naszego przykładu:
Przestrzeń między komórkami
Po omówionym powyżej przykładzie być może zauważyłeś, że pomiędzy wszystkimi komórkami tabeli nadal mamy przerwę. Przyjrzyjmy się, jak usunąć odstęp między komórkami tabeli lub go zwiększyć.
Aby ustawić odległość pomiędzy granicami sąsiednich komórek, należy skorzystać z właściwości CSS border-spacing.
Zmiana odstępów między tabelami
odstępy graniczne: 30px 10px;
1
2
3
2
3
odstępy graniczne: 0;
1
2
3
2
3
odstępy graniczne: 0,2 em;
1
2
3
2
3
W tym przykładzie:
pływak: w lewo). Jeśli przegapiłeś temat elementów pływających, zawsze możesz do niego wrócić w tym samouczku - „”.
Dodatkowo ustawiamy prawy margines dla tabel na 30px oraz ustawiamy wyrównanie tabel w pionie (góra elementu jest zrównana z górą najwyższego elementu). Do szczegółowego omówienia tej właściwości powrócimy w tym artykule.
) – odważny styl.
W przypadku komórek tabeli (nagłówka i komórek danych) ustawiamy ciągłą ramkę o wielkości 1 piksela z kolorem szesnastkowym #F50 i ustawiamy dopełnienie o wielkości 19 pikseli ze wszystkich stron.
Do pierwszego stolika z klasą .Pierwszy ustawiamy odstęp między komórkami tabeli (właściwość border-spacing) na 30px 10px dla drugiej tabeli z klasą .drugi równy zero, dla trzecich tabel z klasą .trzeci równy 0,2em.
Należy pamiętać, że jeśli we właściwości border-spacing zostanie określona tylko jedna wartość długości, to wskazuje ona odstępy zarówno w poziomie, jak i w pionie, a jeśli zostaną określone dwie wartości długości, to pierwsza określa odległość w poziomie, a druga w pionie . Odległość pomiędzy granicami sąsiednich komórek można określić w jednostkach CSS (px, cm, em itp.). Wartości ujemne są niedozwolone.
Wynik naszego przykładu:
Pokaż obramowania wokół komórek tabeli
Możesz powiedzieć: - więc usunęliśmy odstęp między komórkami, używając właściwości border-spacing o wartości 0, ale dlaczego teraz granice naszych komórek przecinają się?
Podwójne obramowanie spowodowane jest tym, że dolna granica jednej komórki jest dodawana do górnej granicy komórki znajdującej się pod nią, podobna sytuacja ma miejsce po bokach komórek i jest to logiczne z punktu widzenia wyświetlania tabeli, ale na szczęście istnieje sposób, aby powiedzieć przeglądarce, że nie chcemy widzieć tak luźnego zachowania granic komórek.
Aby to zrobić, musisz użyć właściwości CSS border-collapse. Co dziwne, użycie właściwości border-collapse z wartością zwijania jest najlepszym sposobem na usunięcie odstępu między komórkami bez tworzenia podwójnych obramowań między nimi.
Porównajmy zachowanie obramowań przy użyciu właściwości border-spacing o wartości 0 i właściwości border-collapse o wartości zwijania:
Przykład wyświetlania obramowań wokół komórek tabeli
odstępy graniczne: 0;
1
2
3
2
3
border-collapse: załamanie;
1
2
3
2
3
W tym przykładzie:
Sprawiliśmy, że nasze tabele były pływające i przesunęliśmy je w lewo (float: left), ustawiliśmy ich zewnętrzny margines po prawej stronie na 30px.
Ustaw nazwę tabeli (tag
) – odważny styl.
Dla komórek tabeli (nagłówka i komórek danych) ustawiamy stałą ramkę o wielkości 5 pikseli z kolorem szesnastkowym #F50 i ustawiamy stałą szerokość 50 pikseli i wysokość 75 pikseli.
Do pierwszego stolika z klasą .Pierwszy odstępy pomiędzy komórkami tabeli ustawiamy na zero (border-spacing : 0 ;), a dla drugiej tabeli z klasą .drugi ustaw właściwość border-collapse na zwijanie, która zwija krawędzie komórek w jedną, jeśli to możliwe.
Wynik naszego przykładu:
Zachowanie pustych komórek
Możesz użyć CSS, aby określić, czy obramowania i tła pustych komórek w tabeli powinny być wyświetlane, czy nie. Zachowaniem tym steruje właściwość pustych komórek, która domyślnie, jak być może zauważyłeś z poprzednich przykładów, wyświetla puste komórki.
Przejdźmy do przykładu:
Przykład wyświetlania pustych komórek tabeli
puste komórki: pokaż;
1
2
3
2
☺
3
☺
puste komórki: ukryj;
1
2
3
2
☺
3
☺
Zrozumienie działania właściwości pustych komórek na tym przykładzie jest bardzo proste, jeśli jest ustawiona na ukrycie, to puste komórki i znajdujące się w nich tło zostaną ukryte, jeśli ustawiono na wyświetlanie (domyślnie), wówczas zostaną wyświetlone.
Lokalizacja nagłówka tabeli
Przyjrzyjmy się innej prostej właściwości stylizacji tabel - caption-side , która określa położenie nagłówka tabeli (nad lub pod tabelą). Domyślnie właściwość caption-side jest ustawiona na top , co powoduje umieszczenie podpisu nad tabelą. Aby umieścić tytuł pod tabelą należy skorzystać z właściwości o wartości dolnej .
Spójrzmy na przykład użycia tej właściwości:
Przykład użycia właściwości caption-side
Nagłówek nad tabelą
Nazwa
Cena
Ryba
350 rubli
Mięso
250 rubli
Nagłówek pod tabelą
Nazwa
Cena
Ryba
350 rubli
Mięso
250 rubli
W tym przykładzie, który stworzyliśmy dwie klasy, które kontrolują położenie nagłówka tabeli. Pierwsza klasa ( .topCaption) umieszcza nad nią tytuł tabeli, zastosowaliśmy go do pierwszej tabeli, a drugiej klasy ( .bottomCaption) umieszcza tytuł tabeli poniżej, my zastosowaliśmy go do drugiej tabeli. Klasa .topCaption ma domyślną wartość właściwości po stronie podpisu i jest tworzony w celach demonstracyjnych.
Wynik naszego przykładu:
Wyrównanie poziome i pionowe
W większości przypadków podczas pracy z tabelami konieczne będzie dostosowanie wyrównania treści w nagłówku i komórkach danych. Właściwość text-align służy do wyrównywania w poziomie, podobnie jak w przypadku wszelkich informacji tekstowych. Omówiliśmy użycie tej właściwości dla tekstu wcześniej w artykule „”.
Aby ustawić wyrównanie zawartości komórek, należy użyć specjalnych słów kluczowych z właściwością text-align. Przyjrzyjmy się użyciu słów kluczowych dla tej właściwości w poniższym przykładzie.
Przykład poziomego wyrównania w tabeli
Oznaczający
Opis
lewy
Wyrównuje tekst komórki do lewej. Jest to wartość domyślna (jeśli kierunek tekstu jest od lewej do prawej).
Prawidłowy
Wyrównuje tekst komórki do prawej. Jest to wartość domyślna (jeśli kierunek tekstu jest od prawej do lewej).
Centrum
Wyrównuje tekst komórki do środka.
uzasadniać
Rozciąga linie tak, aby każda linia miała tę samą szerokość (rozciąga tekst komórki dopasowując się do jej szerokości).
W tym przykładzie, który stworzyliśmy cztery klasy, które określają różne poziome wyrównania w komórkach i stosują je w kolejności wierszy tabeli. Wartość w komórce odpowiada wartości właściwości text-align
Wynik naszego przykładu:
Oprócz wyrównania w poziomie można także zdefiniować wyrównanie w pionie w komórkach tabeli za pomocą właściwości Vertical-align.
Należy pamiętać, że podczas pracy z komórkami tabeli stosowane są tylko następujące wartości * tej właściwości:
*
- Sub, super, tekst na górze, tekst na dole, wartości długości i % zastosowane do komórki tabeli będą się zachowywać tak, jakby korzystały z wartości bazowej.
Spójrzmy na przykład użycia:
Przykład wyrównania w pionie w tabeli
Oznaczający
Opis
linia bazowa
Wyrównuje linię bazową komórki z linią bazową elementu nadrzędnego. Jest to wartość domyślna.
szczyt
Wyrównuje zawartość komórki pionowo do górnej krawędzi.
środek
Wyrównuje zawartość komórki pionowo do środka.
spód
Wyrównuje zawartość komórki pionowo wzdłuż dolnej krawędzi.
W tym przykładzie, który stworzyliśmy cztery klasy, które określają różne wyrównania w pionie w komórkach i stosują je w kolejności wierszy tabeli. Wartość w komórce odpowiada wartości właściwości Vertical-align zastosowanej do tego wiersza.
Algorytm umieszczania układu tabeli w przeglądarce
CSS domyślnie używa algorytmu przeglądarki do automatycznego układania układu tabeli. W tym przypadku szerokość kolumny jest ustawiana przez najszerszą, nierozdzielającą zawartość komórki. Algorytm ten może w niektórych przypadkach działać wolno, ponieważ przeglądarka musi przeczytać całą zawartość tabeli przed określeniem jej ostatecznego układu.
Aby zmienić typ układu tabeli przeglądarki za pomocą automatyczny NA naprawił, musisz użyć właściwości CSS table-layout z wartością stałą .
W tym przypadku zależy tylko od umieszczenia w poziomie od szerokości tabeli i szerokości kolumn, a nie od zawartości komórek. Przeglądarka rozpoczyna wyświetlanie tabeli natychmiast po odebraniu pierwszego wiersza. Dzięki temu ustalony algorytm pozwala na szybsze utworzenie układu takiej tabeli niż przy użyciu opcji automatycznej. Podczas pracy z dużymi tabelami możesz użyć stałego algorytmu, aby poprawić wydajność.
Przyjrzyjmy się zastosowaniu tej właściwości na następującym przykładzie:
Przykład użycia właściwości table-layout
układ tabeli: automatyczny;
Nazwa
2009
2010
2011
2012
2013
2014
2015
2016
Pszenica
125
215
2540
33287
695878
1222222
125840000
125
układ tabeli: stały;
Nazwa
2009
2010
2011
2012
2013
2014
2015
2016
Pszenica
125
215
2540
33287
695878
1222222
125840000
125
W tym przykładzie:
Stylizacja wierszy i kolumn tabeli
Częściowo omówiliśmy już metody stylizacji wierszy i kolumn tabeli w artykule „”. W tym artykule przyjrzeliśmy się wykorzystaniu pseudoklasy grupowej, która pozwala na zmianę stylów wierszy w tabelach za pomocą wartości nawet (uczciwy) I dziwne (dziwne) lub w szkole podstawowej wzór matematyczny.
Przyjrzyjmy się technikom, które omówiliśmy wcześniej i odkryjmy nowe sposoby stylizowania wierszy i kolumn w tabelach. Przejdźmy do przykładów.
Przykład użycia pseudoklasy:n-dziecko z tabelami
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
W tym przykładzie:
Wynik naszego przykładu:
Przejdźmy do kolejnego przykładu, w którym przyjrzymy się opcjom stylizacji wierszy tabeli.
Przykład stylizacji wierszy w tabelach
Praca
Cena
Suma
15 000
1
1 000
2
2 000
3
3 000
4
4 000
5
5 000
W tym przykładzie:
Ustawiamy szerokość tabeli na 100% szerokości elementu nadrzędnego i ustawiamy pełne obramowanie o szerokości 1 piksela dla nagłówka i komórek danych.
Zestaw dla elementu („stopka” tabeli) kolor tła – koral, dla elementu („nagłówek tabeli”) ustaw kolor tła srebro.
Dla elementów
, które znajdują się wewnątrz elementu
(treść tabeli) ustaw kolor tła tak, aby zmieniał się po najechaniu myszką (pseudoklasa :hover) c biały na kolor khaki(cała linia jest podświetlona).
Wynik naszego przykładu:
Ryż. 153 Przykład stylizacji wierszy w tabelach
Poniższy przykład dotyczy zastosowania zaokrąglania narożników do komórek tabeli (właściwość).
Przykład zaokrąglania narożników komórek
1
2
3
4
5
W tym przykładzie:
Wyśrodkowaliśmy tabelę z marginesami zewnętrznymi, ustawiliśmy szerokość i wysokość komórek nagłówka na 50 pikseli i określiliśmy przezroczysty obramowanie 5 pikseli.
Ustaliliśmy, że po najechaniu (pseudoklasa :hover) na komórkę nagłówkową otrzymuje ona tło niebieski zabarwienie, Pomarańczowy kolor tekstu, obramowanie Pomarańczowy kolory 5 pikseli i promień zaokrąglenia 100%.
przezroczysta ramka jest konieczne, aby zarezerwować miejsce na ramkę, która wyświetli się po najechaniu myszką; jeśli tego nie zrobisz, tabela „przeskoczy”.
Wynik naszego przykładu:
Poniższy przykład dotyczy użycia elementów HTML
I
i ich stylizacja.
Przykład podświetlania kolumn tabeli
Nr wniosku
Praca
cena, pocierać.
Całkowity
1
Śpiewanie
6 000
6 000
2
zmywanie
2 000
2 000
3
Czyszczenie
1 000
1 000
4
Dokuczliwy
1 500
1 500
5
Czytanie
3 000
3 000
W tym przykładzie:
Wynik naszego przykładu:
Cóż, ostatni przykład, który jest dość trudny do zrozumienia i wymaga zaawansowanej znajomości CSS, ponieważ dotyka przyszłych tematów planowanych do szczegółowego przestudiowania w tym kursie.
W poprzednim przykładzie zdaliśmy sobie sprawę, że element HTML
Możesz zastosować tylko jedną właściwość CSS - kolor tła (kolor tła), ale nie możesz bezpośrednio ustawić koloru tła po najechaniu myszką (pseudoklasa :hover) na ten element. W tym przykładzie przyjrzymy się, jak podświetlić kolumnę tabeli, używając wyłącznie CSS.
Przykład podświetlania kolumn i wierszy tabeli po najechaniu kursorem
Nr wniosku
Praca
cena, pocierać.
Całkowity
1
Śpiewanie
6 000
6 000
2
zmywanie
2 000
2 000
3
Czyszczenie
1 000
1 000
4
Dokuczliwy
1 500
1 500
5
Czytanie
3 000
3 000
W tym przykładzie:
Ustawiliśmy naszą tabelę tak, aby zajmowała 100% elementu nadrzędnego, komórki tabeli zajmowały 25% elementu nadrzędnego i miały jednolitą zieloną ramkę o wielkości 1 piksela, wysokość nagłówka i komórek danych wynosi 45 pikseli. Usunęliśmy odstęp między komórkami, używając właściwości border-collapse z wartością
.
I tak korzystając z pseudoelementu ::after dodajemy treść po każdym elemencie
po najechaniu. Pseudoelement ::after wymagane jest użycie w połączeniu z właściwością content, dzięki czemu wstawimy element blokowy posiadający kolor tła zielony las i ma absolutne pozycjonowanie.
Pozycjonowanie bezwzględne jest tutaj konieczne, aby przesunąć element względem określonej krawędzi jego przodka, a przodek musi mieć inną wartość pozycji niż domyślna - static , w przeciwnym razie zliczanie będzie względne w stosunku do określonej krawędzi okna przeglądarki, w tym celu powód, dla którego nakryliśmy do stołu względne położenie(względny).
Dla wygenerowanego bloku ustawiamy właściwość top, która określa kierunek, w którym pozycjonowany element jest odsunięty od górnej krawędzi, oraz właściwość dolną, która określa kierunek, w którym pozycjonowany element jest odsunięty od dolnej krawędzi. Dla obu właściwości podano wartość 0, dzięki czemu blok całkowicie zajmie element od dołu i góry tabeli, szerokość tego bloku została ustawiona na 25%, wartość ta odpowiada szerokości samej komórki.
I ostatnia właściwość, którą ustawiamy dla tego bloku: z-index o wartości „-1” określa kolejność pozycjonowanych elementów według Oś Z. Ta właściwość jest konieczna, aby tekst znajdował się przed tym blokiem, a nie za nim; jeśli nie ustawisz wartości mniejszej niż zero, blok zakryje tekst.
Wynik naszego przykładu:
Jeśli na tym etapie swojego opracowania nie rozumiesz procesu pozycjonowania elementów, nie zniechęcaj się; jest to temat trudny do zrozumienia, którego również nie rozważaliśmy, ale na pewno rozważymy go w kolejnym artykule podręcznik „Pozycjonowanie elementów w CSS”.
Pytania i zadania na ten temat
Zanim przejdziesz do następnego tematu, wykonaj zadanie praktyczne:
Jeśli masz trudności z wykonaniem zadania ćwiczeniowego, zawsze możesz otworzyć przykład w osobnym oknie i sprawdzić stronę, aby dowiedzieć się, jaki kod CSS został użyty.
2016-2019 Denis Bolshakov, możesz przesyłać komentarze i sugestie na stronie na adres [email protected]
Wład Merzewicz
Przy dużej liczbie wierszy w tabeli porównywanie danych z różnych kolumn może być trudne. Wymaga to wizualnego oddzielenia jednego wiersza tabeli od drugiego za pomocą linii lub dodania koloru tła.
Najpierw spójrzmy na opcję użycia linii poziomych. Na ryc. 1 pokazuje jeden z możliwych sposobów skupienia uwagi na rzędach tabeli. Każda linia na górze i na dole jest otoczona linią, dzięki czemu wzrok zwiedzającego przesuwa się po nich i nie przeskakuje do następnej linii. W tym przypadku dane znajdujące się w kolumnach również są ze sobą powiązane, ale poprzez jednoczesne wyrównanie do lewej strony i pustą przestrzeń pomiędzy kolumnami.
Ustawianie linii pomiędzy liniami jest dość proste; w tym celu należy dodać właściwość stylu border-bottom do selektora TD. Jeśli wokół stołu znajduje się obramowanie, dolna ramka będzie dwukrotnie grubsza. W takim przypadku możesz usunąć dolną linię z ostatniego wiersza lub ukryć dolną granicę tabeli (przykład 1).
Przykład 1: Oddzielenie wierszy tabeli liniami
Tabela
2004
2005
2006
Rubiny
43
51
79
Szmaragdy
28
34
48
Szafiry
29
57
36
W tym przykładzie pionowe linie między komórkami nagłówka są dodawane przy użyciu właściwości border style, która jest używana dla selektora TH. Spowoduje to utworzenie jednopikselowej pustej przestrzeni pomiędzy krawędzią tabeli a obszarem nagłówka tła.
Zastosowanie koloru poszerza możliwości zmiany wyglądu stołu. Na przykład kolor tła wierszy parzystych i nieparzystych może być inny, jak pokazano na ryc. 2.
Aby zmienić kolor tła wymaganych wierszy wprowadzimy dodatkową klasę, nazwiemy ją parzystą i zaczniemy dodawać ją do parzystych wierszy tabeli, czyli do znacznika
. Należy pamiętać, że selektor TR może ustawić kolor tła tylko poprzez właściwość tła. Żadne linie ustawione dla selektora TR nie będą wyświetlane. Dlatego rysujemy dolną granicę komórki, stosując właściwość border-bottom do selektora TD (przykład 2).
Kolor tła wierszy nieparzystych określa się poprzez zmianę koloru całej tabeli. Ponieważ jednak dla wybranych wierszy ustawiony jest indywidualny kolor (dla którego dodany jest parametr class="even"), „nakłada się” on na kolor tła tabeli. Dzięki temu uzyskuje się naprzemienne kolorowe linie.
Przykład 2. Podświetlanie wierszy tabeli kolorem
Tabela
2004
2005
2006
Rubiny
43
51
79
Szmaragdy
28
34
48
Szafiry
29
57
36
Ametysty
23
64
97
W tym przykładzie podwójna linia na dole tabeli nie jest wynikiem zastosowania właściwości border-collapse z wartością zwijania do selektora TABLE. Ta opcja wykrywa pojawienie się podwójnych linii w miejscach styku komórek i zastępuje je pojedynczymi liniami. Należy pamiętać, że w różnych przeglądarkach mogą wystąpić różnice w kolorze pozostałych linii, jeżeli kolor obramowania wokół tabeli nie będzie odpowiadał kolorowi linii pod wierszami.
Stało się popularne, projektanci stron internetowych stosowali głównie metodę układu tabeli i uzyskali bardzo dobre wyniki.
Tagi użyte do zbudowania tabeli w formacie HTML
tabela- wymagany tag otwierający i zamykający tabelę podpis- opcjonalny tag wskazujący tytuł tabeli t- opcjonalny znacznik, którego znaczniki otwierający i zamykający zawierają nazwę kolumny. Zwykle pojawia się pogrubienie tr- wymagany tag otwierający i zamykający linię td- wymagany znacznik wskazujący otwarcie i zamknięcie komórki w rzędzie
Przykładowy kod prostej tabeli
Tabela HTML
Nazwa tabeli
Stobet 1
Stobet 2
Tekst w pierwszej komórce
Tekst w drugiej komórce
Wyświetli się przeglądarka
Cel tabel w HTML
Lekcja o stołach jest bardzo ważna! Dzięki tabelom możesz uporządkować nie tylko tekst, ale także obrazy, linki i wiele więcej. W tabeli możesz określić tło(lub jego kolor), wcięcie, szerokość, granica I inne parametry, co nada mu piękny wygląd. Tabela - Twój pierwszy krok do zrozumienia projektowanie stron! Wcześniej wiele witryn było w całości ułożonych w formie tabel, to znaczy wszystko, co zobaczył użytkownik (menu boczne, menu górne, treść) było zawartością komórek dużej tabeli. W tej notatce przejdźmy od razu do atrybutów, które czynią stół pięknym...
Właściwości i parametry tabel HTML: wcięcie, szerokość, kolor tła, obramowanie (ramka)
U etykieta tabeli ma następujące atrybuty:
szerokość- szerokość stołu. może być wyrażona w pikselach lub% szerokości ekranu. kolor- kolor tła komórek tabeli tło- wypełnia tło tabeli wzorem granica- ramka i obramowania w tabeli. Grubość jest wyrażana w pikselach wyściółka komórkowa- dopełnienie w pikselach pomiędzy zawartością komórki a jej wewnętrzną krawędzią Tak jak poprzednio, wartość atrybutu zapisujemy w cudzysłowie.
Przyjrzyjmy się zastosowaniu tych atrybutów na przykładzie. Aby to zrobić, utwórzmy tabelę (ale już bez niezwykle rzadko używanych podpisów i tagów) i ustaw parametr na atrybut granica, szerokość (szerokość tabeli, wiersza lub komórki) I bgcolor (kolor komórki)
Tabela HTML
Stobet 1
Stobet 2
W efekcie w przeglądarce wyświetli się poniższa tabela: rama- atrybut wskazujący ramkę wokół stołu. Istnieją następujące wartości:
Pustka - brak ramki, powyżej - tylko górna ramka, poniżej - tylko dolna ramka, hsides - tylko górna i dolna ramka, vsside - tylko lewa i prawa ramka, lhs - tylko lewa rama, rhs - tylko prawa rama, pudełko - wszystkie cztery części ramy.
zasady- atrybut wskazujący granice wewnątrz tabeli, pomiędzy komórkami. Istnieją następujące wartości:
Brak – nie ma granic pomiędzy komórkami, grupy - granice tylko pomiędzy grupami wierszy i grupami kolumn (omówimy to nieco później), wiersze - tylko granice pomiędzy wierszami, cols - granice tylko pomiędzy kolumnami, all - wyświetl wszystkie krawędzie.
Spójrzmy na przykładowy kod
Tabela HTML
Stobet 1
Stobet 2
Tekst w pierwszej komórce pierwszej kolumny
Tekst w drugiej komórce drugiej kolumny
Wynik
Teraz spróbujmy stworzyć piękny stół. Aby to zrobić, zacznijmy używać wyrównanie stołu. Aby to zrobić, istnieją następujące już znane parametry:
wyrównywać- ustawienie stołu. Można go umieścić po lewej stronie (lewo), po prawej (prawo), pośrodku (środek) odstępy między komórkami- odległość pomiędzy komórkami tabeli. Określone w pikselach (domyślnie 0 pikseli) wyściółka komórkowa- dopełnienie w pikselach pomiędzy zawartością komórki a jej wewnętrzną krawędzią (domyślnie 0 pikseli) Spójrzmy na przykład
Tabela HTML
Stobet 1
Stobet 2
Tekst w pierwszej komórce pierwszej kolumny
Tekst w drugiej komórce drugiej kolumny
Przeglądarka wyświetli wyśrodkowaną tabelę, która wygląda następująco:
wiersze tr i komórki td w tabelach HTML
Przypominam jeszcze raz, że tabele tworzy się wiersz po wierszu (tr). Wiersze (tr) zawierają już komórki (td). Jeśli określisz parametr dla ciągu (tr), będzie on ważny dla wszystkie komórki(td) w tym wierszu, jeśli dla konkretnej komórki, to tylko dla niej. W powyższych przykładach określiłem kolor wiersza; parametr ten został odpowiednio rozłożony na wszystkie komórki.
Stobet 1
Stobet 2
W przypadku tagów tr i td dostępne są następujące opcje
wyrównywać- wyrównanie tekstu wewnątrz komórki. Lewa krawędź (lewa), prawa krawędź (prawa), środek (środek) ważne- pionowe wyrównanie tekstu wewnątrz komórki. Góra (góra), dół (dół), środek (środek) kolor- ustawia kolor linii szerokość- szerokość kolumny (wszystkie komórki poniżej akceptują ten parametr) podawana jest w pikselach lub procentowo, gdzie 100% to szerokość całej tabeli wysokość- wysokość komórki (wszystkie komórki w wierszu akceptują ten parametr)
Przyjrzyjmy się kodowi, w którym zawartość komórek (td) jest wyrównana wzdłuż różnych krawędzi: w pierwszej po lewej, w drugiej po prawej stronie:
Tabela HTML
Stobet 1
Stobet 2
Tekst w pierwszej komórce pierwszej kolumny
Tekst w drugiej komórce drugiej kolumny
Wynik
Korzystając z tabel, możesz stworzyć bardzo dobrą stronę. Nie zapominaj, że do komórek możesz wstawiać nie tylko tekst, ale także obrazy, linki itp.!)
Dziękuję za uwagę! Mam nadzieję, że materiał był przydatny!
Od autora: CSS posiada selektory, które pozwalają znaleźć elementy na podstawie ich pozycji w drzewie dokumentu. Nazywa się je pseudoklasami indeksowymi, ponieważ patrzą na położenie elementu, a nie na jego typ, atrybuty czy identyfikator. W sumie jest ich pięć.
:pierwsze-dziecko i :ostatnie-dziecko
Jak można się domyślić z nazwy, pseudoklasy :first-child i :last-child wybierają pierwsze i ostatnie dziecko w węźle (elemencie). Podobnie jak w przypadku innych pseudoklas, :first-child i :last-child mają minimalne skutki uboczne podczas używania prostych selektorów.
Rozważ poniższy kod HTML i CSS:
:pierwsze-dziecko i:ostatnie-dziecko
Lista owoców
Jabłka
Banany
Jagody
Pomarańcze
Truskawki
<
!
DOCTYPE
html
>
<
html
lang
=
"en-US"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>: pierwsze - dziecko i : ostatnie - dziecko<
/
title
>
<
/
head
>
<
body
>
<
h2
>Lista owoców<
/
h2
>
<
ul
>
<
li
>Jabłka<
/
li
>
<
li
>Banany<
/
li
>
<
li
>Jagody<
/
li
>
<
li
>Pomarańcze<
/
li
>
<
li
>Truskawki<
/
li
>
<
/
ul
>
<
/
body
>
<
/
html
>
Poniższy zrzut ekranu pokazuje wynik.
Nagłówek h2 i pierwsze li mają kolor różowy, ponieważ:pierwsze dziecko nie jest powiązane z określonymi elementami. Znacznik h2 jest pierwszym dzieckiem znacznika body, a li jest pierwszym dzieckiem elementu ul. Ale dlaczego pozostałe elementy li są zielone? Ponieważ: last-child również nie jest powiązane z konkretnym elementem, a ul jest ostatnim elementem podrzędnym w znaczniku body. W rzeczywistości w powyższych stylach napisaliśmy *:first-child i *:last-child.
Dodanie prostego selektora do :first-child i :last-child czyni je bardziej szczegółowymi. Ograniczmy nasz wybór tylko do pozycji z listy. Zamień :first-child na li:first-child i :last-child na li:last-child. Poniższy zrzut ekranu pokazuje wynik.
:n-te-dziecko() i :n-te-dziecko()
Możliwość zaznaczenia pierwszego i ostatniego elementu potomnego w dokumencie nie jest złym pomysłem. A co jeśli chcesz wybrać elementy parzyste lub nieparzyste? Być może powinniśmy wybrać szósty element w drzewie lub zastosować style do co trzeciego elementu podrzędnego. Pomogą nam w tym pseudoklasy:nth-child() i:nth-last-child().
Podobnie jak :not, :nth-child() i :nth-last-child() są również funkcjonalnymi pseudoklasami. Przyjmują jeden argument, którym musi być:
słowo kluczowe dziwne;
słowo kluczowe nawet;
wartość całkowita typu 2 lub 8;
argument w postaci An+B, gdzie A to krok, B to przesunięcie, a n to dodatnia zmienna całkowita.
Ostatni argument jest nieco bardziej skomplikowany niż pozostałe. Przyjrzymy się temu trochę później.
Jaka jest różnica między :nth-child() a :nth-last-child()? Różnią się punktem początkowym: :nth-child() liczy do przodu, a :nth-last-child() liczy wstecz. Indeksy CSS wykorzystują liczby naturalne i zaczynają się od 1, a nie od 0.
Używając pseudoklas:nth-child() i:nth-last-child() wygodnie jest tworzyć naprzemienne wzorce. Stół w paski jest idealnym rozwiązaniem. Poniższy CSS nadaje parzystym wierszom tabeli jasnoniebiesko-szare tło, wynik można zobaczyć na zrzucie ekranu poniżej:
Jeśli przełączysz z:nth-child na:nth-last-child, słupki zostaną odwrócone, ponieważ liczenie zaczyna się od dołu. Zobacz zrzut ekranu poniżej.
Czy chcesz czegoś bardziej złożonego, z bardziej złożonymi argumentami? Utwórzmy dokument zawierający 20 elementów, jak pokazano poniżej.
Używając :nth-child() i :nth-last-child() możesz wybrać jeden konkretny element. Można wybrać wszystkie elementy podrzędne po danej pozycji lub można wybrać elementy z wielokrotnością przesunięcia. Zmieńmy tło szóstego elementu:
Pozycja: n-te dziecko(6) ( tło: #e91e63; )
Jeszcze raz A jest krokiem. Jest to współczynnik dla n zaczynający się od 1. Oznacza to, że jeśli A = 3, to 3n wybierze trzeci, szósty i dziewiąty element itd. Dokładnie to widać na zrzucie ekranu poniżej.
Tutaj wszystko jest trochę bardziej interesujące. Używając :nth-child() i :nth-last-child() możesz wybrać wszystkie elementy po danym punkcie. Wybierzmy wszystkie elementy oprócz pierwszych siedmiu:
Pozycja: n-te dziecko (n+8) ( tło: #e91e63; )
Pozycja: n-te dziecko (n + 8 ) (
tło: #e91e63;
Nie określono tutaj żadnego kroku. W rezultacie n+8 wybiera wszystkie elementy n, zaczynając od ósmego. Zobacz zrzut ekranu poniżej.
Uwaga: przesunięcie ujemne
Obowiązują również wartości i zakresy ujemne. Wpis taki jak:nth-child(-n+8) odwraca zaznaczenie i wybiera pierwsze osiem elementów.
Za pomocą offsetu i kroku możesz zaznaczyć co trzeci element, zaczynając od piątego:
Pozycja: n-te dziecko (3n+5) ( tło: #e91e63; )
Pozycja: n-te dziecko (3n + 5 ) (
tło: #e91e63;
Wynik.
Jedynak
Pseudoklasa jedynego dziecka wybiera element tylko wtedy, gdy jest to jedyny element podrzędny. Poniżej znajdują się dwie listy punktowane. Pierwszy ma jeden element, drugi ma trzy:
Jabłko
Pomarańczowy
Banan
Malina
<
ul
>
<
li
>Jabłko<
/
li
>
<
/
ul
>
<
ul
>
<
li
>Pomarańczowy<
/
li
>
<
li
>Banan<
/
li
>
<
li
>Malina<
/
li
>
<
/
ul
>
Selektor li:only-child(color: #9c27b0;) dokona wyboru
Jabłko
, ponieważ jest jedynym dzieckiem pierwszej listy. Elementy drugiej listy nie są uwzględniane w wyborze, ponieważ istnieją trzy sąsiadujące ze sobą elementy. Wynik pokazano poniżej.
:pusty
Możesz użyć pseudoklasy :empty, aby wybrać elementy, które nie mają dzieci. Pseudoklasa:empty mówi sama za siebie (pusta z angielskiego „empty”). Aby element został uwzględniony w selekcji:empty, musi być całkowicie pusty i nie może zawierać nawet spacji. Oznacza to, że dostaje się do próbki, ale tak się nie dzieje.
Czasami redaktorzy WYSIWYG wstawiają do treści puste znaczniki p. Możesz użyć :empty i :not, aby zapobiec stosowaniu stylów do tych elementów. Na przykład p:not(:empty).
Wybieranie elementów określonego typu według ich indeksu
Pseudoklasy opisane w poprzedniej sekcji wybierają elementy, jeśli zajmują określoną pozycję w drzewie dokumentu. Na przykład p:nth-last-child(2) zaznaczy wszystkie znaczniki p przed ostatnim w bloku nadrzędnym.
W tej sekcji omówimy pseudoklasy indeksowane z typem indeksu. Te pseudoklasy również wybierają elementy według wartości indeksu, ale wybór jest ograniczony do określonego typu. Na przykład musisz wybrać piąty tag p lub nawet tagi h2.
Istnieje pięć takich pseudoklas, których nazwy są dokładnym przeciwieństwem ich odpowiedników bez typu:
n-ty-ostatni-typu()
Granica między nimi a pseudoklasami indeksu podrzędnego jest cienka. Wpis p:nth-child(5) znajduje tylko piąty znacznik p, natomiast wpis p:nth-of-type(5) znajduje wszystkie znaczniki p i wybiera piąty.
Stwórzmy kolejny dokument. Ma również 20 elementów, tylko niektóre są znacznikami p, a inne są divami. p z zaokrąglonymi narożnikami, zobacz zrzut ekranu poniżej.
Nie uważacie, że czarno-biały stół wygląda trochę nudno? My też tak myślimy! Dlatego w tym samouczku porozmawiamy o tym, jak zmienić kolor tabeli w HTML. Istnieją trzy opcje dodawania koloru, z których każda ma swoją własną właściwość.
Określanie koloru tła komórek. Odbywa się to za pomocą właściwości kolor tła.
Określanie koloru tekstu w komórkach. Odbywa się to za pomocą właściwości kolor.
Określa kolor obramowań komórek. Odbywa się to za pomocą właściwości kolor ramki.
Wcześniej, aby zmienić kolor, stosowano bardziej zwięzłą formę opisu ramki. Wyglądała tak:
Obramowanie: 1px jednolity jasnoszary
I ostatnia część odpowiadała tutaj za kolor - lekki.
Znaczenie kolorów można określić na różne sposoby CSS. Pokażemy Ci jak kolor jest opisywany za pomocą atrybutów.
Jak zmienić kolor komórki
Zobaczmy jak wygląda kod w CSS, który określa kolor komórki.
Td (kolor-tła: kolor-tła; )
Oczywiście możesz także zmienić kolory tabela, I td, I t. Spróbujmy nadać naszej tabliczce mnożenia bardziej solidny wygląd.
Dodajmy style do komórek nagłówkowych ze znacznikiem t, a także dla komórek diagonalnych zawierających kwadraty liczb:
Tabliczka mnożenia
Tabliczka mnożenia
*
2
3
2
4
6
3
6
9
Wynik w przeglądarce:
Jak zmienić kolor obramowania w tabeli
Jak już zauważyłeś w powyższym przykładzie, w tabeli zmieniliśmy kolor obramowania. W tym celu wykorzystaliśmy właściwość border. Ustawia parametry w następującej kolejności:
typ linii, w naszym przypadku solidny (pełny)
grubość linii, w naszym przypadku 1px
kolor linii, w naszym przypadku niebieski
Przypomnijmy jeszcze raz jak wygląda ustawienie koloru obramowania komórki:
Td (obramowanie: 1px jednolity niebieski;)
Jak zmienić kolor wiersza w tabeli
Dowiedzieliśmy się więc, jak zmieniać kolory komórek, a także komórek nagłówkowych, korzystając z możliwości CSS. Jeśli określimy style dla tagów takich jak t Lub td, powinieneś zrozumieć, że style będą miały zastosowanie także do innych tagów.
Są jednak sytuacje, w których konieczna jest zmiana koloru określonej komórki, kilku komórek lub całego wiersza. Co zrobić w tym przypadku? Tutaj powinieneś używać klas, a także stosować ich style. W praktyce wygląda to tak:
RowGreen (kolor tła:zielony; )
Aby zmienić kolor niektórych linii za pomocą tej klasy, musisz wykonać następujące czynności:
Tabela z naprzemiennymi kolorami w rzędach
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
I wynik w przeglądarce:
Jak zmienić kolor tekstu w tabeli
Aby zmienić kolor tekstu w tabeli należy skorzystać z właściwości kolor. Można go zastosować do różnych elementów: stołu, tr, th, td. W zależności od tego zmieni się kolor w wybranym elemencie. Przykładowo dla całej tabeli ustawimy kolor czcionki na zielony:
Stół ( kolor: zielony; ... )
Podobnie możesz zmienić kolor poszczególnych komórek. I na tym kończy się ta lekcja, nie zapomnij odrobić pracy domowej. Cześć wszystkim!
