Tabele u HTML-u su toliko funkcionalne da ih možete koristiti za raspored cijelih web stranica (čitanje). Sada ćemo govoriti o umetanju jednostavnih HTML tabela u web stranicu, analizirajući samo oznaku, ali ne dodirujući dizajn, jer je bolje ukrasiti tabele koristeći CSS stilove.

Tabelarne oznake i atributi

Evo osnovnih elemenata koji su vam potrebni za kreiranje tabela:

• - kontejner unutar kojeg se nalazi stol (isto kao
  za označene ili
  za numerisane liste).
  1. granica- atribut koji određuje debljinu okvira. Umjesto toga je bolje koristiti CSS svojstvo granice.

  specificira potpis tabele. Ne morate koristiti kontejner, ali ako ipak odlučite da naslovite tabelu, stavite je odmah iza oznake , izvan ćelija i redova.

  - upareni tag koji sadrži red tabele (ćelije koje se nalaze na istom horizontalnom nivou).

  , u njemu će biti toliko ćelija: jedna oznaka - jedna ćelija.

  omogućava vam da grupišete kolone, brzo i bez začepljenja koda, dodijelite ih opšte karakteristike. Koristeći kontejner, možete odvojiti logičke dijelove tabele jedan od drugog. Stavlja se iza oznake

  , ako ga nema, onda poslije .

  koristi se u istu svrhu kao . može sadržavati , ali ne i obrnuto.

  span- atribut koji specificira broj stupaca na koje se primjenjuju svojstva kontejnera

  .

  , I - kontejneri koji vam omogućavaju da tablicu podijelite na gornji (naslovi), glavni (tijelo) i donji (završni) dio. U HTML tabeli, redosled ovih oznaka je isti kao i redosled kontejnera , I

  Alati za izradu web stranica

  Svrha	Alat
