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

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)

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 (zostanie to omówione 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

Stobet 1	Stobet 2

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

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 tej linii, 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.

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 do lewej, w drugiej do prawej:

Stobet 1	Stobet 2
Tekst w pierwszej komórce pierwszej kolumny	Tekst w drugiej komórce drugiej kolumny
Stobet 1	Stobet 2

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!

Co to jest stół?

Tabela to uporządkowany zbiór danych składający się z wierszy i kolumn ( dane tabelaryczne). Tabela pozwala szybko i łatwo wyszukać wartości wskazujące na jakiś związek pomiędzy różnymi typami danych, np. osobą i jej wiekiem, dniem tygodnia czy rozkładem jazdy lokalnego basenu.

Tabele są bardzo powszechnie używane w społeczeństwie ludzkim i to od dawna, o czym świadczy dokument spisu ludności Stanów Zjednoczonych z 1800 roku:

Nic więc dziwnego, że twórcy HTML udostępnili sposób na strukturyzację i prezentację danych tabelarycznych w Internecie.

Jak działa stół?

Istotą stołu jest to, że jest sztywny. Informacje można łatwo zinterpretować, tworząc wizualne skojarzenia między nagłówkami wierszy i kolumn. Spójrz na przykład na poniższą tabelę i znajdź gazowego olbrzyma Jowisza z 62 księżycami. Odpowiedź można znaleźć, łącząc odpowiednie nagłówki wierszy i kolumn.

Stobet 1	Stobet 2
Tekst w pierwszej komórce pierwszej kolumny	Tekst w drugiej komórce drugiej kolumny

Dane o planetach naszego Układu Słonecznego (Fakty planetarne zaczerpnięte z arkusza informacji o planetach NASA – metryczne.

		Nazwa	Masa (10-24 kg)	Średnica (km)	Gęstość (kg/m 3)	Grawitacja (m/s 2)	Długość dnia (godziny)	Odległość od Słońca (10 6 km)	Średnia temperatura (°C)	Liczba księżyców	Notatki
Planety ziemskie		Rtęć	0.330	4,879	5427	3.7	4222.6	57.9	167	0	Najbliżej Słońca
		Wenus	4.87	12,104	5243	8.9	2802.0	108.2	464	0
		Ziemia	5.97	12,756	5514	9.8	24.0	149.6	15	1	Nasz świat
		Mars	0.642	6,792	3933	3.7	24.7	227.9	-65	2	Czerwona planeta
Planety Jowisz	Gazowi giganci	Jowisz	1898	142,984	1326	23.1	9.9	778.6	-110	67	Największa planeta
		Saturn	568	120,536	687	9.0	10.7	1433.5	-140	62
	Lodowi giganci	Uran	86.8	51,118	1271	8.7	17.2	2872.5	-195	27
		Neptun	102	49,528	1638	11.0	16.1	4495.1	-200	14
Planety karłowate		Pluton	0.0146	2,370	2095	0.7	153.3	5906.4	-225	5	Odtajniona jako planeta w 2006 roku, ale pozostaje to kontrowersyjne.

Jeśli zostanie to wykonane prawidłowo, nawet osoby niewidome będą w stanie interpretować dane tabelaryczne w tabeli HTML — skuteczna tabela HTML powinna poprawić komfort użytkowania zarówno osób widzących, jak i niedowidzących.

Stylizacja stołu

Weźmy następujący prosty przykład:

Dane 1	Dane 2
Kalkuta	Pomarańczowy
Roboty	Jazz

Co daje nam następujący wynik:

Dane 1	Dane 2
Kalkuta	Pomarańczowy
Roboty	Jazz

Nie jest to idealne rozwiązanie, ponieważ musimy powtórzyć informacje o stylu we wszystkich trzech komórkach kolumny (prawdopodobnie w prawdziwym projekcie mamy ustawioną klasę dla wszystkich trzech i określimy styl w osobnym arkuszu stylów). Zamiast to robić, możemy określić informacje raz, na element. elementy są określone wewnątrz a pojemnik tuż pod otworem

etykietka. Moglibyśmy uzyskać taki sam efekt, jak widzimy powyżej, określając naszą tabelę w następujący sposób:

Dane 1	Dane 2
Kalkuta	Pomarańczowy
Roboty	Jazz

W rzeczywistości definiujemy dwie „kolumny stylu”, jedna określająca informacje o stylu dla każdej kolumny. Nie stylizujemy pierwszej kolumny, ale nadal musimy dodać puste miejsce element - gdybyśmy tego nie zrobili, stylizacja zostałaby zastosowana również do pierwszej kolumny.

Gdybyśmy chcieli zastosować informacje o stylu do obu kolumn, moglibyśmy uwzględnić tylko jedną element z atrybutem span, na przykład:

Podobnie jak colspan i rowspan, span przyjmuje wartość liczbową bez jednostki, która określa liczbę kolumn, do których ma zostać zastosowana stylizacja.

Aktywna nauka: colgroup i kol

Teraz czas spróbować samemu.

Poniżej możesz zapoznać się z harmonogramem zajęć lektora języków obcych. W piątek ma nową klasę, ucząc przez cały dzień języka niderlandzkiego, ale we wtorki i czwartki przez kilka godzin uczy także niemieckiego. Chce zaznaczyć kolumny zawierające dni, w których uczy.

Utwórz ponownie tabelę, wykonując poniższe czynności.

1. Najpierw utwórz lokalną kopię naszego pliku timetable.html w nowym katalogu na komputerze lokalnym. Kod HTML zawiera tę samą tabelę, którą widziałeś powyżej, bez informacji o stylu kolumny.
2. Dodać element na górze tabeli, tuż pod tag, w którym możesz dodać swoje elementy (patrz pozostałe kroki poniżej).
   Pierwsze dwie kolumny należy pozostawić bez stylu.
   Dodaj kolor tła do trzeciej kolumny. Wartość atrybutu stylu to kolor tła:#97DB9A;
   Ustaw osobną szerokość w czwartej kolumnie. Wartość atrybutu stylu to szerokość: 42px;
   Dodaj kolor tła do piątej kolumny. Wartość atrybutu stylu to kolor tła: #97DB9A;
   Dodaj inny kolor tła i obramowanie do szóstej kolumny, aby zaznaczyć, że jest to wyjątkowy dzień, a ona uczy nowych zajęć. Wartości atrybutu stylu to back-color:#DCC48E; border:4px solid #C1437A;
   Ostatnie dwa dni są dniami wolnymi, więc po prostu ustaw brak koloru tła, ale ustawioną szerokość; wartość atrybutu stylu to szerokość: 42px;

   Zobacz, jak sobie poradzisz z przykładem. Jeśli utkniesz lub chcesz sprawdzić swoją pracę, możesz znaleźć naszą wersję na GitHubie jako timetable-fixed.html (zobacz ją także na żywo).

   Streszczenie

   To właściwie podsumowuje podstawy tabel HTML. W następnym artykule przyjrzymy się nieco bardziej zaawansowanym funkcjom stołu i zaczniemy zastanawiać się, na ile są one dostępne dla osób niedowidzących.

   Tabela to siatka komórek tworzących wiersze i kolumny. Przykładowe tabele obejmują różne raporty finansowe, wyniki zawodów sportowych, kalendarze, harmonogramy itp. Pojedynczy blok siatki nazywany jest komórką tabeli. Komórki tabeli mogą zawierać różnorodne informacje, w tym liczby, tekst, a nawet obiekty wideo i audio. Używając języka HTML, tabele są pisane wiersz po wierszu.

   Element

   służy jako pojemnik na elementy definiujące zawartość tabeli. Aby utworzyć wiersz tabeli, musisz dodać wewnątrz elementu sparowany znacznik blokowy (w skrócie od angielskiego „table row” – wiersz tabeli). Ile tagów dodasz, tyle wierszy będzie w tabeli. Etykieta otwierająca oznacza początek nowego wiersza tabeli. Po nim umieszczane są elementy .

   Element

   dodany , mimo to pojawia się na końcu tabeli. Wynika to z faktu, że może zawierać wiele linii. Jednak przeglądarka musi wyrenderować dół tabeli przed otrzymaniem wszystkich (potencjalnie licznych) wierszy danych. Dlatego w kodzie jest on zapisany przed elementem .

   Zadania

   • Usuń podwójną ramę stołu

     Domyślnie obramowanie tabeli ma efekt podwójnej obramowania, zmień kod tak, aby wszystkie linie tego obramowania stały się pojedyncze.

   
   

   W wykładzie szczegółowo omówiono zasady wykorzystania tabel w znacznikach HTML. Obejmuje to tabelaryczną organizację tekstu, tabelaryczną siatkę współrzędnych i grafikę zorganizowaną w tabelach.

   Narzędzia do opisywania tabel w formacie HTML

   W miarę rozwoju WWW stało się jasne, że zasoby zawarte w formacie HTML nie są wystarczające do wysokiej jakości wyświetlania różnego rodzaju dokumentów. Wadą HTML był brak narzędzi do wyświetlania tabel. W tym celu wstępnie sformatowany tekst (tag

   ), w którym tabela została oznaczona znakami ASCII.  Jednak ta forma przedstawienia tabel nie była wystarczająco wysokiej jakości i wyróżniała się na tle ogólnego stylu dokumentu.  Po wprowadzeniu tabel w formacie HTML webmasterzy mieli do dyspozycji nie tylko narzędzie do umieszczania tekstu i danych liczbowych, ale także potężne narzędzie do projektowania umożliwiające umieszczanie obrazów graficznych i tekstu we właściwym miejscu na ekranie.
   
   Tworzenie tabel w formacie HTML
   Znacznik służy do opisywania tabel<ТАВLЕ>.  Etykietka<ТАВLЕ>, podobnie jak wiele innych, automatycznie tłumaczy linię przed i za tabelą.
   Tworzenie wiersza tabeli - tag<ТR>
   Etykietka<ТR>(Wiersz tabeli) tworzy wiersz tabeli.  Cały tekst, inne znaczniki i atrybuty, które należy umieścić w jednej linii, należy umieścić pomiędzy znacznikami lt;TR>.
   Definiowanie komórek tabeli - tag<ТD>
   Komórki z danymi są zwykle umieszczane w wierszu tabeli.  Każda komórka zawierająca tekst lub obraz musi być otoczona tagami<ТD>.  Liczba tagów<ТD>w wierszu określa liczbę komórek
   
    
   
    
   Tabela
    
    

   (z podpisu angielskiego - podpis). Element

   przeznaczony do organizowania nagłówka tabeli. Znajduje się bezpośrednio po tagu , ale poza opisem wiersza lub komórki.

   Przykład: zastosowanie tagu

   , I . Tak jak strona internetowa może zawierać nagłówek, treść i stopkę, tak tabela może zawierać nagłówek, treść i stopkę. Aby logicznie pogrupować wiersze na górze tabeli (czyli utworzyć górny nagłówek tabeli), użyj znacznika . Nagłówki tabel muszą być umieszczone w elemencie , Na przykład:

   Główna zawartość (treść) tabeli musi znajdować się wewnątrz elementu

   (w tabeli może być kilka takich bloków). Aby logicznie pogrupować wiersze na dole tabeli (czyli stworzyć „stopkę” tabeli), użyj znacznika (w jednej tabeli dozwolony jest nie więcej niż jeden tag ). W kodzie źródłowym tag umieszczony przed tagiem . Oprócz logicznego grupowania, jest to jeden z powodów stosowania elementów I polega na tym, że jeśli tabela jest zbyt długa, aby wyświetlić ją na ekranie (lub wydrukować) od razu, przeglądarka wyświetli również nagłówek ( ) i ostatnia linia ( ), gdy użytkownik zacznie przewijać tabelę.

   Przykład: Tagi

   , I

   • Spróbuj sam "

   • Spróbuj sam "

   To jest nagłówek tabeli

   Komórka dwuliniowa	Komórka 1	Komórka 2
	Komórka 3	Komórka 4

   Tagi do grupowania elementów tabeli

   Tagi służą do grupowania elementów tabeli

   Nagłówek 1	Nagłówek 2< /th>

   To jest nagłówek tabeli
To jest stopka tabeli
Komórka 1	Komórka 2	Komórka 3	Komórka 4

   Mimo, że jesteśmy przed

   (w skrócie od angielskiego „dane tabeli” - dane tabeli), z których każdy określa osobną komórkę w tym wierszu. Wewnątrz elementu	umieszczasz treść (tekst, liczby, obrazy itp.) wyświetlaną w tej komórce. Koniec linii jest oznaczony znacznikiem zamykającym
   (w skrócie od angielskiego „table head” – nagłówek tabeli) – opcjonalny element tabeli, którego używa się dokładnie tak samo jak elementu	, jednak jego celem jest utworzenie nagłówka wiersza lub kolumny. Zazwyczaj element	umieszczony w pierwszym rzędzie tabeli. Przeglądarki wyświetlają tekst w elemencie	pogrubioną czcionką i wyśrodkuj ją względem komórki. Zastosowanie w kodzie elementu	pomaga osobom korzystającym z programów czytników ekranu, a także poprawia wydajność indeksowania tabel przez wyszukiwarki. Rozważmy prostą tabelę składającą się z trzech wierszy i trzech kolumn, przy czym komórki w pierwszym wierszu stanowią nagłówki odpowiednich kolumn. Domyślnie tabele są zwykle wyświetlane bez obramowania: Przykład: prosta tabela HTML Spróbuj sam " Nagłówek 1 Nagłówek 2 Nagłówek 3 Komórka 2x1 Komórka 2x2 Komórka 2x3 Komórka 3x1 Komórka 3x2 Komórka 3x3 Krawędź stołu Wiemy już, że domyślnie tabele wyświetlane są bez obramowania. Aby dodać obramowanie wokół tabeli, musisz określić w dokumencie kilka prostych reguł arkusza stylów. Nieruchomość granica steruje wyświetlaniem linii siatki tabeli, a także ustawia grubość obramowania wokół tabeli w pikselach. Wokół tabeli i pomiędzy komórkami pojawi się obramowanie. Dodajmy ramkę o grubości jednego piksela do już utworzonej tabeli ustawiając właściwość granica dla wszystkich elementów tabeli, na przykład tak: Przykład: zastosowanie właściwości granica Spróbuj sam " Nagłówek 1 Nagłówek 2 Nagłówek 3 Komórka 2x1 Komórka 2x2 Komórka 2x3 Komórka 3x1 Komórka 3x2 Komórka 3x3 Pojedyncza rama do stołu Domyślnie sąsiednie komórki tabeli będą miały własne obramowanie. W rezultacie powstaje coś w rodzaju „podwójnej klatki”, jak widać w powyższym przykładzie. Aby pozbyć się „podwójnej ramki”, dodaj właściwość CSS załamanie granicy do arkusza stylów: Przykład: zastosowanie właściwości załamanie granicy Spróbuj sam " Nagłówek 1 Nagłówek 2 Nagłówek 3 Komórka 2x1 Komórka 2x2 Komórka 2x3 Komórka 3x1 Komórka 3x2 Komórka 3x3 Pola tabeli i interwały Domyślnie rozmiar komórek tabeli dostosowuje się do ich zawartości, czasami jednak konieczne jest pozostawienie niewielkiego wypełnienia wokół danych tabeli. Ponieważ odstępy i marginesy są elementami prezentacji danych, przestrzeń ta jest dostosowywana za pomocą arkuszy stylów CSS. Pole komórki ( wyściółka) to odległość między zawartością komórki a jej krawędzią (obramowaniem). Aby go dodać, skorzystaj z właściwości wyściółka do elementu	Lub	. Interwał komórki ( odstępy graniczne) to odległość między nimi (	Lub	). Najpierw przypisz wartość oddzielny nieruchomość załamanie granicy element , a następnie ustaw odległość między komórkami, zmieniając wartość parametru odstępy graniczne. Wcześniej za pola i odstępy między komórkami odpowiadały atrybuty wyściółka komórkowa I odstępy między komórkami element , ale zostały one przestarzałe w specyfikacji HTML5. Przykład użycia wyściółka I odstępy graniczne: Przykład: zastosowanie właściwości wyściółka I odstępy graniczne Spróbuj sam " Komórka 1 Komórka 2 Komórka 3 Komórka 4 Szerokość stołu Szerokość zajmowaną przez tabelę w oknie przeglądarki można określić za pomocą właściwości szerokość CSS w pikselach lub procentach. Określenie szerokości tabeli w pikselach pozwala określić jej dokładną szerokość. Stosunek procentowy pozwala na uelastycznienie stołu, tj. będzie się „rozciągać” lub „kurczyć” w zależności od tego, jakie inne elementy znajdują się na stronie i od rozmiaru okna przeglądarki. Oto przykład wykorzystania właściwości szerokość: Stół (szerokość: 100%;) Przykład: zastosowanie właściwości szerokość Spróbuj sam " Komórka 1 Komórka 2 Komórka 3 Komórka 4 Komórka 1 Komórka 2 Komórka 3 Komórka 4 Łączenie komórek (colspan i rowspan) Jedną z głównych cech struktury tabeli jest łączenie komórek, które polega na rozciąganiu komórki tak, aby obejmowała wiele wierszy lub kolumn. Pozwala to na tworzenie złożonych struktur tabel: nagłówków	lub komórki	są łączone poprzez dodanie atrybutów kolspan Lub rozpiętość rzędów. Atrybut kolspan określa liczbę komórek, na które dana komórka rozciąga się w poziomie, oraz rozpiętość rzędów- pionowo. Łączenie kolumn Łączenie kolumn odbywa się za pomocą atrybutu kolspan w elementach	Lub	— komórka rozciąga się w prawo, obejmując kolejne kolumny. W poniższym przykładzie wartość atrybutu kolspan równa się 2, co oznacza, że ​​komórka musi obejmować dwie kolumny. Przykład: zastosowanie atrybutu kolspan Spróbuj sam " kolspan="2">Komórka z dwiema kolumnami Komórka 1 Komórka 2 Komórka 3 Komórka 4 Łączenie ciągów Ciągi łączone za pomocą atrybutu rozpiętość rzędów, zachowują się dokładnie tak samo jak kolumny scalone, z tą różnicą, że zakres komórek jest określony od góry do dołu i obejmuje wiele wierszy. Ten przykład rozciąga pierwszą komórkę tabeli w dół o dwa wiersze: Przykład: zastosowanie atrybutu rozpiętość rzędów Spróbuj sam " Komórka dwuliniowa Komórka 1 Komórka 2 Komórka 3 Komórka 4 rozpiętość rzędów="2">Komórka z dwiema liniami Komórka 1 Komórka 2 Komórka 3 Komórka 4 Tytuł tabeli Sparowany tag służy do tworzenia tytułu lub podpisu tabeli

   Jeśli tabela ma dwa znaczniki TR, to ma dwa wiersze.
   Jeśli w linii znajdują się trzy tagi TD,	potem w nim	trzy kolumny.

   Nagłówki kolumn tabeli - tag<ТН>

   Nagłówki kolumn i wierszy tabeli ustawia się za pomocą znacznika nagłówka<ТН>(Nagłówek tabeli, tytuł tabeli). Te tagi są podobne<ТD>. Różnica polega na tym, że tekst jest zawarty pomiędzy tagami<ТН>, jest automatycznie zapisywane pogrubioną czcionką i domyślnie umieszczane na środku komórki. Możesz anulować centrowanie i wyrównać tekst do lewej lub prawej strony. Jeśli użyjesz<ТD>z tagiem<В>i atrybut<АLIGN=center>, tekst będzie również wyglądał jak tytuł. Należy jednak pamiętać, że nie wszystkie przeglądarki obsługują pogrubioną czcionkę w tabelach, dlatego lepiej jest ustawić nagłówki tabel za pomocą<ТН>.

   Nagłówek jest domyślnie wyśrodkowany	Nagłówek może łączyć kolumny
   Nagłówek można umieścić przed kolumnami	Tekst lub dane	Tekst lub dane
   Nagłówek może łączyć linie	Tekst lub dane	Tekst lub dane
   	Tekst lub dane	Tekst lub dane
   	Tekst lub dane	Tekst lub dane

   Korzystanie z nagłówków tabel - tag<САРТIОN>

   Etykietka umożliwia tworzenie nagłówków tabel. Domyślnie nagłówki są wyśrodkowane i umieszczone powyżej (<САРТION АLIGN=top>) lub pod stołem (<САРТION ALIGN=bottom>). Tytuł może składać się z dowolnego tekstu i obrazów. Tekst zostanie podzielony na linie odpowiadające szerokości tabeli. Czasem tag<САРТION>używany do podpisania zdjęcia. Aby to zrobić, wystarczy opisać tabelę bez granic.

   Nagłówek nad tabelą

   Tekst lub dane

   Tekst lub dane

   Tekst lub dane

   Tekst lub dane

   Nagłówek pod tabelą

   Tekst lub dane

   Tekst lub dane

   Tekst lub dane

   Atrybut NOWRAP

   Zwykle każdy tekst, który nie mieści się w jednym wierszu komórki tabeli, jest przenoszony do następnego wiersza. Jednakże w przypadku używania atrybutu NOWRAP ze znacznikami<ТН>Lub<ТD>Długość komórki jest rozszerzana tak, aby zawarty w niej tekst zmieścił się w jednej linii.

   Atrybut COLSPAN

   Tagi<ТD>I<ТН>modyfikowane za pomocą atrybutu COLSPAN (Rozpiętość kolumny, połączenie kolumny). Jeśli chcesz, aby komórka była szersza niż góra lub dół, możesz użyć atrybutu COLSPAN, aby rozciągnąć ją na dowolną liczbę zwykłych komórek.

   Jeśli chcesz, aby jakakolwiek komórka była szersza niż góra lub dół,	możesz użyć atrybutu COLSPAN=2,
   rozciągnąć go na dowolną liczbę regularnych komórek.

   Atrybut ROWSPAN

   Atrybut ROWSPAN używany w tagach<ТD>I<ТН>, jest podobny do atrybutu COLSPAN=, z tą różnicą, że określa liczbę linii, na które rozciągana jest komórka. Jeśli w atrybucie ROWSPAN=s podano liczbę większą niż jeden, wówczas pod rozciągniętą komórką musi znajdować się odpowiednia liczba wierszy. Nie można go umieścić na dole stołu.

   Atrybut WIDTH

   Atrybut WIDTH jest używany w dwóch przypadkach. Możesz umieścić to w tagu<ТАВLЕ>aby nadać szerokość całej tabeli, lub mogą być użyte w tagach<ТD>Lub<ТН>aby ustawić szerokość komórki lub grupy komórek. Szerokość można określić w pikselach lub procentach. Na przykład, jeśli ustawisz w tagu<ТАВLЕ>WIDTH=250, otrzymasz tabelę o szerokości 250 pikseli, niezależnie od rozmiaru strony na monitorze. Przy ustawieniu WIDТН=50% w tagu<ТАВLЕ>tabela zajmie połowę szerokości strony przy dowolnym rozmiarze obrazu na ekranie. Dlatego też, określając szerokość tabeli w procentach, pamiętaj, że jeśli użytkownik ma wąski obszar roboczy, Twoja strona może wyglądać nieco dziwnie. Jeśli używasz pikseli, a tabela jest szersza niż obszar wyświetlania, na dole pojawi się pasek przewijania umożliwiający poruszanie się po stronie w lewo i w prawo. W zależności od wykonywanych zadań przydatna może być każda metoda ustawiania szerokości stołu.

   Tekst lub dane - szerokość 100%

   Lub
   

   Tekst lub dane - szerokość 50%

   Lub
   

   Tekst lub dane - szerokość 200 pikseli

   Lub
   

   Tekst lub dane - szerokość 100 pikseli

   Stosowanie pustych komórek

   Jeśli komórka nie zawiera danych, nie będzie miała obramowań. Jeśli chcesz, aby komórka miała obramowanie, ale nie zawierała treści, musisz umieścić w niej coś, co nie będzie widoczne podczas przeglądania. Możesz użyć pustego ciągu<ВR>. Można nawet określić puste kolumny, określając ich szerokość w pikselach lub jednostkach względnych i nie wprowadzając żadnych danych do powstałych komórek. Narzędzie to może być przydatne podczas umieszczania tekstu i grafiki na stronie.

   Atrybut CELLADDING

   Atrybut ten określa szerokość pustej przestrzeni pomiędzy zawartością komórki a jej krawędziami, czyli ustawia marginesy wewnątrz komórki.

   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane	Tekst lub dane	Tekst lub dane

   
   

   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane	Tekst lub dane	Tekst lub dane

   Atrybuty ALIGN i VALIGN

   Tagi<ТR>, <ТD>I<ТН>można modyfikować za pomocą atrybutów ALIGN i VALIGN. Atrybut ALIGN określa, czy tekst i grafika są wyrównane w poziomie, czyli do lewej, do prawej, czy też wyśrodkowane. Wyrównanie poziome można określić na kilka sposobów:

   ALIGN=krwawienie w lewo dociska zawartość komórki blisko lewej krawędzi.

   WYRÓWNIJ=w lewo Wyrównuje zawartość komórki do lewej strony, biorąc pod uwagę wcięcie określone przez atrybut CELLPADDING.

   WYRÓWNIJ=środek Wyśrodkowuje zawartość komórki.

   WYRÓWNANIE = prawda Wyrównuje zawartość komórki do prawej strony, biorąc pod uwagę wcięcie określone przez atrybut CELLPADDING.

   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane	Tekst lub dane	Tekst lub dane

   Atrybut VALIGN wyrównuje w pionie tekst i grafikę w komórce. Wyrównanie w pionie można ustawić na kilka sposobów:

   VALIGN=góra Wyrównuje zawartość komórki do jej górnej krawędzi.

   VALIGN=środek Wyśrodkowuje zawartość komórki w pionie.

   VALIGN=dół Wyrównuje zawartość komórki do jej dolnej krawędzi.

   Atrybut VALIGN wyrównuje w pionie tekst i grafikę w komórce.	szczyt,	środek,	spód.
   VALIGN=góra Wyrównuje zawartość komórki do jej górnej krawędzi.	szczyt,	szczyt,	szczyt.
   VALIGN=middle Wyśrodkowuje zawartość komórki w pionie.	środek,	środek,	środek.
   VALIGN=bottom Wyrównuje zawartość komórki do jej dolnej krawędzi.	spód,	spód,	spód.

   Atrybut BORDER

   W tagu<ТАВLЕ>często decydują o tym, jak będą wyglądać obramowania, czyli linie otaczające komórki tabeli i samą tabelę. Jeśli nie określisz ramki, otrzymasz tabelę bez linii, ale zostanie dla nich przydzielone miejsce. Ten sam wynik można osiągnąć poprzez ustawienie<ТАВLЕ ВОRDER=0>. Czasami chcesz pogrubić obramowanie, aby lepiej się wyróżniało. Możesz ustawić wyjątkowo odważne obramowania, aby przyciągnąć uwagę do obrazu lub tekstu. Tworząc tabele zagnieżdżone, trzeba dla różnych tabel wykonać obramowania o różnej grubości, aby ułatwić ich rozróżnienie.

   Atrybut CELLSPACING

   Atrybut CELLSPACING określa szerokość odstępów między komórkami w pikselach. Jeśli ten atrybut nie zostanie określony, wartością domyślną są dwa piksele. Korzystając z atrybutu CELLSPACING=, możesz umieszczać tekst i grafikę tam, gdzie ich potrzebujesz. Jeśli chcesz pozostawić puste miejsce, możesz wpisać spację w komórce.

   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane	Tekst lub dane	Tekst lub dane

   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane	Tekst lub dane	Tekst lub dane

   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane		Tekst lub dane

   Atrybut BGCOLOR

   Atrybut ten umożliwia ustawienie koloru tła. W zależności od tego, z jakim tagiem (TABLE, TR, TD) jest używany, kolor tła można ustawić dla całej tabeli, dla wiersza lub dla pojedynczej komórki. Wartością tego atrybutu jest kod RGB lub standardowa nazwa koloru.

   Tekst lub dane	Tekst lub dane	Tekst lub dane
   Tekst lub dane	Tekst lub dane	Tekst lub dane

   Atrybut TŁA

   Ten atrybut określa obraz tła dla tabel. Dotyczy tagów TABLE i TD. Jego wartością jest adres URL pliku obrazu tła. Użycie tego atrybutu omówiono poniżej.

   Wykorzystanie tabel w projektowaniu strony

   Dobrą rzeczą w tabelach jest to, że jeśli chcesz, możesz sprawić, że ich obramowania będą niewidoczne. Pozwala to na użycie tagu<ТАВLЕ>pięknie umieść tekst i grafikę na stronie. Żegnaj tagu<ТАВLЕ>pozostaje jedynym potężnym narzędziem do formatowania w HTML. Projektanci stron internetowych mają teraz prawie taką samą swobodę w zakresie wykorzystania białych znaków, jak projektanci stron drukowanych. Tabele to najlepszy sposób na odejście od hierarchicznego umieszczania tekstu na stronach internetowych.

   Jeśli przeglądarka obsługuje tabele, zazwyczaj poprawnie wyświetli najciekawsze efekty uzyskane przy ich użyciu

   Uralski Państwowy Uniwersytet Pedagogiczny Powitanie! Szkolenie „Podstawy masteringu WEB”

   
   

   Tworzenie kolorowych stołów

   Niektóre przeglądarki umożliwiają wyświetlanie kolorów. Istnieje kilka sposobów kolorowania tabeli, głównie w zależności od używanej przeglądarki.

   Kolorowe obramowania w Netscape Navigatorze. Nie tylko możesz otoczyć stół piękną obwódką, ale możesz także ustawić go na kolor inny niż kolory tekstu i tła. Utwórz prosty szary GIF (lub dowolny GIF, który chcesz mieć jako tło) i zdefiniuj go w tagu<ВODY>jako tło strony. Następnie ustaw kolor tła strony. W rezultacie Twój tag<ВОDY>będzie wyglądać mniej więcej tak:

   Utworzyłeś podwójne tło - GIF i określony kolor. W rezultacie kolor tła będzie widoczny na wszystkich krawędziach tabeli i liniach poziomych (<НR>). Niezależnie od tego, czy Twój GIF w tle jest szary, czy nie, kolorowe linie i obramowania tabeli będą wyraźnie widoczne. Jeśli GIF w tle nie jest zbyt skomplikowany, czas ładowania strony nieznacznie się wydłuży.

   .

   Każdy wiersz tabeli jest umieszczony w elemencie ... .

   Komórka nagłówka tabeli jest umieszczana w elemencie ...(treść jest wyświetlana pogrubioną czcionką i wyśrodkowana).

   Każda komórka danych tabeli jest umieszczona w elemencie ... .

   Nazwa tabeli, jeśli jest taka potrzeba, umieszczana jest wewnątrz elementu ...(opcjonalny element tabeli). Pamiętaj, że jeśli planujesz użyć tego elementu w swojej tabeli, to powinien on znajdować się bezpośrednio po elemencie w dokumencie

   .. .

   Przejdźmy do praktycznej części tworzenia tabeli:

   granica = „1” >

   Podstawowy stół

   Komórka nagłówka 1	Komórka nagłówkowa 2	Komórka nagłówkowa 3
   Komórka danych 1 Linia 2	Komórka danych 2 Linia 2	Komórka danych 3 Linia 2
   Komórka danych 1 Linia 3	Komórka danych 2 Linia 3	Komórka danych 3 Linia 3

   Dla przejrzystości dodaliśmy do tej tabeli atrybut border o wartości „1”, który określa, że ​​wokół komórek tabeli powinna być wyświetlana ramka. Atrybut border praktycznie nie jest używany w HTML; w tym przypadku użycie CSS byłoby lepsze i zapewniłoby bardziej elastyczne opcje. W ramach nauki języka HTML dowiemy się, jak prawidłowo tworzyć tabele i podczas nauki CSS3 w artykule „” dowiemy się, jak profesjonalnie je stylizować.

   Wynik naszego przykładu:

   Łączenie kolumn

   Łączenie kolumn w elementach (komórka danych) lub (komórka nagłówka) można wykonać za pomocą atrybutu colspan (w tym przypadku komórka jest rozciągana w prawo o określoną liczbę komórek).

   granica = „1” >

   Podstawowy stół

   Komórka nagłówka 1		Komórka nagłówkowa 2
   Komórka danych 1 Linia 2	Komórka danych 2 Linia 2	Komórka danych 3 Linia 2
   Komórka danych 1 Linia 3	Komórka danych 2 Linia 3	Komórka danych 3 Linia 3

   Wynik naszego przykładu:

   Łączenie ciągów

   Łączenie ciągów w elementach Lub dozwolone przy użyciu atrybutu rowspan (zakres komórek ustawiany jest od góry do dołu i obejmuje kilka wierszy - komórka jest rozciągana w dół).

   granica = „1” >

   Podstawowy stół

   Komórka nagłówka 1		Komórka nagłówkowa 2
   rozpiętość wierszy = "2" > Komórka danych 1 Linia 2	Komórka danych 2 Linia 2	Komórka danych 2 Linia 3
   Komórka danych 2 Linia 3	Komórka danych 3 Linia 3

   Wynik naszego przykładu:

   Właściwości kolumny

   Przykład użycia atrybutu span na poszczególnych kolumnach tabeli:

   span = "2" style = "kolor tła: khaki" >

   Nr wniosku	Praca	cena, pocierać.	Całkowity
   31337	Czytanie na głos	1 000	1 000

   Wynik naszego przykładu:

   Jeśli chcesz nadać styl tylko jednej kolumnie, po prostu określ atrybut span wewnątrz elementu , a nie wewnątrz elementu :

   Nr wniosku	Praca	cena, pocierać.	Komisja, pocierać.
   31337	Czytanie na głos	1 000	150

   Wynik naszego przykładu:

   Podział tabeli na części

   Do podziału tabeli na części służą następujące znaczniki HTML:

   • Etykietka używany do przechowywania nagłówka grupy w tabeli („nagłówek tabeli”, nie mylić z nagłówkami).
   • Etykietka używany do przechowywania „stopki” tabeli.
   • Etykietka używany do przechowywania „treści” tabeli (treści).

   Element należy użyć tylko raz na tabelę w następującym kontekście: jako część elementu

   (jako element podrzędny (zagnieżdżony)), jeśli istnieją tagi (definiuje grupę kolumn w tabeli) powinno nastąpić Po te elementy, ale zanim niż jakikolwiek tag , I . Poza tym element musi mieć jeden lub więcej tagów wewnątrz (kontener do tworzenia ciągu znaków).

   Elementy

   , I nie mają wpływu na domyślny układ tabeli. Jednak za pomocą CSS możesz stylizować te elementy według własnego uznania.

   (nazwa tabeli) i

   style="kolor-tła:srebrny" > style="kolor tła:koral" > style="kolor tła: khaki" >

   Praca	Cena
   Suma	3 000
   Czytanie na głos	1 000
   Gra na wiertarce udarowej	2 000

   Wynik naszego przykładu.