Ustvarjanje tabele v HTML-ju

V tabelah je primerna postavitev podatkov, ki se med seboj združujejo z nekaterimi odvisnostmi. Za izdelavo tabel v HTML se uporabljajo posebne oznake HTML. Z njihovo pomočjo lahko sestavite tabelo poljubne kompleksnosti. Poleg tega je praksa tabelne postavitve zelo pogosta, kar vam omogoča, da lepo in priročno postavite elemente na spletno stran.

Ustvarjanje prve tabele

Kot običajno odprite urejevalnik besedila, ustvarite prazno datoteko HTML in prilepite naslednjo kodo med oznake:

  1 
  2 
  3 
  4 
  5 
  6 

Shranite dokument. Odprite datoteko. Če kjerkoli ni nobene tipkarske napake, bo brskalnik ustvaril naslednji rezultat:

Razvrstimo opisano kodo:

1. Oznake objavite brskalniku, da je potrebno ustvariti tabelo.
2. Atribut border definira meje tabele, parameter 1 pa njihovo debelino v pikslih.
3. S pomočjo nastavite vrstice tabele.
4. Število oznak določa število stolpcev.
5. Številke med oznakami so vsebine celic.

Če želite pustiti celico prazno, v njej napišite nekaj nevidnega znaka, na primer presledek, in ga ne pustite brez vsebine. To je potrebno za pravilen prikaz prazne celice pri vseh brskalnikih. Nekateri od njih lahko izkrivijo rezultat, če to ni storjeno.

Vsebina celic je lahko popolnoma vsak element HTML-a: številke, besedilo, slike, same tabele in celo celo stran. Glavna stvar tukaj je ne samo vedeti, kako narediti tabelo v HTML-ju, temveč tudi opazovati gnezdenje oznak.

Nastavi velikost

Zgornji primer je dal majhno mizico, neprijetno za vizualno zaznavo. Velikost tabele lahko nastavite na zahtevane parametre z dvema atributoma:

1. width - določa širino.
2. height - določa višino.

Vrednosti teh atributov so lahko piksli ali odstotki. Nekateri brskalniki ne delujejo pravilno z odstotki glede na atribut višine. Zato morate svojo kodo preizkusiti v več najpogostejših:

• IE.
• Mozilla Firefox.
• Opera.
• Konqueror.
• Safari.

Če je zaslon napačen, je potrebno spremeniti vrednost višine tabele v odstotkih za vrednost v slikovnih pikah. Izbira v prid slikovnih pik je možna tudi zato, ker lahko obiskovalec vašega spletnega mesta pride iz naprave, ki ima majhen monitor (mobilni telefon). Besedilo v tabeli HTML na monitorju telefona bo prilagojeno njegovi velikosti. Če so določeni odstotki, bo tabela tako majhna, da je ne bo mogoče prebrati.

Z atributi širina in višina nastavimo dimenzije: širina tabele HTML je 300, višina pa 200 pik:

  1 
  2 
  3 
  4 
  5 
  6 

Zato bo brskalnik prikazal tabelo z potrebnimi dimenzijami:

Položaj

Namen tega dejanja je, da na spletni strani poiščete vsebino celic in lokacijo tabele. Vendar pa je tehnologija HTML v tabelah, ki se nahajajo na spletni strani, omejena na njihovo levo (privzeto), v sredini in na desni z atributom poravnave in vrednostmi, ki so za to potrebne:

Skladnja je:

  ... 

V prihodnosti se boste pri učenju CSS tehnologije naučili postavljanja elementov spletnih dokumentov navpično.

Če želite nastaviti lokacijo vsebine celice, se za oznako uporabijo isti atributi z enakimi vrednostmi. :

  ...   ... 
  vsebino celic 

Postavite tabelo v desno in poravnajte vsebino njenih celic v sredini:

  1 
  2 
  3 
  4 
  5 
  6 

Rezultat mora biti:

Ujemanje nizov

Za izdelavo več celic vrstice v eni celici se uporablja atribut colspan z vrednostjo, ki je enaka številu celic, ki jih je treba združiti. V oznaki so odstranjene naslednje oznake. skupaj z njihovo vsebino. Število oznak za brisanje enako vrednosti atributa colspan minus ena.

Upoštevajte to pravilo z zgledom. Recimo, da morate v sredini strani ustvariti tabelo s poljubnimi številkami velikosti 4 stolpcev in 3 vrstic. Nato vodoravno združite celice 2 in 3 v drugo vrstico, da brskalnik ustvari naslednji rezultat:

Naslednja koda bo izvajala to tabelo v spletnem dokumentu:

  11 
  20 
  4 
  14 
  58 
  36 
  80 
  19 
  10 
  15 
  29 

Opazite kodo HTML v tabeli, kjer sta obe celici združeni:

  58   36   80 