Označavanje	HTML	XHTML
Registracija	CSS
Razvoj	PHP	Python

  U pretraživaču će dokument izgledati ovako:

  Hajde da shvatimo koje linije koda su odgovorne za šta.

  • - otvori stol, dajući mu debljinu okvira.
    - naslovili su ga.
    - otvorio liniju.
    - kreirao ćeliju s dizajnom zaglavlja.
    - kreirao drugu ćeliju zaglavlja u redu. Parametar colspan je pokazao da ova ćelija treba da se prostire na dvije horizontalno.
    - zatvorio liniju. Preostale linije su kreirane na isti način.
    - dodao je drugi red tabele sa redovnim ćelijama umesto zaglavlja. Naredni redovi i ćelije umetnuti su na sličan način.

    Alati za izradu web stranica

    Svrha	Alat
  Označavanje	HTML	XHTML

    - zatvorio sto.

  Zadatak

  Kreirajte tabelu i odredite njene parametre (margine i rastojanje između ćelija) kroz stilove.

  Rješenje

  Tabela se sastoji od redova i kolona ćelija koje mogu sadržavati tekst i slike. Da biste dodali tabelu na web stranicu, koristite oznaku

  . Ovaj element služi kao kontejner za elemente koji definiraju sadržaj tabele. Svaka tabela se sastoji od redova i ćelija, koje se određuju pomoću oznaka I

  Izvorni kod HTML tabele

  I

  . Tabela mora sadržavati najmanje jednu ćeliju (primjer 1). Dozvoljeno umjesto oznake	koristiti oznaku	. Tekst u ćeliji stiliziran oznakom	, pretraživač prikazuje podebljanim fontom i poravnato je sa središtem ćelije. Inače, razlike između ćelija stvaraju se putem oznaka	I	br. Primjer 1: Kreiranje tabele HTML5 IE Cr Op Sa Fx Ćelija 1 Ćelija 2 Ćelija 3 Ćelija 4 Redoslijed ćelija i njihov izgled prikazan je na Sl. 1. Rice. 1. Rezultat kreiranja tabele sa četiri ćelije atribut granične oznake dozvoljeno je samo dodavanje sa praznom vrijednošću ( ) ili jednako 1. Sve ostale vrijednosti nisu potvrđene. Da kontrolišete margine unutar ćelija, koristite svojstvo stila dopune koje se dodaje selektoru td. Udaljenost između ćelija se mijenja svojstvom razmaka granica (primjer 2) koje je dodato selektoru tablice IE pretraživač ga razumije samo od verzije 8.0. Primjer 2: Margine unutar ćelija HTML5 CSS 2.1 IE Cr Op Sa Fx Naslov 1 Naslov 2 Ćelija 3 Ćelija 4 Tabela sa poljima i rastojanjem između ćelija prikazana je na Sl. 2. Sličan rezultat može se postići korištenjem bijelog okvira oko ćelija. Rice. 2. Polja u ćelijama tabele Zahvaljujući raznovrsnosti stolova, veliki broj parametara koji kontrolišu njihov izgled, tabele su odavno postale definitivni standard za izgled web stranica. Tabela sa nevidljivim rubom se pojavljuje kao da modularna mreža, u čije blokove je zgodno postaviti elemente web stranice. Međutim, to nije u potpunosti pravi pristup, jer svi HTML objekat definisano za svoje potrebe i ako se ne koristi za svoju namenu, i svuda, to znači da nema alternative. Tako je bilo dugo vremena sve dok slojevi nisu zamijenili tabele u izgledu web stranice. To ne znači da se slojevi sada koriste cijelo vrijeme, ali trend se već jasno pojavio - tabele se koriste za postavljanje tabelarnih podataka, a slojevi se koriste za izgled i dizajn. Kreiranje tabele Tabela se sastoji od redova i kolona ćelija koje mogu sadržavati tekst i slike. Tabele se obično koriste za organiziranje i predstavljanje podataka, ali tabele nisu ograničene na to. Koristeći tabele, zgodno je rasporediti raspored stranica tako što ćete fragmente teksta i slika rasporediti na željeni način. Da biste dodali tabelu na web stranicu, koristite oznaku . Ovaj element služi kao kontejner za elemente koji definiraju sadržaj tabele. Svaka tabela se sastoji od redova i ćelija, koje se određuju pomoću oznaka I Imajte na umu da kada spajate ćelije, broj elemenata u redu se mijenja. Na primjer, ako tabela ima 3 stupca sa ćelijama, a spojimo prvu i drugu ćeliju, onda sve unutar oznake definira ovu liniju bit će 2 elementa, prvi od njih će sadržavati atribut colspan="2". Primjer HTML tablice sa spajanjem ćelija Izvorni kod HTML tabele sa spojenim ćelijama . Tabela mora sadržavati najmanje jednu ćeliju (primjer 12.1). Dozvoljeno umjesto oznake koristiti oznaku . Tekst u ćeliji stiliziran oznakom , pretraživač prikazuje podebljanim fontom i poravnato je sa središtem ćelije. Inače, razlike između ćelija stvaraju se putem oznaka I br. Primjer 12.1. Kreiranje tabele Ćelija 1 Ćelija 2 Ćelija 3 Ćelija 4 Redoslijed ćelija i njihov izgled prikazan je na Sl. 12.1. Izvorni kod jednostavne HTML tabele Ćelija 1 Ćelija 2 Ćelija 3 Ćelija 4 Ćelija 5 Ćelija 6 Ćelija 7 Ćelija 8 Ćelija 9 HTML zaglavlja tabele Postoje 2 vrste ćelija u HTML tabelama. Tag definira ćeliju regularnog tipa. Ako ćelija djeluje kao zaglavlje, definira se pomoću . Primjer HTML tablice sa zaglavljem th Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Škoda Mercedes-AMG Mini Lamborghini Pametno Rolls-Royce Izvorni kod HTML tabele sa th zaglavljima Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Škoda Mercedes-AMG Mini Lamborghini Pametno Rolls-Royce Spajanje ćelija u HTML tabeli HTML tabele imaju mogućnost spajanja ćelija horizontalno i okomito. To spajanje ćelija horizontalno koristite atribut colspan=" X" , u ćeliji ili , gdje x To vertikalno spajanje ćelija koristite atribut rowspan=" X" , u ćeliji ili , gdje x- broj ćelija za spajanje. Ćelije se mogu spajati horizontalno i vertikalno u isto vrijeme. Da biste to učinili, koristite i atribute colspan i rowspan za željenu ćeliju: Tekst ćelije Nissan Model Oprema Dostupnost Nissan Qashqai VISIA + TEKNA + Nissan X-Trail ACENTA + CONNECTA - Zaglavlja i podnožja u HTML tabelama HTML tabele se mogu podeliti u 3 oblasti: zaglavlje, telo, footer. To se radi premotavanjem redova odabranog dijela tabele oznakama. definira područje zaglavlja, - područje podnožja, - glavni dio tabele. Podrazumevano, zaglavlja i podnožja nisu drugačije stilizovana (ovo se može uraditi preko CSS-a ako je potrebno), ali ih mogu koristiti pretraživači. Na primjer, kada se ispisuje tablica sa više stranica, zaglavlja i podnožja mogu biti duplicirani na svakoj odštampanoj stranici. Ispravan redosled postavljanja oznaka područja u HTML kod tabele je sledeći: prvo zaglavlje, zatim podnožje, a zatim telo. U ovom slučaju, glavni dio stranice će biti prikazan između zaglavlja i podnožja. Ako je potrebno, možete dodati potpis u tabelu. Da biste to učinili, koristite oznaku. Primjer HTML tablice sa zaglavljima i podnožjima Izvorni kod za tabelu sa zaglavljima i podnožjima Renault Sandero Stepway konfiguracije Karakteristično SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R Dostupnost + + + Snaga motora 0.9 (90 KS) 0.9 (90 KS) 1.5 (90 KS) Gorivo benzin benzin dizel Standard toksičnosti Euro 6 Euro 6 Euro 5 Kolone i grupe kolona HTML tabela se može podijeliti na kolone i grupe kolona pomoću oznaka i. Ova podjela vam omogućava da postavite stilove za tablicu koristeći minimalni broj CSS svojstva, čime se smanjuje količina koda tabele (umesto da definišete stilove za svaku ćeliju kolone, možete postaviti stilove za jednu ili više kolona odjednom). Oznake i nalaze se unutar oznake prije oznaka, AKP6 (EDC)	Prijenos

  ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENZIV 2E3C AL A	Karakteristično
