Dlatego najwięcej uczyliśmy się z tobą proste kroki, co można zrobić za pomocą granic tabeli. A teraz stół wygląda znacznie bardziej estetycznie. Jednakże wypełnienie komórek opiera się bezpośrednio na granicach. Można to łatwo naprawić, wystarczy wciąć komórki Tabela HTML. A wtedy tekst wewnątrz ramki, w komórce, będzie bardziej czytelny.
Aby wciąć komórkę, użyj atrybutu wyściółka komórkowa dla tagu W tym przypadku wcięcie ustala się za pomocą właściwości wyściółka. Z jego pomocą nie będzie trudno wykonać wcięcie tam, gdzie jest to konieczne, czyli u góry, po prawej, u dołu lub po lewej stronie, wykorzystując odpowiednio jedną z tych właściwości: wyściółka, dopełnienie-prawe, wyściełane dno I dopełnienie-lewe. Możesz dokładnie określić, ile pikseli ma mieć wcięcie. Podajmy przykład, w którym będzie dolne wcięcie 20
pikseli, a cała reszta będzie 10
. Taki CSS-kod będzie wyglądał następująco: Td ( dopełnienie: 10 pikseli; dopełnienie-dół: 20 pikseli; ) A pełny kod style na tym etapie: Tabela ( obramowanie: pełne 1 piksel niebieski; obramowanie-zwinięcie: zwinięcie; ) td ( obramowanie: pełne 1 piksel niebieski; dopełnienie: 10 pikseli; dopełnienie-dół: 20 pikseli; ) Wynik w przeglądarce: Z reguły problemy związane z tworzeniem tabel można rozwiązać za pomocą znaczników, atrybutów i właściwości, które umożliwiają tworzenie obramowań, wcięć w komórkach, a także ustawianie kolor tła same komórki. Wcięcia w tabelach występują nie tylko wewnątrz komórek. Mogą być również obecne pomiędzy samymi komórkami. Istnieją dwie możliwości tworzenia wcięć między komórkami: Trzeba to podkreślić odstępy graniczne jest określony dla całej tabeli, natomiast właściwość wyściółka jest zapisywany bezpośrednio dla komórek. Spójrzmy na przykład: Tabela ( obramowanie: pełne 1 piksel niebieski; zwinięcie obramowania: oddzielne; odstępy między obramowaniem: 5 pikseli; ) td ( obramowanie: pełne 1 piksel niebieski; dopełnienie: 10 pikseli; dopełnienie-dół: 20 pikseli; ) I wynikowy wynik: Od razu zastrzegamy, że nie należy próbować robić takich wcięć za pomocą border-collapse: upadek. W końcu podczas korzystania z tej opcji komórki „sklejają się” ze sobą. Aby oddzielić je od siebie, powinieneś użyć border-collapse: oddzielne. Ważne jest, aby zrozumieć, że ta wartość jest wartością domyślną. I służy tylko do jasnego pokazania, jak ten problem został rozwiązany. Jeśli usuniemy tę linię, wynik w postaci komórek umieszczonych oddzielnie od siebie zostanie zapisany. Specyfikacja CSS daje nieograniczone możliwości projektowania tabel. Domyślnie tabela i komórki tabeli nie mają widocznych obramowań ani tła, a komórki w tabeli nie sąsiadują ze sobą. Szerokość komórek tabeli zależy od szerokości ich zawartości, dlatego szerokość kolumn tabeli może się różnić. Wysokość wszystkich komórek w rzędzie jest taka sama i zależy od wysokości najwyższej komórki. Domyślnie tabela i znajdujące się w niej komórki są wyświetlane w przeglądarce bez widocznych krawędzi. Obramowania tabeli są określone przez właściwość granicy: Tabela ( border-collapse: zwiń; /*usuń puste przestrzenie między komórkami*/ border: 1px jednolity szary; /*ustaw zewnętrzne obramowanie tabeli szary Grubość 1px*/ ) Granice komórek nagłówka każda kolumna jest określona dla th elementu: Cz (obramowanie: 1px jednolity szary;) Granice komórek dla elementu td określono treści tabeli: Td (obramowanie: 1px jednolity szary;) Grubość obramowań sąsiednich komórek nie ulega podwojeniu, zatem obramowanie całej tabeli można ustawić w następujący sposób: Th, td (obramowanie: 1px jednolity szary;) Możesz wyróżnić zewnętrzną granicę tabeli, nadając jej zwiększoną szerokość: Stół (obramowanie: 3px jednolity szary;) Granice można ustawić częściowo: /* ustaw zewnętrzną szarą ramkę o grubości 3 pikseli dla tabeli */ table (obramowanie u góry: jednolita szarość 3 piksele; ) /* ustaw szarą ramkę o grubości 1 piksela dla komórki znajdującej się w treści tabeli */ td (obramowanie na dole: jednolita szarość 1 piksela;) Możesz przeczytać więcej o nieruchomości granicznej. Domyślny szerokość i wysokość stołu określana na podstawie zawartości jego komórek. Jeśli szerokość nie zostanie określona, będzie ona równa szerokości najszerszego wiersza (wiersza). Szerokość tabeli i kolumny ustawia się za pomocą właściwości szerokość. Jeśli dla tabeli zostanie podana tabela (szerokość: 100%;), to szerokość tabeli będzie równa szerokości bloku kontenera, w którym się ona znajduje. Szerokość tabeli i kolumn jest zwykle podawana w px lub%, na przykład: Tabela (szerokość: 600px;) th (szerokość: 20%;) td:first-child (szerokość: 30%;) Wysokość stołu nie określono. Wysokość rzędu tabelami można manipulować, dodając do elementów górne i dolne wypełnienie Cz, td (dopełnienie: 10px 15px;) Domyślny tło stołu a komórki są przezroczyste. Jeśli strona lub blok zawierający tabelę ma tło, będzie ono widoczne przez tabelę. Jeśli tło zostanie określone zarówno dla tabeli, jak i komórek, to w miejscach, w których tło tabeli i komórek nachodzą na siebie, widoczne będzie tylko tło komórek. Tłem dla całej tabeli i jej komórek może być: Model tabeli CSS skupia się głównie na wierszach (wierszach) utworzonych za pomocą znacznika za pomocą tagu Możesz ustawić tło dla dowolnej liczby kolumn; za pomocą tabeli selektorów td:first-child , table td:last-child możesz ustawić style dla pierwszej lub ostatniej kolumny tabeli (z wyjątkiem pierwszej komórki nagłówka tabeli); Używając selektora tabeli td:nth-child (reguła wyboru kolumn), możesz ustawić style dla dowolnych kolumn tabeli. Możesz przeczytać więcej o selektorach CSS. Możesz dodać tytuł do tabeli za pomocą tagu Domyślnie ramki komórek tabeli są oddzielone małą spacją. Jeśli ustawisz border-collapse: zwijanie dla tabeli, przerwa zostanie usunięta. Nieruchomość jest dziedziczona. Składnia Tabela (zwinięcie obramowania: zwinięcie;) Korzystając z właściwości border-spacing, możesz zmienić odległość między ramkami komórek. Ta właściwość dotyczy całej tabeli. Dziedziczny. Składnia Tabela (zwijanie obramowania: oddzielne; odstępy obramowania: 10px 20px;) tabela (zwijanie obramowania: oddzielne; odstępy obramowania: 10px;) Właściwość pustych komórek ukrywa lub pokazuje puste komórki. Wpływa tylko na komórki niezawierające żadnej treści. Jeśli komórka jest ustawiona na tło, a tabela na tabelę (border-collapse: zwiń;), wówczas komórka nie zostanie ukryta. Dziedziczny. Układ układu tabeli jest określony przez jedno z dwóch podejść: układ stały lub układ automatyczny. Pod układem w w tym przypadku odnosi się do rozkładu szerokości tabeli pomiędzy szerokościami komórek. Nieruchomość nie podlega dziedziczeniu. Składnia Stół (układ stołu: stały;) Tabele poziome to tabele, w których tekst czyta się poziomo. Każdy element jest oddzielnym wierszem. Możesz nadać takim tabelom minimalistyczny wygląd, umieszczając dwupikselowe obramowanie pod nagłówkiem th.
Na duże ilości wierszy, taki projekt tabeli utrudnia ich odczytanie. Aby rozwiązać ten problem, możesz dodać jednopikselową ramkę poniżej wszystkich elementów td. Td ( obramowanie-dół: 1px solid #ccc; kolor: #669; dopełnienie: 9px 8px; przejście: .3s linear; )/*reszta kodu jest taka jak w powyższym przykładzie*/ Dodanie efektu :hover do elementu tr sprawi, że tabele zaprojektowane w stylu minimalistycznym będą łatwiejsze do odczytania. Gdy najedziesz myszką na komórkę, pozostałe komórki w tym samym wierszu zostaną jednocześnie podświetlone, co ułatwia śledzenie informacji, jeśli tabele mają wiele kolumn. Th ( grubość czcionki: normalna; kolor: #039; dopełnienie: 10px 15px; ) td ( kolor: #669; górna część obramowania: 1px solid #e8edff; dopełnienie: 10px 15px; ) tr:hover td (tło: #e8edff ;) Chociaż takie tabele są rzadko używane, tabele zorientowane pionowo są przydatne do kategoryzowania lub porównywania opisów obiektów reprezentowanych przez kolumnę. Możesz zaprojektować je w stylu minimalistycznym, dodając przestrzeń na oddzielenie kolumn. Th (grubość czcionki: normalna; obramowanie u dołu: 2 piksele stałe #6678b1; obramowanie po prawej: 30 pikseli pełnym #fff; obramowanie po lewej: 30 pikseli pełnym #fff; kolor: #039; dopełnienie: 8 pikseli 2 piksele; ) td ( obramowanie- po prawej: 30 pikseli #fff; obramowanie po lewej: 30 pikseli #fff; kolor: #669; Najbardziej niezawodnym stylem projektowania stołów wszelkiego typu jest tak zwany styl „pudełkowy”. Wystarczy wybrać dobry schemat kolorów, a następnie ustawić kolor tła dla wszystkich komórek. Nie zapomnij podkreślić różnicy między liniami, ustawiając obramowanie jako separator. Th (rozmiar czcionki: 13 pikseli; grubość czcionki: normalny; tło: #b9c9fe; górna granica: 4 piksele pełne #aabcfe; dolna granica: 1 piksele #fff; kolor: #039; dopełnienie: 8 pikseli; ) td ( tło : #e8edff; obramowanie na dole: 1px stałe #fff; 1px pełne przezroczyste; tr:hover td (tło: #ccddff;) Najtrudniej jest znaleźć taką kolorystykę, która będzie harmonijnie współgrać z Twoją stroną internetową. Jeśli witryna jest obciążona grafiką i projektem, użycie tego stylu będzie dość trudne. Tabela (rodzina czcionek: „Lucida Sans Unicode”, „Lucida Grande”, Sans-Serif; rozmiar czcionki: 14 pikseli; maksymalna szerokość: 70%; szerokość: 70%; wyrównanie tekstu: środek; zwinięcie obramowania: zwiń ; obramowanie u góry: 7 pikseli ciągłe #9baff1; obramowanie u dołu: 7 pikseli ciągłe #9baff1; rozmiar czcionki: normalne; tło: #e8edff; jednolity #9baff1; kolor: #039; dopełnienie: 8px; ) td (tło: #e8edff; obramowanie po prawej: 1px pełne #aabcfe; obramowanie po lewej stronie: 1px pełne #aabcfe; kolor: #669; dopełnienie: 8px ; ) Stół zebra wygląda całkiem atrakcyjnie i wygodnie. Dodatkowy kolor tła może służyć jako wizualna wskazówka dla osób czytających tabelę. Th ( grubość czcionki: normalna; kolor: #039; dopełnienie: 10px 15px; ) td ( kolor: #669; górna część obramowania: 1px stała #e8edff; dopełnienie: 10px 15px; ) tr:nth-child(2n) ( tło: #e8edff;) Aby uzyskać tzw. efekt gazety, można nakładać obramowania na elementy stołu i bawić się komórkami znajdującymi się w środku. Lekki, minimalistyczny styl gazety może wyglądać tak: baw się schematem kolorów, dodaj obramowania, dopełnienie, różne tła i efekt najechania kursorem po najechaniu kursorem na linię. Tabela (obramowanie: 1px pełne #69c;) th ( grubość czcionki: normalna; kolor: #039; obramowanie dolne: 1px przerywana #69c; dopełnienie: 12px 17px; ) td ( kolor: #669; dopełnienie: 7px 17px; ) tr:hover td (tło: #ccddff;) Tabela (obramowanie: 1px stała #69c;) th ( grubość czcionki: normalna; kolor: #039; dopełnienie: 10px; ) td ( kolor: #669; górna granica: 1px przerywana #fff; dopełnienie: 10px; tło: #ccddff; ) tr:hover td (tło: #99bcff;) Tabela (obramowanie: 1px pełna #6cf;) th ( waga czcionki: normalna; rozmiar czcionki: 13px; kolor: #039; transformacja tekstu: wielkie litery; obramowanie po prawej: 1px stała #0865c2; górna granica: 1px pełna #0865c2; obramowanie po lewej stronie: 1px pełne #0865c2; obramowanie u dołu: 1px pełne #fff; Jeśli szukasz szybkiego i niepowtarzalnego sposobu na zaprojektowanie stołu, wybierz atrakcyjny obraz lub zdjęcie nawiązujące do tematyki stołu i ustaw je jako tło stołu. Png”) 98% 86% bez powtórzeń; ) th (waga czcionki: normalna; rozmiar czcionki: 14 pikseli; kolor: #339; dopełnienie: 10 pikseli 12 pikseli; tło: biały; ) td ( kolor: #669; obramowanie- u góry: 1 px jednolity biały; tło: rgba(51, 51, 153, .2); tr:hover td (tło: rgba(51, 51, 153, .1); ) Każda tabela składa się z kolumn i wierszy. Etykietka Etykietka Zawartość komórki utworzonej przez znacznik Etykietka Atrybut wyrównania znacznika służy do wyrównania tabeli. Używając atrybutu wyrównania, możesz umieścić tabelę po lewej lub prawej stronie (align= "left" i Align= "right") części okna przeglądarki ( element nadrzędny) lub w jego środku (align="center" ). Wyrównanie zawartości linii ( etykietka Atrybut wyrównania akceptuje wartości left, Right, Center i Justify, które określają wyrównanie zawartości wierszy i komórek odpowiednio do ich lewej, prawej, środka i szerokości; Atrybut valign, który przyjmuje wartości top, Bottom i Middle, określa wyrównanie zawartości wierszy i komórek odpowiednio wzdłuż ich górnej, dolnej i środkowej krawędzi. Atrybut wyrównania służy również do wyrównania nagłówka ( etykietka Domyślnie zawartość komórek jest wyrównana do lewej w poziomie i wyśrodkowana w pionie. Domyślne rozmiary ( wysokość i szerokość) zarówno tabele, jak i komórki zmieniają się w zależności od rozmiaru ich zawartości. Ale wysokość i szerokość zarówno tabeli, jak i jej poszczególnych komórek można ustawić jawnie - używając odpowiednio atrybutów wysokości i szerokości. Etykietka Wartości wysokości i szerokości są podawane w pikselach lub procentach względem wolna przestrzeń. Aby ustawić wartości: Określ dodatnią liczbę całkowitą. W takim przypadku rozmiar zostanie określony w pikselach; Określ dodatnią liczbę całkowitą, po której następuje symbol %. Jeśli zawartość tabeli lub komórki przekroczy określone wymiary, zostaną one zignorowane przez przeglądarkę, a nowe wymiary zostaną automatycznie wybrane zgodnie z wymiarami treści. Jak widać na przykładzie: podając szerokość jednej z komórek w kolumnie, ustawiasz w ten sposób szerokość całej kolumny; a określając wysokość jednej z komórek w wierszu, określasz wysokość całego wiersza. Tabela i każda jej komórka mają własne obramowania, które domyślnie nie są widoczne. atrybut znacznika obramowania Grubość obramowania ( lub ramki) jest podawana w pikselach. Wartość atrybutu border jest dodatnią liczbą całkowitą. Jeśli atrybut obramowania zostanie określony bez wartości, grubość obramowania będzie wynosić 1 piksel. Grubość obramowania ustawiana jest tylko dla tabeli. Grubość obramowania wokół komórek wynosi zawsze 1 piksel ( lub brak). Domyślnie obramowanie pojawia się z efektem 3D i jest czarne. Atrybut bordercolor określa kolor obramowania i eliminuje efekt 3D. Atrybut może służyć do ustawienia koloru obramowania tabeli ( etykietka Atrybut bordercolor nie jest obsługiwany przez wszystkie przeglądarki i dlatego nie jest zalecany. Aby ustawić kolor obramowania, lepiej użyć stylów ( to już jest w CSS).
Obramowanie tabeli i obramowanie komórek może być częściowo wyświetlane. Atrybut znacznika ramki Podczas formatowania tabel w formacie HTML, aby wizualnie przedstawić pewne informacje i ułatwić ich postrzeganie, przydatne może być użycie dopełnienia wewnątrz i na zewnątrz komórek. Dopełnienie wewnętrzne – od krawędzi komórek do ich zawartości, ustalane jest poprzez atrybut cellpadding znacznika Dopełnienia zewnętrzne - odległość pomiędzy granicami sąsiednich komórek oraz odległość od krawędzi komórek do krawędzi tabeli, ustalana jest poprzez atrybut cellspace znacznika Wartości atrybutów są dodatnimi liczbami całkowitymi, które określają odległość w pikselach. Projektując i formatując tabele w formacie HTML, często zachodzi potrzeba scalania sąsiadujących komórek. A jeśli zaistnieje taka potrzeba, warto skorzystać z atrybutów tagu colspan i rowspan Atrybut colspan określa liczbę komórek, które zostaną scalone w poziomie, a atrybut rowspan określa liczbę komórek, które zostaną scalone w pionie. Obydwa atrybuty mają sens, jeśli tabela składa się z wielu wierszy. W HTML możliwe jest ustawienie ogólnego tła zarówno dla całej tabeli, jak i tła dla pojedynczej wybranej komórki. Atrybut znacznika tła atrybut znacznika bgcolor Używając tych samych atrybutów, możesz ustawić obraz tła i kolor tła dla dowolnej komórki tabeli ( etykietka Przypomnijmy jeszcze o istnieniu atrybutu cols znacznika Użycie atrybutu cols umożliwia przeglądarce szybsze wyświetlenie zawartości tabeli. W tej sekcji przyjrzymy się tagom używanym podczas edycji kilku elementów tabeli jednocześnie. Tagi te można podzielić na dwie grupy. Do pierwszej grupy zaliczają się tagi Jeden z tych tagów jest umieszczany bezpośrednio po tagu Użycie atrybutu span znacznika Jeśli atrybut span znajduje się w tagu Do drugiej grupy tagów zaliczają się także tagi, które są do siebie niemal identyczne
, Dowolnego z nich można użyć do zmiany niektórych właściwości jednego lub większej liczby wierszy tabeli: jest to ponownie wyrównanie zawartości komórek w wierszach w poziomie i w pionie - za pomocą odpowiednio atrybutów wyrównania i valign; i zadanie kolor tła komórki przy użyciu atrybutu bgcolor. Korzystając z tych tagów, należy zdawać sobie sprawę z kilku niuansów, które określają różnice między nimi. Tagi I Etykietka
Obramowania tabeli HTML można łatwo zmienić za pomocą oznacza CSS. Ich wyświetlanie konfiguruje się za pomocą następujących właściwości: zwijanie i odstępy. Aby edytować widok tabeli, użyj grupy właściwości obramowania. Pozwala dostosować szerokość, kolor, obecność/brak obramowań, ich styl i inne funkcje wyświetlania. Tabela bez stylizacji będzie wyświetlana jako tekst strukturalny bez obramowań. Tabela w HTML jest budowana przy użyciu tagów: Rozmiar tekstu i czcionka, tło, wcięcia od krawędzi okna przeglądarki ustawiane są w css w kontenerze treści. Treść (rodzina czcionek: Helvetica, bezszeryfowa; rozmiar czcionki: 5vw; kolor: czarny; kolor tła: rgba(228, 228, 245); dopełnienie: 20vh; ) Style służą do projektowania wyglądu macierzy. Właściwość border pozwala określić grubość, typ i kolor obramowania tabeli HTML. (szerokość obramowania: 2vw; styl obramowania: kropkowana; kolor obramowania: błękitny; ) W skrócie obramowanie: kolor stylu szerokości. (obramowanie: 1px bryła #4c6ea1;) Dla określonej strony jest ona ustawiana przy użyciu szablonu border-top(/right/bottom/left)-style(/color/width/promień). (kolor górnego obramowania: ciemnoniebieski; ) Dopełnienie ustawia dopełnienie komórki od tekstu do ramki, wyrównanie tekstu ustawia wyrównanie. Style służą do projektowania wyglądu tabeli. Właściwość border pozwala określić grubość, styl i kolor obramowania. Dopełnienie ustawia wcięcie z tekstu, wyrównanie tekstu ustawia wyrównanie. Th, td (obramowanie: 1vw pełne #4c6ea1; dopełnienie: 1vw; wyrównanie tekstu: do lewej; ) Nie ma potrzeby używania obramowania ani osobnego określania koloru obramowania, szerokości i stylu, ponieważ przy pełnym projekcie można utworzyć tabelę HTML bez obramowań. Na przykład poniższy kod ustawia tło, dopełnienie i zaokrąglone rogi (ta ostatnia macierz bez linii wewnętrznych i zewnętrznych). Tabela (wyrównanie tekstu: do lewej; kolor tła: rgba(228, 228, 245); promień lewego górnego obramowania: 15em 1em; promień obramowania-dolnego-prawyego: 15em 1em; ) td, th ( dopełnienie: 1,5 V) Dzięki możliwości ustawienia tła dla każdej komórki tabela bez obramowań może wyglądać tak, jakby je posiadała. Tabela ( wyrównanie tekstu: do lewej; kolor tła: rgba(228, 228, 245); szerokość: 70vw; odstępy między obramowaniami: 2vh 2vh; ) td, th ( dopełnienie: 1,5vh; ) td ( kolor tła: rgba (247, 247, 255); Możesz usunąć obramowania tabeli HTML, pozostawiając wewnętrzne. Aby to zrobić, ustaw na przykład właściwość border dla komórek (tr), ustaw wspólne ramki na sąsiednich bokach (zwiń) i zabraniaj rysowania linii wokół macierzy (ukryte). Ostatnia akcja ukryje linie komórek, które po włączeniu zwijania znajdą się w tym samym miejscu, co zewnętrzne krawędzie tabeli. Tabela (wyrównanie tekstu: środek; zwinięcie obramowania: zwinięcie; kolor tła: rgba(228, 228, 245); promień obramowania: 50%; szerokość: 29vh; wysokość: 10vh; styl obramowania: ukryty; ) td (wypełnienie: 1,5 Vh; obramowanie: 0,5 VH w kolorze czarnym; ) Jedna z głównych właściwości tabeli w HTML, border-collapse, określa sposób wyświetlania obramowań komórek. Właściwość może mieć jedną z trzech wartości: zwiń, oddziel, dziedzicz. tabela ( border-collapse: zwiń; ) Domyślnie ustawiona jest separacja, więc każda komórka będzie miała własną ramkę. Dzięki zwijaniu możesz łączyć linie komórek tak, aby ich zawartość była oddzielona pojedynczą ramką. Na obrazku przedstawiono trzy opisane powyżej stany graniczne: bez stylów; z domyślnym zwijaniem obramowania; z wartością border-collapse, pozostawiając wspólną linię między komórkami. Właściwość zwinięcia umożliwia utworzenie granic komórek w tabeli HTML zarówno niezależnych od siebie, jak i wspólnych. Często używana jest z nim właściwość border-spacing, która reguluje odległość pomiędzy ramkami komórek. Można określić odstępy poziome i pionowe. Tabela (rozstaw granic: 0,5vw 1vw; ) Pierwsza wartość wskazuje odległość między komórkami w poziomie, druga - w pionie. Jeśli dla samej tabeli określono ramkę, wówczas odległość od niej do komórek jest również tworzona przez właściwość spasingu, ale może mieć na nią wpływ również dopełnienie macierzy. W przypadkach, gdy matryca posiada tło, wolna przestrzeń pomiędzy komórkami zostanie nim wypełniona. Tabela ( odstępy między obramowaniami: 0,5vw 1vw; obramowanie: 1vw pełne #4c6ea1; dopełnienie: 1vw; kolor tła: czarny; ) td, th ( obramowanie: 1vw ciągłe #4c6ea1; dopełnienie: 0,3vw; wyrównanie tekstu: do lewej; kolor tła: biały) Jeśli tabela nie ma połączonych obramowań komórek, właściwość pustych komórek umożliwia wyświetlenie linii komórek i tła, które są uważane za puste (oznaczone jako widoczne lub nie zawierające znaków). Jeśli chcesz pokazać obramowania i tło każdej komórki, ustaw właściwość na show. tabela (puste komórki: pokaż; ) Wartość ukryj ukrywa obramowania i tła pustych bloków. Jeśli wszystkie komórki w wierszu są puste, wówczas wiersz ma zerową wysokość i tylko jedną pionową linię. Tabela (odstęp obramowania: 0,5vw 1vw; obramowanie: 0,1vw bryła #4c6ea1; wypełnienie: 0,5vw; kolor tła: rgba(33, 31, 171, 0,12); puste komórki: ukryj; ) td, th ( obramowanie : 0,3vw solid #4c6ea1; wyrównanie tekstu: do lewej; Aby przydzielić granice grupom elementów (komórkom, kolumnom, wierszom, grupom wierszy lub kolumn), służy atrybut Rules. Jego wartość jest zapisana bezpośrednio w kodzie HTML w znaczniku tabeli. Pozwala na selektywne rysowanie ramek elementów. Wystarczy określić atrybut w kodzie HTML, spowoduje to utworzenie wewnętrznych linii pomiędzy komórkami. Obramowanie tabeli HTML będzie musiało zostać określone ręcznie w css. Tak więc pierwsze zdjęcie przedstawia czyste działanie atrybutu bez dodatkowego projektu ramki za pomocą tabeli. Na drugim zdjęciu narysowana jest górna linia, która została zainstalowana zgodnie z instrukcją. Stół (górny brzeg: 1vw z kropką #486743; ) Atrybut może mieć wiele wartości. Wszystko tworzy obramowanie między komórkami o grubości obramowania 1px. Cols tworzy linie pomiędzy kolumnami, rzędy - pomiędzy rzędami, żaden nie usuwa krawędzi. Na obrazku przedstawiono przykładową tabelę z wartościami all i rows. Możesz zmienić kolor obramowań komórek i szerokość ramki, jeśli używasz atrybutu reguł za pomocą obramowania i koloru obramowania. Komórkom, wierszom, kolumnom i grupom elementów można nadać własne wartości graniczne. Mogą się jednak różnić trzema parametrami: stylem, grubością i kolorem. W trybie zwinięcia powstają konflikty stylistyczne. W związku z tym, że jedna granica może podlegać rządom dwóch różnych komórek, pojawia się problem wyboru stylu, który będzie miał pierwszeństwo. Jak pisze E. Malchuk, wygrywa ten najbardziej „chwytliwy” (poza ukrytym). Konflikt stylów łatwo zilustrować, korzystając z omówionej już tabeli. Wystarczy dodać kilka klas do komórek i określić dla nich projekt. HTML ma postać: Odpowiedni CSS. Treść (rodzina czcionek: Helvetica, bezszeryfowa; rozmiar czcionki: 5vw; kolor: czarny; margines: 0; szerokość: 80vw; kolor tła: biały; dopełnienie: 3vw; ) tabela ( kolor tła: rgba(33 , 31, 171, 0,12); dopełnienie: 0,5vw; zwinięcie obramowania: odstępy od obramowania: 0,5vw; styl obramowania: ukryte; pełne #4c6ea1; ) td ( dopełnienie: 1vw; obramowanie: 0,2vw z kropkami #4c6ea1; ) .sekunda_komórka (obramowanie: 0,01vw stałe #4c6ea1; ) .trzecia_komórka (obramowanie: 0,01vw podwójna czerwona; ) Projekt obramowania można ustawić osobno dla każdej strony komórki. Aby to zrobić, wystarczy określić nie jedną wartość w stylu obramowania, ale listę czterech, odpowiadających bokom komórki. Th, td ( dopełnienie: 1vw; wyrównanie tekstu: do lewej; szerokość obramowania: 0,5vw; kolor obramowania: ciemnoczerwony; styl obramowania: kropkowany; ) .seven ( kolor górnego obramowania: błękitny; styl obramowania-góry : solidna; szerokość-prawej krawędzi: 2vw; styl-dolnej krawędzi: przerywana-lewa-styl: ukryta ) Dane można określić w jednym wierszu, podając od jednej do czterech różnych wartości. Każdy tradycyjnie staje się instrukcją dla jednej ze stron. Można także określić projekt granic komórek, po prostu definiując dane dla każdej strony, jak pokazano powyżej. Łącznie dostępnych jest dziesięć stylów ramek. Wszyscy zmieniają linię lub ją usuwają: Do każdej komórki (do góry i po lewej stronie) zostanie zastosowany jeden ze stylów. Aby nie konkurowały ze sobą, „najsłabszym” przypisuje się najwyższe wartości. Tabela (kolor tła: rgba(33, 31, 171, 0,12); dopełnienie: 0,5vw; zwinięcie obramowania: zwinięcie; obramowanie: 0,3vw pełna czerń; ) th, td ( dopełnienie: 1vw; wyrównanie tekstu: do lewej; ) .one ( obramowanie górne: ukryte; obramowanie lewe: ukryte; ) .two ( obramowanie górne: 0,4vw podwójne #4c6ea1; obramowanie lewe: 0,4vw podwójne #4c6ea1; ) .three ( obramowanie górne: 0,5vw ciągła #4c6ea1; obramowanie po lewej: 0,5vw ciągłe #4c6ea1; .cztery ( obramowanie u góry: 0,7vw przerywane #4c6ea1; obramowanie po lewej stronie: 0,7vw przerywane #4c6ea1; ) .pięć ( obramowanie u góry: 0,8vw przerywane # 4c6ea1 ; obramowanie po lewej stronie: 0,8vw z kropkami #4c6ea1; .six ( obramowanie u góry: 0,9vw grzbiet #4c6ea1; obramowanie po lewej stronie: 0,9vw grzbiet #4c6ea1; ) .seven ( obramowanie u góry: 1vw początek #4c6ea1; obramowanie po lewej stronie : 1vw początek #4c6ea1; ) .osiem ( obramowanie u góry: 1.1vw rowek #4c6ea1; obramowanie po lewej stronie: 1.1vw rowek #4c6ea1; ) .dziewięć ( obramowanie u góry: 1.2vw wstawka #4c6ea1; obramowanie po lewej stronie: 1.2vw wstawka #4c6ea1; Charakter danych prezentowanych w macierzy często wymaga modyfikacji krawędzi tabeli, ramek komórek, wierszy lub kolumn. Aby to zrobić, możesz użyć: Zaletą ukrytego jest jego priorytet. Jeżeli do obramowania obowiązuje zasada dwóch elementów jednocześnie i jeden z nich ma wartość ukrytą w stylu obramowania, linia nie zostanie wyświetlona. Oznacza to, że możesz łatwo utworzyć całą tabelę, a następnie selektywnie usunąć niepotrzebne ramki. Użycie opcji ukrytej w komórkach uniemożliwia przywrócenie obramowania innymi metodami (z wyjątkiem wagi ciężkiej! ważne). Dlatego jeśli chcesz usunąć niektóre boki komórek, lepiej nie używać żadnego. Powiedzmy, że jest stół. Celem jest usunięcie pionowych krawędzi wewnątrz pierwszej linii. Jest ona oznaczona osobnym tagiem (nagłówkiem), dzięki czemu nie ma konieczności wpisywania dodatkowej klasy. Jeśli zastosujesz ukrycie do całego znacznika, określając obramowanie lewe, to wraz z obramowaniami wewnętrznymi zostanie usunięta część bocznej ramki tabeli, co nie było wymagane przez warunek. Jeśli nie użyjesz żadnego i linii matrycy, wówczas dla linii wewnętrznych będą dwie niekonfliktowe reguły, a dla zewnętrznej krawędzi żadna nie będzie kolidować z regułą podaną jej w tabeli, a bok pozostanie na swoim miejscu . Usuwanie poszczególnych linii komórkowych odbywa się za pomocą klas przypisanych do odpowiednich elementów, jak pokazano w przypadku indywidualnego ustawienia stylu, szerokości i koloru. Natomiast łatwiej jest usunąć boczne obramowanie w tabeli HTML odwołując się do zewnętrznych ramek matrycy, które wskazano w tabeli. Wystarczy wskazać konkretną linię w css. Stół (w stylu obramowania po lewej stronie: ukryty; ) Usuwanie obramowań w wierszach można łatwo wdrożyć za pomocą właściwości border z wartością ukrytą w tr. Nie tylko one znikają poziome linie stoły, ale także stoliki boczne. Macierz degeneruje się w pionowe kolumny. Tr (styl obramowania: ukryty; ) W ostateczności zwróć się do!ważne. Jeśli dodasz go po instrukcji, otrzyma on dodatkowy priorytet. Obramowania tabel HTML są elastyczne i łatwe do dostosowania. Grupa właściwości obramowania umożliwia ukrywanie elementów, zmianę koloru, szerokości czy stylu. Wadą tabel jest to, że wynik kombinacji reguł zastosowanych do pojedynczego elementu nie zawsze jest jednoznacznie przewidywalny. W związku z tym zaleca się zmniejszenie liczby możliwych stylów obramowań lub stosowanie ich selektywnie. Marginesy i dopełnienie to bardzo ważne style podczas tworzenia strony HTML. Pozwalają dokładniej ustawić elementy, stworzyć ramę z niezbędnymi szczelinami itp. Obydwa style są bardzo podobne i pełnią podobne funkcje. Ale nadal istnieją różnice. Elementy mogą być zagnieżdżane lub umieszczane obok siebie. Spójrzmy na następujący przykład: Mamy dwa stoły, cytrynowy i niebieski, umieszczone jeden pod drugim. Tabele składają się z jednej komórki. W pierwszej komórce tabeli znajduje się czerwony blok. Na tym przykładzie przyjrzyjmy się, jak działają marginesy i wcięcia. Pola są ustawiane według stylu wyściółka. Ten styl dotyczy tylko elementów kontenerów, które mogą zawierać inne elementy. Styl umożliwia ustawienie marginesu pomiędzy krawędziami elementu a jego zawartością. Styl margines pozwala ustawić wcięcie od elementu do najbliższych krawędzi innego elementu. Granice innego elementu mogą być krawędziami kontenera nadrzędnego, a także krawędziami samej strony. Istnieje kilka sposobów definiowania tych stylów. Na przykład bezpośrednio określ rozmiar wszystkich marginesów lub wcięć za pomocą jednego argumentu w jakiejś jednostce miary (px, ex, em, pt, cm itd.): margines: 3 piksele; dopełnienie: 3px 5px; pierwszy to margines/wcięcie u góry, drugi po lewej i prawej stronie, trzeci na dole. Z czterema argumentami: margines: 3px 5px 2px 6px; wyściółka, dopełnienie-prawe, wyściełane dno, dopełnienie-lewe, pierwszy to margines/odstęp na górze, drugi po prawej stronie, trzeci na dole, czwarty po lewej stronie. Łatwo to zapamiętać: najpierw od góry, potem zgodnie z ruchem wskazówek zegara. Dodatkowo możesz ustawić marginesy i dopełnienie dla konkretnej krawędzi oddzielnie, korzystając z odpowiednich stylów:, górny margines, prawy margines, margines-dół lewy margines . Wartością tych stylów może być tylko jeden argument, który określa wielkość marginesu/dopełnienia dla danej strony. dopełnienie: 5px; W rezultacie strona zmieni się na następującą: margines u góry: 5 pikseli; Należy pamiętać, że wcięcie ustawiamy konkretnie na tabelę, a nie na komórkę tabeli, jak ma to miejsce w przypadku pól. Oto wynik: Nawiasem mówiąc, w pierwszym przypadku (odstęp między czerwonym blokiem a granicami komórki macierzystej) ten sam efekt można uzyskać, ustawiając wcięcia bloku. Ogólnie rzecz biorąc, jeśli coś jest niejasne, daj nam znać w komentarzach.
. Istnieje jednak inna, bardziej preferowana opcja: CSS.
Przestrzenie między komórkami
.
Formatowanie tabel
1. Obramowania tabeli
2. Jak ustawić szerokość i wysokość stołu
I . Nie zaleca się ustalania wysokości za pomocą właściwości height. 3. Jak ustawić tło stołu
pożywny,
,
.4. Kolumny tabeli
. W praktyce zdarzają się przypadki, gdy konieczne jest specjalne formatowanie kolumn, co jest możliwe w następujący sposób: 5. Jak dodać tytuł tabeli
podpis (strona podpisu: dół; wyrównanie tekstu: do prawej; dopełnienie: 10px 0; rozmiar czcionki: 14px; )
...
Firma
Pytanie 1
Pytanie 2
Pytanie 3
Pytanie 4
Ryż. 2. Przykład wyświetlenia nagłówka pod tabelą 6. Jak usunąć odstęp pomiędzy ramkami komórek
Ryż. 3. Przykład tabel z łączeniem i rozdzielaniem ramek komórek7. Jak zwiększyć odstęp pomiędzy ramkami komórek
Ryż. 4. Przykład tabel ze zwiększonymi odstępami pomiędzy ramkami komórek8. Jak ukryć puste komórki tabeli
tabela ( obramowanie: 1px solid #69c; zwinięcie obramowania: oddzielne; puste komórki: ukryj; ) th, td (obramowanie: 2px solid #69c;)
Firma
Pytanie 1
Pytanie 2
Pytanie 3
Microsoftu
20.3
30.5
Google
50.2
40.63
45.23
Ryż. 5. Przykład ukrycia pustej komórki tabeli 9. Ułóż tabelę, korzystając z właściwości table-layout
10. Najlepsze układy stołów
1. Minimalizm poziomy
tabela (rodzina czcionek: „Lucida Sans Unicode”, „Lucida Grande”, Sans-Serif; rozmiar czcionki: 14 pikseli; tło: biały; maksymalna szerokość: 70%; szerokość: 70%; zwinięcie obramowania: zwinięcie; tekst -align: lewy; ) th (grubość czcionki: normalna; kolor: #039; obramowanie-dół: 2px stałe #6678b1; dopełnienie: 10px 8px; ) td ( kolor: #669; dopełnienie: 9px 8px; przejście: .3s liniowy; ) tr:hover td (kolor: #6699ff;)Pracownik Wynagrodzenie Premia Kierownik Stephena C. Coxa $300 $50 Pion Józefina Tan $150 - Ania Joyce Minga $200 $35 Andy Jamesa A. Pentela $175 $25 Ania 
2. Minimalizm pionowy
3. Styl „pudełkowy”.
4. Zebra pozioma
5. Styl gazety
6. Tło stołu
tworzy ciąg znaków i znacznik komórka z rzędu. Odpowiednio, ile komórek znajduje się w wierszu, w tabeli będzie tyle samo kolumn.
tworzy także komórkę. To różnica w stosunku do tagu jest to komórka utworzona przez znacznik jest komórką nagłówkową: jej zawartość jest wyśrodkowana, a jeśli jest to tekst, przeglądarka wyświetla go pogrubioną czcionką.
domyślnie znajduje się po jego lewej stronie.
- bezpośrednio po tagu otwierającym. Domyślny nagłówek znajduje się nad tabelą i jest wyrównany do jej środka.
Pierwsza komórka pierwszego wiersza
Druga komórka pierwszego wiersza
Pierwsza komórka drugiego rzędu
Druga komórka drugiego rzędu
Wyrównanie stołu. Wyrównywanie zawartości komórek
.
) i komórki ( etykietka
) w poziomie jest również wykonywane przy użyciu atrybutu wyrównania, a w pionie przy użyciu atrybutu valign:
Wysokość i szerokość tabeli i komórek
, utworzenie wiersza tabeli nie ma atrybutów wysokość i szerokość. Wysokość rzędu odpowiada wysokości znajdujących się w nim komórek. A szerokość rzędu jest równa szerokości stołu.
>
Obramowania tabel i komórek
pozwala na uwidocznienie granic i ustawienie ich grubości. Spowoduje to wyświetlenie obramowań zarówno wokół tabeli, jak i wokół każdej komórki.
), ciągi znaków ( etykietka
) lub komórki ( etykietka
).
Nie określono atrybutu granicy.
Dlatego nie ma żadnych granic.
Grubość obramowania tabeli wynosi 3 piksele.
Komórki mają obramowanie o wielkości 1 piksela!
Częściowe wyświetlanie granicy
określa, gdzie narysować obramowanie tabeli. Atrybut reguł określa sposób wyświetlania obramowań komórek.
Ramka „500px”="hsides" Rules="cols" >
Zainstalowany
poziomy
obramowania stołu
I
wyświetlane są granice
pomiędzy kolumnami
Wyściółka wewnątrz i na zewnątrz komórek
.
.
Odległość od zawartości komórki
do ich granic wynosi 10 pikseli
Odległość między komórkami i od komórek
do krawędzi tabeli wynosi 25 pikseli
Łączenie komórek
.
1
2
3
4
1
2
3
4
Tło stołu. Tło komórki tabeli
określa obraz, który będzie obrazem tła tabeli. Wartość atrybutu określa adres pliku obrazu - ścieżkę bezwzględną lub względną do pliku ().
ustawia kolor tła tabeli. Kolor można ustawić na dwa sposoby ()
).
Kolorem tła stołu jest ciemnoróżowy.
Obraz tła izolatka- niebo!
, który informuje przeglądarkę o liczbie kolumn w tabeli.
Edycja tabeli
. Powiedzmy, że to jest tag
1
2
3
4
5
1
2
3
4
5
. Stringi umieszczone w tagu są prezentowane na górze tabeli, a wiersze są zawarte w znaczniku będzie znajdować się na dole tabeli. Obydwa tagi można zastosować tylko raz w tej samej tabeli.
.
1
2
3
4
5
6
7
8
„right” bgcolor="#00FF33" >
9
10
1
2
3
4
5
6
7
8
9
10
Podstawy
Głowa
Głowa
Głowa
Komórka
Komórka
Komórka
Komórka
Komórka
Komórka
Brak ramek
Zwinąć i oddzielić
Podwójne ramki
Puste komórki
Atrybut
tabela (obramowanie u góry: 1vw stałe #486743; rozmiar czcionki: 5vw; ) th, td ( dopełnienie: 2vw; )
Głowa
Głowa
Głowa
Komórka
Komórka
Komórka
Komórka
Komórka
Komórka
Konflikty stylów
Ilustracja konfliktu
Głowa
Głowa
Głowa
Komórka
Komórka
Komórka
Komórka
Komórka
Komórka
Style ramek
Strukturyzacja materiału
/html>
Aktualizacja: 20.04.2021
103583
Jeśli zauważysz błąd, zaznacz fragment tekstu i naciśnij Ctrl+Enter
Nagłówki witryny
Prawa autorskie © 2024 sukachoff.ru - Windows. Wirusy. Laptopy. Internet. Biuro. Narzędzia. Kierowcy
