Domyślnie tabela HTML na stronie internetowej jest wyświetlana bez obramowania; aby dodać obramowanie do tabeli, podobnie jak wszystkich innych elementów, używana jest właściwość CSS border. Warto jednak zwrócić uwagę na fakt, że jeśli dodasz ramkę tylko do elementu
, wówczas zostanie wyświetlony wokół całej tabeli. Aby komórki tabeli również miały obramowanie, musisz ustawić właściwość obramowania dla elementów | I | . Tabela, th, td ( obramowanie: 1px jednolita czerń; ) Spróbuj » Teraz zarówno tabela, jak i komórki mają obramowania, a każda komórka i tabela mają własne obramowania. W rezultacie pomiędzy ramkami pojawiła się pusta przestrzeń, której wielkość można kontrolować za pomocą właściwości border-spacing, która jest ustawiana dla całej tabeli. Innymi słowy, nie można indywidualnie kontrolować odstępów między różnymi komórkami.
Nawet jeśli usuniesz odstępy między komórkami za pomocą właściwości border-spacing o wartości 0, krawędzie komórek będą się stykać, podwajając rozmiar. Aby połączyć obramowanie komórek, użyj właściwości border-collapse. Może mieć dwa znaczenia:
- oddzielne: jest ustawieniem domyślnym. Komórki są wyświetlane w niewielkiej odległości od siebie, każda komórka ma własną granicę.
- zwiń: łączy sąsiednie ramki w jedną, wszystkie odstępy między komórkami, a także między komórkami a ramką tabeli są ignorowane.
Nazwa dokumentu
| Nazwa | Nazwisko |
|---|
| Homera | Simpsona |
| Margaryna | Simpsona |
| Nazwa | Nazwisko |
|---|
| Homera | Simpsona |
| Margaryna | Simpsona |
Próbować " Rozmiar tabeli
Po dodaniu obramowań do komórek tabeli można było zauważyć, że zawartość komórek znajdowała się zbyt blisko krawędzi. Aby dodać odstęp pomiędzy krawędziami komórek i ich zawartością, możesz użyć właściwości padding: Cz, td ( dopełnienie: 7px; ) Spróbuj » Rozmiar stołu zależy od jego zawartości, ale często zdarzają się sytuacje, gdy stół jest zbyt wąski i konieczne staje się jego rozciągnięcie. Szerokość i wysokość tabeli można zmienić za pomocą właściwości szerokości i wysokości, ustawiając żądane wymiary samej tabeli lub komórek: Tabela (szerokość: 70%; ) th (wysokość: 50px; ) Spróbuj » Wyrównanie tekstu
Domyślnie tekst w komórkach nagłówka tabeli jest wyrównywany do środka, podczas gdy tekst w zwykłych komórkach jest wyrównywany do lewej; za pomocą właściwości text-align można kontrolować wyrównanie tekstu w poziomie.
Właściwość CSS Vertical-align pozwala kontrolować wyrównanie w pionie treści tekstowej. Domyślnie tekst jest wyrównywany pionowo do środka komórek. Wyrównanie w pionie można zastąpić za pomocą jednej z wartości właściwości Vertical-align:
- góra: tekst jest wyrównywany do górnej krawędzi komórki
- środek: wyrównuje tekst do środka (domyślnie)
- dół: tekst jest wyrównywany do dolnej krawędzi komórki
Nazwa dokumentu
| Nazwa | Nazwisko |
|---|
| Homera | Simpsona |
| Margaryna | Simpsona |
Próbować " Zmieniający się kolor tła wierszy tabeli
Podczas przeglądania dużych tabel zawierających wiele wierszy z dużą ilością informacji śledzenie, jakie dane należą do konkretnego wiersza, może być trudne. Aby ułatwić użytkownikom orientację, możesz używać na przemian dwóch różnych kolorów tła. Aby uzyskać opisany efekt, możesz skorzystać z selektora klasy, dodając go do co drugiego wiersza tabeli:
Nazwa dokumentu
| Nazwa | Nazwisko | Pozycja |
|---|
| Homera | Simpsona | ojciec |
| Margaryna | Simpsona | matka |
| Bartek | Simpsona | syn |
| Lisa | Simpsona | córka |
Próbować "Dodawanie atrybutu klasy do co drugiej linii jest dość uciążliwe. Pseudoklasa:nth-child została dodana do CSS3, aby zapewnić alternatywne rozwiązanie tego problemu. Teraz efekt przeplatania można osiągnąć wyłącznie przy użyciu CSS, bez uciekania się do zmiany znaczników HTML dokumentu. Korzystając z pseudoklasy:nth-child, możesz wybrać wszystkie parzyste lub nieparzyste wiersze tabeli za pomocą jednego ze słów kluczowych: parzysty (parzysty) lub nieparzysty (nieparzysty): Tr:n-te-dziecko(nieparzyste) ( kolor tła: #EAF2D3; ) Spróbuj » Zmień tło wiersza po najechaniu kursorem
Innym sposobem na poprawę czytelności danych tabelarycznych jest zmiana koloru tła wiersza po najechaniu na niego myszką. Pomoże to podkreślić pożądaną zawartość tabeli i poprawi wizualną percepcję danych.
Implementacja takiego efektu jest bardzo prosta, w tym celu należy dodać pseudoklasę:hover do selektora wierszy tabeli i ustawić żądany kolor tła: Tr:hover (kolor tła: #E0E0FF; ) Spróbuj » Wyrównanie stołu do środka
Centrowanie tabeli HTML jest możliwe tylko wtedy, gdy szerokość tabeli jest mniejsza niż szerokość jej elementu nadrzędnego. Aby wyrównać tabelę do środka, należy skorzystać z właściwości marginesu, podając jej co najmniej dwie wartości: pierwsza wartość będzie odpowiadać za zewnętrzny margines tabeli na górze i na dole, a druga wartość będzie odpowiadać automatyczne wyrównanie do środka: Tabela (margines: 10px auto; ) Spróbuj » Jeśli potrzebujesz różnych marginesów na górze i na dole tabeli, możesz ustawić właściwość margines na trzy wartości: pierwsza będzie odpowiadać za margines górny, druga za wyrównanie w poziomie, a trzecia za margines dolny: Tabela (margines: 10px auto 30px; )
Cześć wszystkim! Teraz już wiesz, jak tworzyć podstawowe tabele składające się z dowolnej liczby wierszy i kolumn. Nieźle nieźle. Porozmawiajmy teraz o projekcie tych stołów.
W poprzedniej lekcji tabele były wyświetlane bez obramowań. I, widzisz, wygląda to tak sobie, że nawet nie można tego nazwać znakiem. Aby utworzyć obramowanie tabeli w HTML, należy dodać do tagu
atrybut granica, nadając mu wartość różną od zera.
Zróbmy więc obramowanie stołu. Na przykład dla tego, który już mamy:
| Lewa górna komórka | Prawa górna komórka |
| Dolna lewa komórka | Prawa dolna komórka |
Wynik w przeglądarce:
Jak usunąć obramowania tabeli
Z kolei, aby usunąć obramowania tabeli HTML, lub można też powiedzieć, uczynić je niewidocznymi, potrzebny jest atrybut granica ustalić wartość 0
. Po wykonaniu tych prostych kroków ramka zostanie usunięta.
Atrybut umożliwia tworzenie granic, ale nie zarządzanie nimi. Pozwala jedynie na zmianę ich grubości.
Dlatego teraz porozmawiamy o CSS, którego właściwości umożliwiają wykorzystanie granica utwórz różne obramowania, zarówno wewnątrz każdej komórki, jak i na zewnątrz, wokół stołu jako całości.
Przyjrzyjmy się, jak używać CSS do tworzenia zewnętrznych i wewnętrznych granic tabeli.
W tym celu usuń atrybut border z naszej tabeli i dodaj style:
Przykładowa tabela
| Lewa górna komórka |
Prawa górna komórka |
| Dolna lewa komórka |
Prawa dolna komórka |
Wynik w przeglądarce:
Teraz dodajmy także obramowania do każdej komórki. Aby to zrobić, po prostu dodaj style:
Wynik w przeglądarce:
Jak usunąć dopełnienie między komórkami w tabeli HTML
Zgadzam się, że granica zdefiniowana za pomocą CSS nie wygląda tak dobrze, jak byśmy tego chcieli. Niewątpliwie z estetycznego punktu widzenia jest nad czym pracować. Na stronie przeglądarki możesz zobaczyć, że domyślnie wyświetla osobno obramowanie tabeli i komórki. Przykład wyraźnie to pokazuje.
Można jednak całkowicie pozbyć się takich ramek, zwanych podwójnymi, jeśli użyjesz właściwości CSS border-collapse. W praktyce wygląda to tak: Tabela ( obramowanie: pełne 1 piksel niebieski; zwinięcie obramowania: zwinięcie; ) ... W rezultacie odległość między komórkami zostaje usunięta:
Wartość zwinięcia przypisana do atrybutu obramowania pozwala na usunięcie podwójnych obramowań. Jak widać, efektem jest zapadnięcie się granic sąsiednich komórek, a także ramek komórek i zewnętrznej ramki tabeli. Jeśli chodzi o to drugie, można je całkowicie usunąć. A jeśli zajdzie potrzeba jego wyeksponowania, trzeba zwiększyć jego szerokość. W ten sposób pozbyliśmy się separatorów w tabeli. W następnej lekcji porozmawiamy o tym, jak ustawić granice pionowe i poziome. Powodzenia wszystkim!
Określa odległość między krawędziami komórek w tabeli. Atrybut border-spacing nie działa, jeśli w tabeli parametr border-collapse jest ustawiony na zwijanie.
Składnia
border-spacing: wartość [wartość]
Argumenty
Jedna wartość określa odległość w pionie i poziomie między krawędziami komórek. Jeśli istnieją dwa argumenty, pierwszy określa odległość poziomą, a drugi określa odległość pionową.
odstępy graniczne
Wynik tego przykładu pokazano na ryc. 1.
Ryż. 1. Zastosowanie parametru border-spacing
Notatka
Jeśli oznaczyć dodawany jest parametr cellspace, wówczas w przypadku użycia atrybutu stylu border-spacing nie jest on brany pod uwagę, a wartość odstępu między komórkami jest ignorowana. Wyjątkiem od tej reguły jest Internet Explorer, który w ogóle nie rozumie właściwości border-spacing.
Stoły
border-collapse ustawia sposób wyświetlania obramowań wokół komórek tabeli. Ten parametr odgrywa rolę, gdy zainstalowana jest ramka dla komórek, wówczas na styku komórek pojawi się linia o podwójnej grubości. Dodanie wartości zwinięcia wymusza na przeglądarce analizę podobnych miejsc w tabeli i usunięcie z niej podwójnych linii.układ tabeli określa, w jaki sposób przeglądarka powinna obliczać wysokość i szerokość komórek tabeli na podstawie jej zawartości.border-spacing określa odległość pomiędzy krawędziami komórek w tabeli. Atrybut border-spacing nie działa, jeśli tabela ma ustawiony parametr border-collapse na zwijanie.
Dlatego przestudiowaliśmy najprostsze działania, które można wykonać na granicach 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ć, po prostu dodając wcięcia komórek w tabeli 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
. Istnieje jednak inna, bardziej preferowana opcja: CSS.
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; ) I pełny kod stylu 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:
Przestrzenie między komórkami
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 ramek, wcięć w komórkach, a także ustawianie koloru tła samych komórek.
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:
- za pomocą atrybutu odstępy między komórkami dla tagu
.
- za pomocą CSS-nieruchomości odstępy graniczne.
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.
Dowiedzieliśmy się już, że tabele HTML mają struktura, chociaż przeglądarki domyślnie ich nie wyświetlają. Ale to nie wszystko, każda komórka tabeli ma także ramkę tzw granica komórki. Ale to nie wszystko, korzystając ze specjalnych atrybutów tagów Możesz zmieniać odległości między komórkami i od komórek do ramki tabeli, a także wewnętrzne dopełnienie od krawędzi komórek do ich zawartości.
Ramka tabeli HTML, obramowania komórek, odległości między nimi i wypełnienie.
Więc dla tworzenie ramki Tabele HTML i granice jego komórek używany jest tylko jeden atrybut znacznika - granica. Wartość atrybutu jest nieujemną liczbą całkowitą (domyślnie zero), która reprezentuje rozmiar w pikselach. Ale uwaga, rozmiar zmienia się tylko w ramce tabeli, na krawędziach komórek jest zawsze niezmieniony.
Na zmianę odległości między komórkami(ich granice) i z komórek do ramki tabele w tagu Stosowany jest atrybut cellspace. Jego wartościami mogą być również tylko liczby mierzące odległości w pikselach.
Aby zainstalować wewnętrzne dopełnienie od granic komórek do ich zawartości wymagane w tagu użyj atrybutu cellpadding. A jego wartościami są liczby wskazujące wymiary w pikselach.
Należy pamiętać, że przeglądarki domyślnie ustawiają małe (dwa piksele) wartości odstępów między komórkami i odstępów między komórkami, więc aby całkowicie usunąć odstępy, należy ustawić atrybuty na zero (0).
Przykład obramowań, ramek i wypełnienia tabeli HTML
Obramowania tabeli, ramki i wyściółka
| Komórka 1.1 | Komórka 1.2 | Komórka 1.3 |
| Komórka 2.1 | Komórka 2.2 | Komórka 2.3 |
| Komórka 3.1 | Komórka 3.2 | Komórka 3.3 |
Tabela z ustawionymi tylko obramowaniami komórek i obramowaniami:
| Komórka 1.1 | Komórka 1.2 | Komórka 1.3 |
| Komórka 2.1 | Komórka 2.2 | Komórka 2.3 |
| Komórka 3.1 | Komórka 3.2 | Komórka 3.3 |
Wynik w przeglądarce
Tabela ze zmodyfikowanymi wcięciami i odległościami:
Naturalnie nie jest konieczne rysowanie ramek i obramowań komórek na stole, aby zmienić wewnętrzne wcięcia i odległości między komórkami.
Zgodnie ze składnią HTML przeglądarki dodają wartości odstępów między komórkami i wypełnienia komórek do wymiarów tabeli i jej komórek. Na przykład, jeśli ustawisz szerokość komórki na 100 pikseli i cellpadding="10" - przeglądarki dodadzą 20 pikseli do szerokości (po 10 po lewej i prawej stronie) i będzie wynosić 120 pikseli. Ogólnie rzecz biorąc, przekonasz się o tym w trakcie.
Dygresja od tematu czyli jak usunąć wcięcia wzdłuż krawędzi strony
Początkowo wszystkie przeglądarki instalują małe marginesy na krawędziach strony HTML, które często są niepotrzebne, dlatego teraz dowiesz się, jak je usunąć. Generalnie informację tę należy umieścić na początku podręcznika, ale tam nie będzie ona dla Ciebie przydatna.
W odpowiednim czasie na metce Istniały cztery atrybuty określające rozmiar tych marginesów dla każdej strony strony: margines górny (górny), margines prawy (prawy), margines dolny (dół) i margines lewy (lewy). Teraz te atrybuty są nieaktualne, więc użyjemy stylów (CSS). Możesz więc zmieniać odległości marginesów wzdłuż krawędzi strony na kilka sposobów, pokażę ci dwa, a o trzecim dowiesz się, jeśli zdecydujesz się nauczyć CSS.
Metoda pierwsza. W tagu określ atrybut stylu z następującymi wartościami:
styl="margines:0" >...
- usuwa wcięcia ze wszystkich stron strony HTML jednocześnie.
styl= „margines: prawy górny lewy dolny”>...
- dostosowuje wielkość wcięć dla każdej strony zgodnie z ruchem wskazówek zegara. Z reguły stosuje się rozmiary w pikselach, na przykład: style= "margines: 5px 3px 4px 5px" >...
Drugi i wygodniejszy sposób. W tagu
Praca domowa.
W tej lekcji też nie będę opisywał wszystkiego szczegółowo - tylko ogólne punkty. Aby uzyskać kompletność, spójrz na przykładowy wynik.
- Utwórz trzy tabele, każda składająca się z jednego wiersza i trzech kolumn (kolumn).
- W pierwszej tabeli umieść nagłówek lub „nagłówek” strony (nie mylić z „nagłówkiem” dokumentu HTML), w drugiej - lewe i prawe menu, a także główną treść (treść) , w trzecim - Stopka lub „stopka” strony.
- Niech szerokość pierwszej i ostatniej kolumny każdej tabeli będzie stała.
- Ważny. Użyj tagu
![]() tylko po to, aby utworzyć cztery poziome przyciski menu w nagłówku strony. W pozostałych przypadkach pozwól obrazom odejść w tle, a w drugich komórkach tabel używane są tylko kolory, a w pierwszej i ostatniej tabeli jest to #99FF99.
- Niech tekst zawartości strony będzie wyrównany po obu stronach komórki tabeli, a tytuł wyśrodkowany.
- Jeśli chodzi o odległości między komórkami tabeli, a także wcięcia komórek, zastanów się, gdzie należy je całkowicie usunąć, a gdzie zwiększyć.
|