1.5 (90 KS)	1.2 (115 KS)	1.5 (90 KS)	Snaga motora
dizel	benzin	dizel	Gorivo
Automatski mjenjač6 (EDC)	Automatski mjenjač6 (EDC)	Automatski mjenjač6 (EDC)	Prijenos

  Tabele u izgledu stranice stranice

  Na modernim web stranicama važno je da se stranice pravilno prikazuju i na računarima i na računarima mobilnih uređaja. Koristite tabele da napravite žičani okvir HTML stranice nije preporučljivo, jer je izgubljena sposobnost prilagođavanja sadržaja ekranima različite veličine(računari, pametni telefoni, tableti).

  Oznake grupa tabele najbolje se koriste unutar stranice za prikaz sadržaja u tabelarnom formatu.

  Postalo je popularno, web dizajneri su uglavnom koristili metodu rasporeda tablica i postigli vrlo dobre rezultate.

  Oznake koje se koriste za pravljenje tabele u html-u

  sto- obavezna oznaka koja otvara i zatvara tabelu
  natpis- opciona oznaka koja označava naslov tabele
  th- opcionu oznaku, čije otvaranje i zatvaranje sadrže naziv kolone. Obično se pojavljuje podebljano
  tr- obavezna oznaka koja otvara i zatvara liniju
  td- obavezna oznaka koja označava otvaranje i zatvaranje ćelije u nizu

  Primjer koda za jednostavnu tablicu

  Naziv tabele

  Stobets 1	Stobets 2