Ker je vrednost parametra colspan 2, je bila izbrisana 1 oznaka. sledi (2 - 1 = 1) z vso vsebino. Če bi bilo potrebno združiti tri celice, bi se odstranile 2 oznaki. .

Pridružite se stolpcem

Navpične celice so kombinirane z atributom rowspan. Numerična vrednost le-te določa število celic, ki jih je treba rezati navpično. Ta tema predstavlja največje težave za študente.

Naslednja metoda je najlažje razumeti: ustvarite tabelo in številke celic z različnimi številkami. Na primer:

Koda tabele bo naslednja:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 

Znebimo se dvomestnih številk s kombiniranjem stolpcev s številkami 6 in 10, 7 in 11, 8 in 12. Pustite številke v navpično kombiniranih celicah: 6, 7 in 8.

Združite 6 in 10. V oznaki ki vsebuje številko 6, predpiše: in strukturo 10 izbrisati. Podobno morate storiti za preostale pare številk. Zato se koda spremeni na naslednji način:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 

Brskalnik mora izdelati tabelo, ki jo potrebujemo:

Nasvet: dokler ne dosežete samodejnega dejanja, ko združujete stolpce, uporabite to metodo z uporabo številk, ki jih zamenjate z želenimi podatki.

Vsebina celic

Kot smo že omenili, so elementi celic lahko kakršni koli elementi HTML. V tabeli bo na primer primerna uporaba enostavne tabele sadja in njihovih cvetov:

Kot lahko vidite, celice v tej tabeli vsebujejo besedilo, slike in barvo ozadja. Elementi celic so uporabni in vse oznake HTML bodo delovale. Tabela lahko vsebuje tudi hiperpovezave v vseh njihovih oblikah (besedilo, slikovne povezave itd.).

Posebej je potrebno določiti polnjenje celic z barvo: ker so prazne, ne vsebujejo podatkov, morate registrirati prazen prostor: . V tem primeru širina celice morda ne ustreza zahtevani širini. In skoraj vedno se zgodi. V tem primeru na to oznako Atribut širine se uporablja z zahtevano vrednostjo: .

Za pravilen prikaz barve, uporabljene za besedilo ali ozadje, v HTML-ju obstajajo ti varne barve. Tabelo njihovih kod najdete na številnih spletnih mestih. Varna barva HTML-ja ne pomeni, da lahko škoduje računalniku, ampak pomeni, da bo prikazana na konzoli obiskovalca na vašo prihodnjo stran tako, kot ste nameravali, brez popačenja.

Glave tabel

Pogosto obstaja potreba po naslovni tabeli. To naredite s posebno oznako para. . Nahaja se takoj za oznako.

V brskalniku bo ta tabela videti tako:

Poleg imen tabel uporabite imena stolpcev ali vrstic z oznako. . Besedilo v tabeli HTML, ki je med temi oznakami, bo prikazano krepko. Za to oznako uporabimo atribut za združevanje horizontalnih celic kolone. Pretvorimo zgornjo tabelo kot primer in spreminjamo kodo:

  Tabela s številkami 
  Tudi 
  Odd 
  2 
  1 
  4 
  3 
  6 
  5 

Zato bo brskalnik prikazal glavo z naslovom stolpca:

Če želite ustvariti stranske glave, ko so elementi določenega stolpca, je oznaka takoj za oznako pred prvo oznako .

Spletni dokument postavitve tabele

To je najpogostejši način za ustvarjanje spletnih strani. Bistvo postavitve tabele je, da elemente na stran mesta postavite v celice s pomočjo tabel. Istočasno so sprejeti ločeni deli mesta (noga, glava, telo), ki so lahko tudi celice. V praksi je postavitev tabele v večini primerov izvedena po naslednjem algoritmu:

• spletni oblikovalec pripravi postavitev spletnega mesta;
• z grafičnimi urejevalniki ali drugo programsko opremo so posamezni elementi postavitve (gumbi, slike) odrezani in neodvisni;
• spletni programer ustvari tabelo elementov spletnega mesta, kot jo je načrtoval oblikovalec, pri čemer pusti celice prazne;
• spletni programer ustvarja sliko spletnega mesta iz izrezanih elementov z uporabo jezikov označevanja in spletnega programiranja, spremlja funkcionalnost in delovanje vsakega od njih.

Postavitev tabele spletnega mesta vam omogoča, da lepo in logično zgradite vsebino (vsebino), ki bo obiskovalcu zagotovila obiskovalce. Vendar pa ima dva minusa:

1. Zahteva veliko količino kode.
2. Zaradi tega je mesto težje in zmanjšuje hitrost obremenitve.

Ampak včasih, za uskladitev s tehnično nalogo s strogim pozicioniranjem elementov, postavitev HTML v tabeli postane edina rešitev.