| Definiuje zawartość tabeli. |
|
| Określa nazwę tabeli. |
|
| Definiuje komórkę nagłówka tabeli. |
|---|
|
| Definiuje wiersz tabeli. |
|
| Definiuje komórkę danych tabeli. |
| Służy do umieszczania nagłówka grupy w tabeli (nagłówek tabeli). |
| |
Służy do przechowywania „ciała” stołu. |
|
Służy do przechowywania „stopki” tabeli (stopki). |
|
| Definiuje podane właściwości kolumny dla każdej kolumny w tagu .
|
|
| Definiuje grupę kolumn w tabeli. |
Praca z wcięciami w tabeli
Korzystanie z dopełnienia w tabeli
Wcięcia w tabeli
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
W ten przykład my:
- Stół umieściliśmy na środku stosując technikę centrowania poziomego z marginesami zewnętrznymi (margin : 0 auto ).
- Dla nazwy tabeli (tag ) ustawiamy dolne dopełnienie na 19 pikseli. Mam nadzieję, że nie mylisz się nieparzystymi liczbami :)
Wynik naszego przykładu:
Odstępy między komórkami
Po powyższym przykładzie możesz zauważyć, że nadal mamy przerwę między wszystkimi komórkami w tabeli. Przyjrzyjmy się, jak usunąć lukę między komórkami tabeli lub ją zwiększyć.
Aby ustawić odległość między granicami sąsiednich komórek, musisz użyć właściwości CSS - border-spacing .
Zmiana odstępów między stołami
odstępy między obramowaniami: 30px 10px;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
odstępy między obramowaniami: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
odstępy między obramowaniami:0.2em;
|
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 tabel na 30px oraz ustawiamy wyrównanie tabel w pionie (góra elementu jest wyrównana z górą najwyższego elementu). W tym artykule wrócimy do szczegółowego omówienia tej właściwości.
- ) jest pogrubiony.
- Dla komórek tabeli (nagłówek i komórki danych) ustawiamy pełne obramowanie 1 px z kolorem szesnastkowym #F50 i ustawiamy dopełnienie 19 px ze wszystkich stron.
- Na pierwszy stół z klasą .pierwszy ustawiamy odstęp między komórkami tabeli (właściwość border-spacing) na 30px 10px , dla drugiej tabeli z klasą .druga równy zero, dla trzeciej tabeli z klasą .trzeci równy 0.2em .
Zwracam uwagę na fakt, że jeśli we właściwości border-spacing podana jest tylko jedna wartość długości, to określa ona odstępy, zarówno w poziomie, jak i w pionie, a jeśli podane są dwie wartości długości, to pierwsza określa odległość pozioma, a druga pionowa. Odległość między granicami sąsiednich komórek można określić w jednostkach CSS (px, cm, em itp.). Wartości ujemne nie są dozwolone.
Wynik naszego przykładu:
Pokaż ramki wokół komórek tabeli
Możesz powiedzieć: - więc usunęliśmy przerwę między komórkami za pomocą właściwości border-spacing o wartości 0 , ale dlaczego mamy teraz przecinające się granice komórek?
Podwójne obramowania powstają ze względu na to, że dolna granica jednej komórki jest dodawana do górnej granicy komórki pod nią, podobna sytuacja występuje po bokach komórek i jest to logiczne z punktu widzenia wyświetlania tabeli, ale na szczęście tam to sposób na poinformowanie przeglądarki, że nie chcemy widzieć tak bezczelnego zachowania granic komórek.
Do tego musisz użyć Właściwość CSS zwiń obramowanie . Co dziwne, użycie właściwości border-collapse z wartością zwinięcia jest Najlepszym sposobem jak mogę usunąć lukę między komórkami i jednocześnie nie uzyskać między nimi podwójnych granic.
Rozważ porównanie zachowania granic podczas korzystania z właściwości border-spacing o wartości 0 i właściwości border-collapse o wartości fall :
Przykład wyświetlania obramowań wokół komórek tabeli
odstępy między obramowaniami: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
border-collapse: zwiń;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
W tym przykładzie:
- Sprawiliśmy, że nasze stoły były pływające i przesunięte w lewo (float : left ), ustawiliśmy ich zewnętrzny prawy margines na 30px .
- Ustaw nazwę tabeli (tag ) jest pogrubiony.
- Dla komórek tabeli (nagłówek i komórki danych) ustawiamy pełne obramowanie 5 px z kolorem szesnastkowym #F50 i ustawiamy stałą szerokość 50px i wysokość 75px.
- Na pierwszy stół z klasą .pierwszy ustawiamy odstępy między komórkami tabeli na zero (border-spacing : 0 ;), a dla drugiej tabeli z klasą .druga ustaw właściwość border-collapse na collapse , która w miarę możliwości scala granice komórek w jedno.
Wynik naszego przykładu:
Zachowanie pustych komórek
Za pomocą CSS możesz ustawić, czy wyświetlać obramowania i tło pustych komórek w tabeli, czy nie. Za to zachowanie odpowiada właściwość empty-cells, która, jak można zauważyć z poprzednich przykładów, domyślnie 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 |
☺ | |
Bardzo łatwo jest zrozumieć, jak działa właściwość empty-cells z tego przykładu, jeśli jest ustawiona na hide , puste komórki i tło w nich zostaną ukryte, jeśli ustawione na show (domyślnie), zostaną pokazane.
Lokalizacja nagłówka tabeli
Przyjrzyjmy się innej prostej właściwości stylizacji tabeli — caption-side , która określa położenie podpisu 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ć nagłówek pod tabelą, musisz użyć właściwości z wartością bottom .
Spójrzmy na przykład użycia tej właściwości:
Przykład użycia właściwości caption-side
Tytuł nad tabelą
| Nazwa | Cena £ |
| Ryba | 350 rubli |
| Mięso | 250 rubli |
Tytuł pod tabelą
| Nazwa | Cena £ |
| Ryba | 350 rubli |
| Mięso | 250 rubli |
W tym przykładzie stworzyliśmy dwie klasy, które kontrolują lokalizację nagłówka tabeli. Pierwsza klasa ( .topCaption) umieszcza nad nim nagłówek tabeli, zastosowaliśmy go do pierwszej tabeli i drugiej klasy ( .dolny podpis) umieszcza pod nim nagłówek tabeli, zastosowaliśmy go do drugiej tabeli. Klasa .topCaption jest domyślnie ustawiona na właściwość caption-side i została utworzona w celach demonstracyjnych.
Wynik naszego przykładu:
Wyrównanie w poziomie i pionie
W większości przypadków podczas pracy z tabelami konieczne będzie dostosowanie wyrównania treści w komórkach nagłówka i danych. Właściwość text-align służy do wyrównania w poziomie, podobnie jak any informacje tekstowe. Rozważaliśmy użycie tej właściwości do tekstu we wcześniejszej części artykułu „”.
Aby ustawić wyrównanie zawartości w komórkach, musisz użyć specjalnych słów kluczowych z właściwością text-align. Rozważ aplikację słowa kluczowe tę właściwość w poniższym przykładzie.
Przykład wyrównania w poziomie 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). |
|
prawo | Wyrównuje tekst komórki do prawej. Jest to wartość domyślna (jeśli kierunek tekstu jest od prawej do lewej). |
|
środek | 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, aby dopasować go do szerokości). |
W tym przykładzie stworzyliśmy cztery klasy, które ustawiają różne wyrównania w poziomie w komórkach i stosują je w wierszach 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 również 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 obowiązują tylko następujące * wartości tej właściwości:
*
- Wartości Sub , super , text-top , text-bottom , length i % zastosowane do komórki tabeli będą zachowywać się tak, jak przy użyciu wartości bazowej.
Rozważmy 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ą rodzica. To jest wartość domyślna. |
|
Top | Wyrównuje zawartość komórki pionowo do góry. |
|
środek | Wyrównuje zawartość komórki pionowo do środka. |
|
na dole | Wyrównuje zawartość komórki pionowo do dołu. |
W tym przykładzie stworzyliśmy cztery klasy, które ustawiają różne wyrównania w pionie w komórkach i stosują je w wierszach tabeli. Wartość w komórce jest zgodna z wartością właściwości vertical-align, która została zastosowana do tego wiersza.
Algorytm umieszczania układu tabeli przez przeglądarkę
CSS domyślnie używa algorytmu automatycznego układu tabeli przeglądarki. W tym przypadku szerokość kolumny jest ustawiana przez najszerszą niełamającą zawartość komórki. W niektórych przypadkach ten algorytm może działać wolno, ponieważ przeglądarka musi odczytać całą zawartość tabeli przed określeniem jej ostatecznego układu.
Aby zmienić typ układu układu tabeli przez przeglądarkę za pomocą automatyczny na naprawił, musisz użyć właściwości CSS table-layout z wartością fixed .
W takim przypadku położenie w poziomie zależy tylko od na szerokości tabeli i szerokości kolumn, a nie na zawartości komórek. Przeglądarka rozpoczyna renderowanie tabeli zaraz po otrzymaniu pierwszego wiersza. W rezultacie stały algorytm pozwala szybciej stworzyć układ takiej tabeli niż przy użyciu opcji automatycznej. Podczas pracy z dużymi tabelami możesz użyć stałego algorytmu, aby zwiększyć wydajność.
Spójrzmy na użycie tej właściwości na następującym przykładzie:
Przykład użycia właściwości table-layout
układ tabeli: auto;
| Nazwa |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Pszenica |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
układ stołu: naprawiony;
| Nazwa |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Pszenica |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
W tym przykładzie:
Stylizowanie wierszy i kolumn tabeli
Ty i ja już częściowo poruszyliśmy metody stylizacji wierszy i kolumn tabeli w artykule „”. W tym artykule przyjrzeliśmy się użyciu pseudoklasy grupowej, która umożliwia przeplatanie stylów wierszy w tabelach przy użyciu wartości nawet (uczciwy) oraz dziwne (dziwne) lub przez elementarny wzór matematyczny.
Wróćmy do technik, które omówiliśmy do tej pory i poznaj nowe sposoby stylizowania wierszy i kolumn w tabelach. Przejdźmy do przykładów.
Przykład użycia pseudoklasy :nth-child 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 następnego przykładu, w którym rozważymy opcje stylizacji wierszy tabeli.
Przykład stylizacji wierszy w tabelach
|
Usługa | 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 rodzica, dla komórek nagłówka i danych ustawiamy solidną ramkę o szerokości 1px.
- 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 do zmiany po najechaniu myszą (pseudo-klasa :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 przedstawia stosowanie zaokrąglania narożników do komórek tabeli (właściwości).
Przykład zaokrąglania narożnika komórki
W tym przykładzie:
- Wyśrodkuj tabelę marginesami zewnętrznymi, ustaw szerokość i wysokość komórek nagłówka na 50px , określone przezroczysty obramowanie 5 pikseli.
- Okazało się, że po najechaniu kursorem (pseudo-klasa :hover) na komórce nagłówka dostaje 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 dla granicy, która będzie wyświetlana po najechaniu kursorem, jeśli nie zostanie to zrobione, stół „przeskoczy”.
Wynik naszego przykładu:
Poniższy przykład dotyczy używając HTML elementy oraz i ich stylizacji.
Przykład podświetlania kolumny tabeli
|
Nr wniosku | Usługa | cena, rub. | 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:
I 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ółowej nauki w ramach tego kursu.
W poprzednim przykładzie zdaliśmy sobie sprawę, że element HTML możesz zastosować tylko jedną właściwość CSS - kolor tła (background-color), ale jednocześnie nie możesz ustawić koloru tła po najechaniu kursorem (pseudo-class :hover) bezpośrednio na tym elemencie. W tym przykładzie przyjrzymy się, jak wyróżnić kolumnę tabeli za pomocą samego CSS.
Przykład podświetlania kolumn i wierszy tabeli po najechaniu myszą
|
Nr wniosku | Usługa | cena, rub. | 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:
- Ustawiamy, że nasza tabela zajmuje 100% elementu rodzica, komórki tabeli zajmują 25% elementu rodzica i mają jednolitą granicę 1 piksela na zielono, wysokość nagłówka i komórek danych to 45px . Usunęliśmy przerwę między komórkami za pomocą właściwości border-collapse o wartości
.
- I tak za pomocą pseudoelementu ::after dodajemy treść po każdym elemencie
po najechaniu kursorem. Pseudoelement ::after musi być użyty wraz z właściwością content, dzięki czemu wstawiamy element blokowy, który ma kolor tła zielony las i ma pozycjonowanie bezwzględne.
- Pozycjonowanie bezwzględne jest tutaj konieczne, aby przesunąć element względem określonej krawędzi jego przodka, podczas gdy przodek musi mieć wartość pozycji inną niż domyślna - static , w przeciwnym razie licznik będzie liczony względem określonej krawędzi okna przeglądarki, w tym celu powód, dla którego nastawiliśmy się do stołu pozycjonowanie względne(względny ).
- Ustawiamy właściwość top dla naszego wygenerowanego bloku, która określa kierunek przesunięcia pozycjonowanego elementu od górnej krawędzi oraz właściwość bottom, która określa kierunek przesunięcia pozycjonowanego elementu od dolnej krawędzi. Obie właściwości zostały ustawione na 0 , więc blok całkowicie zajmie element z dołu i góry tabeli, szerokość tego bloku została ustawiona na 25%, wartość ta odpowiada wartości 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 w 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 zamknie tekst.
Wynik naszego przykładu:
Jeśli na tym etapie badania nie rozumiesz procesu pozycjonowania elementów, to nie zniechęcaj się, jest to trudny do zrozumienia temat, którego również nie braliśmy pod uwagę, 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 robieniem zadanie praktyczne, Zawsze możesz otworzyć przykład w osobnym oknie i przejrzeć stronę, aby zobaczyć, jaki CSS został użyty.
2016-2020 Denis Bolshakov, możesz wysyłać komentarze i sugestie na stronie na adres [email protected]
| |
|