Tekst u prvoj ćeliji	Tekst u drugoj ćeliji

  Prikazaće se pretraživač

  Namjena tabela u html-u

  Lekcija o stolovima je veoma važna! Zahvaljujući tabelama, možete poredati ne samo tekst, već i slike, linkove i još mnogo toga. U tabeli možete odrediti pozadini(ili njegovu boju), udubljenje, širina, granica I drugi parametri to će joj dati lijepu izgled. Tabela - Vaš prvi korak ka razumijevanju web dizajn! Ranije su mnoge stranice bile u potpunosti postavljene kao tabele, odnosno sve što je korisnik vidio ( bočni meni, gornji meni, sadržaj) - bio je sadržaj ćelija velike tabele.
  S tim u vezi, pređimo direktno na atribute koji čine sto lijepim...

  Svojstva i parametri html tabela: uvlačenje, širina, boja pozadine, ivica (okvir)

  U table tag postoje sljedeći atributi:

  širina- širina stola. može biti u pikselima ili % širine ekrana.
  bgcolor- boja pozadine ćelija tabele
  pozadini- ispunjava pozadinu stola uzorkom
  granica- okvir i ivice u tabeli. Debljina je prikazana u pikselima
  cellpadding- dopuna u pikselima između sadržaja ćelije i njene unutrašnje granice
  Kao i prije, vrijednost atributa pišemo u navodnicima.

  Pogledajmo upotrebu ovih atributa koristeći primjer. Da bismo to učinili, napravimo tabelu (ali već bez izuzetno rijetko korištenih natpisa i tagova) i postavite parametar na atribut granica, širina (širina tabele, reda ili ćelije) I bgcolor (boja ćelije)

  Kao rezultat, sljedeća tabela će biti prikazana u pretraživaču:

  okvir- atribut koji označava okvir oko stola. Postoje sljedeće vrijednosti:

  Praznina - bez okvira,
  iznad - samo gornji okvir,
  ispod - samo donji okvir,
  bočne strane - samo gornji i donji okvir,
  vsides - samo lijevi i desni okviri,
  lhs - samo lijevi okvir,
  desno - samo desni okvir,
  kutija - sva četiri dijela okvira.

  pravila- atribut koji ukazuje na granice unutar tabele, između ćelija. Postoje sljedeće vrijednosti:

  Nema - nema granica između ćelija,
  grupe - granice samo između grupa redova i grupa kolona (o tome će biti riječi malo kasnije),
  redovi - granice samo između redova,
  cols - granice samo između stupaca,
  sve - prikazati sve ivice.

  Pogledajmo primjer koda

  Stobets 1	Stobets 2

  Rezultat

  Sada pokušajmo da kreiramo prelep sto. Da bismo to učinili, počnimo koristiti poravnanje stola. Da biste to učinili, postoje sljedeći već poznati parametri:

  poravnati- poravnanje stola. Može se postaviti lijevo (lijevo), desno (desno), u centru (centar)
  cellpacing- udaljenost između ćelija tabele. Navedeno u pikselima (zadano 0 piksela)
  cellpadding- dopuna u pikselima između sadržaja ćelije i njene unutrašnje granice (podrazumevano 0 piksela)
  Pogledajmo primjer

  Stobets 1	Stobets 2
Tekst u prvoj ćeliji prve kolone	Tekst u drugoj ćeliji druge kolone

  Pregledač će prikazati centriranu tabelu koja izgleda ovako:

  tr redove i td ćelije u HTML tabelama

  Da vas ponovo podsjetim da se tabele formiraju red po red (tr). Redovi (tr) već sadrže ćelije (td). Ako navedete parametar za string (tr), on će biti važeći za sve ćelije(td) u ovom redu, ako za određenu ćeliju, onda samo za nju. U gornjim primjerima, odredio sam boju za red, ovaj parametar je raspoređen u skladu sa svim ćelijama.

  Za tr i td oznake postoje sljedeće

  poravnati- poravnanje teksta unutar ćelije. Lijeva ivica (lijeva), desna ivica (desno), centar (centar)
  valign- vertikalno poravnanje teksta unutar ćelije. Gore (gore), dolje (dolje), centar (sredina)
  bgcolor- postavlja boju linije
  širina- širina kolone (sve ćelije ispod će zauzeti ovaj parametar) je navedeno u pikselima ili kao postotak, gdje je 100% širina cijele tablice
  visina- visina ćelije (sve ćelije u redu će prihvatiti ovaj parametar)

  Pogledajmo kod u kojem je sadržaj ćelija (td) poravnat duž različitih rubova: u prvoj lijevo, u drugoj desno:

  Stobets 1	Stobets 2
Tekst u prvoj ćeliji prve kolone	Tekst u drugoj ćeliji druge kolone
Stobets 1	Stobets 2

  Rezultat

  Koristeći tabele možete napraviti vrlo dobru stranicu. Ne zaboravite da u ćelije možete umetnuti ne samo tekst, već i slike, linkove, itd.!)

  Hvala na pažnji! Nadam se da je materijal bio koristan!

  POVEZANI ČLANCI

  • Povratne informacije
  • Mapa sajta
  • O sajtu

  Stobets 1	Stobets 2
Tekst u prvoj ćeliji prve kolone	Tekst u drugoj ćeliji druge kolone

  - oznaka koja kreira ćeliju zaglavlja tabele. Spoljno, njegov sadržaj se razlikuje od sadržaja u drugim ćelijama - obično tekst unutra	Pretraživač ga ističe podebljanim slovima i stavlja u centar.	- kontejner sa kojim se kreira jednostavna ćelija. Koliko će takvih oznaka sadržavati linija (tag