CSS specifikacija daje neograničene mogućnosti za dizajn tabela. Prema zadanim postavkama, ćelije tabele i tabele nemaju vidljive granice ili pozadinu, a ćelije unutar tabele nisu blizu jedna drugoj.

Širina ćelija tabele određena je širinom njihovog sadržaja, tako da širina kolona tabele može biti različita. Visina svih ćelija u nizu je ista i određena je visinom najviše ćelije.

Formatiranje tabele

1. Granice tablice

Tabela i ćelije u njoj se podrazumevano prikazuju u pretraživaču bez vidljivih granica. Granice stola postavljeni su graničnim svojstvom:

Tabela ( border-collapse: kolaps; /*ukloni prazni prostori između ćelija*/ granica: 1px čvrsta siva; /*postaviti vanjsku granicu za tablicu sive boje debljina 1px*/ )

Granice ćelije zaglavlja svaka kolona je postavljena za th element:

Th (rub: 1px puna siva;)

Granice ćelija tijela tablice su specificirana za td element:

Td (rub: 1px puna siva;)

Debljina granica susjednih ćelija se ne udvostručuje, tako da možete postaviti granice za cijelu tablicu na sljedeći način:

Th, td (ivica: 1px puna siva;)

Vanjska ivica tabele može se istaknuti dajući joj povećanu širinu:

Tabela (rub: 3px čvrsto siva;)

Granice se mogu postaviti djelimično:

/* postavite sivu vanjsku granicu od 3px za tabelu */ tablicu (ivica-vrh: 3px čvrsto siva; ) /* postavite sivu granicu od 1px za ćeliju tijela tablice */ td (ivica-dno: 1px čvrsta siva;)

Možete pročitati više o pograničnoj imovini.

2. Kako podesiti širinu i visinu stola

Default širina i visina stola određena sadržajem njegovih ćelija. Ako širina nije postavljena, ona će biti jednaka širini najšireg reda (linije).

Širina tabele i kolona postaviti pomoću svojstva širine. Ako je tabela postavljena na tablicu (širina: 100%;) , tada će širina tablice biti jednaka širini bloka kontejnera u kojem se nalazi.

Širina tabele i kolona se obično postavlja u px ili %, na primer:

Tabela (širina: 600px;) th (širina: 20%;) td:first-child (širina: 30%;)

Visina stola nije postavljeno. visina reda tabelama se može manipulisati dodavanjem gornjih i donjih paddinga elementima i . Ne preporučuje se fiksiranje visine pomoću svojstva visine.

Th, td (odmak: 10px 15px;)

3. Kako postaviti pozadinu stola

Default pozadina stola a ćelije prozirne. Ako stranica ili blok koji sadrži tabelu ima pozadinu, ona će se prikazati kroz tabelu. Ako je pozadina postavljena i za tabelu i za ćelije, tada će na mjestima gdje se pozadina tablice i ćelije preklapaju biti vidljiva samo pozadina ćelija. Pozadina za tabelu u cjelini i njene ćelije mogu biti:
punjenje,
,
.

4. Kolone tabele

Model CSS tabele fokusiran uglavnom na redove (redove) formirane pomoću oznake

. U praksi postoje trenuci kada je to neophodno posebno formatiranje kolone, što je moguće na sljedeće načine:

koristeći oznaku

Možete postaviti pozadinu za bilo koji broj kolona;

koristeći tabelu selektora td:first-child, tablicu td:last-child, možete postaviti stilove za prvu ili posljednju kolonu tabele (osim za prvu ćeliju zaglavlja tabele);

koristeći selektor tablice td:nth-child (pravilo odabira stupaca) možete postaviti stilove za bilo koju kolonu tabele.

Možete pročitati više o CSS selektorima.

5. Kako dodati naslov u tablicu

Možete dodati zaglavlje u tablicu pomoću oznake , i pomoću svojstva caption-side, može se postaviti ispred ili ispod tabele. Za horizontalno poravnanje teksta naslova koristite svojstvo poravnanja teksta. Naslijeđeno.

...

Tabela br. 1

Kompanija	Q1	Q2	Q3	Q4

natpis (na strani naslova: dolje; poravnanje teksta: desno; padding: 10px 0; veličina fonta: 14px; ) Rice. 2. Primjer prikazivanja naslova ispod tabele

6. Kako ukloniti jaz između okvira ćelija

Granice ćelija tabele su podrazumevano odvojene malim razmakom. Ako postavite border-collapse: kolaps za tabelu, tada će se praznina ukloniti. Imovina je naslijeđena.

Sintaksa

Tabela (granica-kolaps: kolaps;)
Rice. 3. Primjer tablica sa spojenim i podijeljenim granicama ćelija

7. Kako povećati razmak između ivica ćelija

Via granična svojstva-razmak može promijeniti razmak između granica ćelija. Ova nekretnina odnosi se na tabelu u celini. Naslijeđeno.

Sintaksa

Tabela (border-collapse: odvojeno; razmak između granica: 10px 20px;) tablica (border-collapse: odvojen; razmak obruba: 10px;) Rice. 4. Primjer tablica sa povećanim razmacima između okvira ćelija

8. Kako sakriti prazne ćelije tabele

Svojstvo praznih ćelija sakriva ili prikazuje prazne ćelije. Utječe samo na ćelije koje ne sadrže nikakav sadržaj. Ako je ćelija postavljena na pozadinu, a tabela na tablicu (border-collapse: collapse;), tada ćelija neće biti skrivena. Naslijeđeno.

Kompanija	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabela ( granica: 1px čvrsta #69c; obrub-kolaps: odvojena; prazne ćelije: sakriti; ) th, td (obrub: 2px čvrsta #69c;) Rice. 5. Primjer skrivanja prazne ćelije tablice

9. Izgled tabele sa svojstvom table-layout

Izgled rasporeda tabele određen je jednim od dva pristupa: fiksnim rasporedom ili automatskim rasporedom. Ispod rasporeda u ovaj slučaj podrazumijeva se kako je širina tabele raspoređena između širine ćelija. Imovina se ne nasljeđuje.

Sintaksa

Tablica (raspored stola: fiksni;)

10. Najbolji rasporedi tablica

1. Horizontalni minimalizam

Horizontalne tabele su tabele čiji se tekst čita horizontalno. Svaki entitet je zasebna linija. Ove tabele možete stilizovati u minimalističkom stilu tako što ćete postaviti ivicu od dva piksela ispod naslova.

zaposlenik	Plata	Bonus	Supervizor
Stephen C. Cox	$300	$50	Bob
Josephine Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tabela (familija fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; pozadina: bijela; maksimalna širina: 70%; širina: 70%; obrub-kolaps: kolaps; tekst -align: lijevo; ) th ( font-weight: normal; boja: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; ) td (boja: #669; padding: 9px 8px; prijelaz: .3s linearno; ) tr:hover td (boja: #6699ff;)

At u velikom broju redove ovaj dizajn tabele čini teškim za čitanje. Da biste riješili ovaj problem, možete dodati ivicu od jednog piksela ispod svih td elemenata.

Td ( border-bottom: 1px solid #ccc; boja: #669; padding: 9px 8px; prijelaz: .3s linear; )/*drugi kod kao gore*/

Dodavanje efekta :hover elementu tr će olakšati čitanje minimalističkih tabela. Kada zadržite pokazivač miša iznad ćelije, ostale ćelije u istom redu se biraju u isto vrijeme, što olakšava praćenje informacija ako tabele imaju više kolona.

Th ( font-weight: normal; boja: #039; padding: 10px 15px; ) td (boja: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (pozadina: #e8edff ;)

2. Vertikalni minimalizam

Iako se takve tabele retko koriste, vertikalno orijentisane tabele su ipak korisne za kategorizaciju ili poređenje opisa objekata predstavljenih kolonom. Možete ih stilizirati u minimalističkom stilu dodavanjem razmaka za odvajanje stupaca.

Th ( font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; ) td ( border- desno: 30px solid #fff; granica-lijevo: 30px solid #fff; boja: #669; padding: 12px 2px; )

3. "Upakovan" stil

Najpouzdaniji stil za dizajniranje stolova svih vrsta je takozvani "kutijasti" stil. Dovoljno je izabrati dobro sema boja, a zatim postavite boju pozadine za sve ćelije. Ne zaboravite da naglasite razliku između linija postavljanjem granica kao graničnika.

Th (veličina fonta: 13px; težina fonta: normalna; pozadina: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; boja: #039; padding: 8px; ) td (pozadina : #e8edff; border-bottom: 1px solid #fff; boja: #669; border-top: 1px solid transparent; padding: 8px; ) tr:hover td (pozadina: #ccddff;)

Najteže je pronaći pravu shemu boja koja će se skladno uklopiti s vašom web lokacijom. Ako je stranica opterećena grafikom i dizajnom, tada će vam biti prilično teško koristiti ovaj stil.

Tabela (familija fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veličina fonta: 14px; maksimalna širina: 70%; širina: 70%; poravnanje teksta: centar; obrub-kolaps: kolaps ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th (font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- lijevo: 1px solid #9baff1; boja: #039; padding: 8px; ) td (pozadina: #e8edff; granica-desno: 1px čvrsta #aabcfe; granica-lijevo: 1px čvrsta #aabcfe; boja: #669; padding: 8px ;)

4. Horizontalna zebra

Zebra sto izgleda prilično atraktivno i udobno. Opciona boja pozadine može poslužiti kao vizuelni znak ljudima da čitaju tabelu.

Th ( font-weight: normal; boja: #039; padding: 10px 15px; ) td ( boja: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:nth-child(2n) ( pozadina: #e8edff;)

5. Novinski stil

Da biste postigli takozvani efekat novina, možete primijeniti obrube na elemente tablice i igrati se ćelijama iznutra. Lagani, minimalistički novinski stil mogao bi izgledati ovako: igrajte se bojama, dodajte ivice, dopunu, različite pozadine, i efekat :hover kada se lebdi iznad reda.

Tabela (obrub: 1px pun #69c;) th (težina fonta: normalna; boja: #039; ivica na dnu: 1px isprekidana #69c; padding: 12px 17px; ) td ( boja: #669; padding: 7px 17px; ) tr:hover td (pozadina: #ccddff;)

Tabela (obrub: 1px pun #69c;) th (težina fonta: normalna; boja: #039; padding: 10px; ) td ( boja: #669; ivica vrh: 1px isprekidana #fff; padding: 10px; pozadina: #ccddff; ) tr:hover td (pozadina: #99bcff;)

Tabela (obrub: 1px čvrsta #6cf;) th (težina fonta: normalna; veličina fonta: 13px; boja: #039; transformacija teksta: velika slova; ivica desno: 1px čvrsta #0865c2; ivica na vrhu: 1px čvrsta #0865c2; granica-lijevo: 1px puna #0865c2; granica-dno: 1px čvrsta #fff; padding: 20px; ) td ( boja: #669; granica-desno: 1px isprekidana #6cf; padding: 10px 20px; )

6. Pozadina stola

Ako tražite brzi i jedinstven način raspored tabele, izaberite atraktivna slika ili fotografiju koja se odnosi na temu stola i postavite je kao pozadinu stola.

Jpg") bez ponavljanja; background-position: 100% 55px; ) th (težina fonta: normalna; boja: #339; padding: 10px 12px; ) td ( background: url("https://website/images/ back..png"); pozadina: prozirna; )

Ovo predavanje ima detaljan pogled na to kako se tabele koriste u HTML markiranju. Ovo je tabelarna organizacija teksta, tabelarna koordinatna mreža i grafika organizovana u tabele.

Sredstva za opisivanje tabela u HTML-u

As WWW razvoj postalo je jasno da alati koji su ugrađeni u HTML nisu dovoljni za kvalitetan prikaz razne vrste dokumenata. Nedostatak HTML-a bio je nedostatak mogućnosti prikaza tabele u njegovom sastavu. U tu svrhu, unaprijed formatirani tekst (oznaka

), u kojoj je tabela ocrtana ASCII znakovima.  Ali ovaj oblik stone prezentacije nije bio dovoljan Visoka kvaliteta i izašao iz opšteg stila dokumenta.  Sa uvođenjem tabela u HTML, webmasteri sada imaju ne samo alat za postavljanje teksta i brojeva, već i moćan alat za dizajn za njihovo postavljanje u pravo mjesto ekran grafike i teksta.

Kreiranje tabela u HTML-u
Oznaka se koristi za opisivanje tabela.<ТАВLЕ>.  Tag<ТАВLЕ>, kao i mnogi drugi, automatski prevodi red prije i poslije tabele.
Kreiranje reda tabele - oznake<ТR>
Tag<ТR>(Red tabele, red tabele) kreira red tabele.  Sav tekst, druge oznake i atributi koji se trebaju postaviti u jedan red moraju biti smješteni između lt;TR> oznaka..
Definiranje ćelija tablice - Tag<ТD>
Ćelije sa podacima se obično postavljaju unutar reda tabele.  Svaka ćelija koja sadrži tekst ili sliku mora biti okružena oznakama<ТD>.  Broj oznaka<ТD>u redu određuje broj ćelija

 

 
sto
 
 

 

 
Ako tabela ima dvije TR oznake, onda ima dva reda.
 
 

 
Ako su tri u redu tag TD,
 
onda u njemu
 
tri kolone.
 
 
 


 
Zaglavlja kolona tabele - oznaka<ТН>
Naslovi za kolone i redove tabele se postavljaju pomoću oznake naslova<ТН>(Zaglavlje tabele, zaglavlje tabele).  Ove oznake su kao<ТD>.  Razlika je u tome što je tekst zatvoren između oznaka<ТН>, se automatski ispisuje podebljanim slovima i podrazumevano se postavlja u sredinu ćelije.  Možete poništiti centriranje i poravnati tekst lijevo ili desno.  Ako koristite<ТD>sa oznakom<В>i atribut<АLIGN=center>, tekst će također izgledati kao naslov.  Međutim, imajte na umu da svi pretraživači ne podržavaju tabele bold font, pa je bolje postaviti zaglavlja tabele sa<ТН>.

 

 

 

 
Naslov je po defaultu centriran
 
Zaglavlje može obuhvatiti kolone
 
 

 
Zaglavlje se može postaviti prije kolona
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Zaglavlje može spojiti linije
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
 


Korištenje zaglavlja tablice - oznaka<САРТIОN>
Tag omogućava vam da kreirate zaglavlja tabele.  Podrazumevano, naslovi su centrirani i postavljeni ili iznad (<САРТION АLIGN=top>), ili ispod stola (<САРТION ALIGN=bottom>).  Naslov se može sastojati od bilo kog teksta i slika.  Tekst će biti podijeljen na linije koje odgovaraju širini tabele.  ponekad tag<САРТION>koristi se za natpis slike.  Da biste to učinili, dovoljno je opisati tabelu bez granica.

 

 

 
Naslov iznad tabele
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 
 

 
Naslov ispod stola
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 


NOWRAP atribut
Obično svaki tekst koji ne stane u jedan red ćelije tabele ide na sljedeći red.  Međutim, kada koristite atribut NOWRAP s oznakama<ТН>ili<ТD>dužina ćelije je proširena tako da tekst sadržan u njoj stane u jedan red.
COLSPAN atribut
oznake<ТD>i<ТН>se mijenjaju pomoću atributa COLSPAN (Raspon kolone).  Ako želite bilo koju ćeliju učiniti širom od gornje ili donje, možete koristiti atribut COLSPAN da je protegnete na bilo koji broj normalnih ćelija.

 

 

 

 

 
Ako želite bilo koju ćeliju učiniti širom od gornje ili donje,
 
možete koristiti atribut COLSPAN=2,
 
 

 
da ga rastegne na bilo koji broj normalnih ćelija.
 
 
 


ROWSPAN atribut
ROWSPAN atribut koji se koristi u oznakama<ТD>i<ТН>, sličan je atributu COLSPAN=, osim što specificira broj linija koje će ćelija obuhvatiti.  Ako navedete broj veći od jedan u atributu ROWSPAN=s, tada odgovarajući broj redova mora biti ispod rastegnute ćelije.  Ne može se staviti na dno tabele.
WIDTH atribut
Atribut WIDTH ima dvije namjene.  Možete ga staviti u oznaku<ТАВLЕ>za davanje širine cijele tabele ili se može koristiti u oznakama<ТD>ili<ТН>za postavljanje širine ćelije ili grupe ćelija.  Širina se može odrediti u pikselima ili u postocima.  Na primjer, ako postavite u oznaku<ТАВLЕ>WIDTH=250, dobićete tabelu širine 250 piksela bez obzira na veličinu ekrana stranice.  Kada postavite WIDTH=50% u tag<ТАВLЕ>tabela će zauzeti polovinu širine stranice pri bilo kojoj veličini slike na ekranu.  Dakle, kada specificirate širinu tabele kao procenat, imajte na umu da ako korisnik ima uski okvir za prikaz, vaša stranica može izgledati malo čudno.  Ako koristite piksele i tabela je šira od okvira za prikaz, na dnu će se pojaviti traka za pomicanje za pomicanje lijevo i desno preko stranice.  Ovisno o zadacima, bilo koji način postavljanja širine tablice može biti koristan.

 

 

 

 
Tekst ili podaci - 100% širine
 
 
 ili 

 

 

 
Tekst ili podaci - 50% širine
 
 
 ili 

 

 

 
Tekst ili podaci - širina 200 px
 
 
 ili 

 

 

 
Tekst ili podaci - širina 100 px
 
 


Primjena praznih ćelija
Ako ćelija ne sadrži podatke, neće imati granice.  Ako želite da ćelija ima ivice, ali bez sadržaja, morate u nju staviti nešto što neće biti vidljivo kada se gleda.  Možeš koristiti prazan niz <ВR>.  Možete čak definirati prazne stupce navođenjem njihove širine u pikselima ili relativne jedinice i bez unosa ikakvih podataka u primljene ćelije.  Ovaj alat može biti koristan pri postavljanju teksta i grafike na stranicu.
CELLRADDING atribut
Ovaj atribut specificira širinu praznog prostora između sadržaja ćelije i njenih granica, odnosno postavlja margine unutar ćelije.

 

 

 

 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 


 

 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 
 


ALIGN i VALIGN atributi
oznake<ТR>, <ТD>i<ТН>može se modificirati sa ALIGN atributi i VALIGN. ALIGN atribut definira horizontalno poravnanje teksta i grafike, tj. lijevo, desno ili centrirano. Horizontalno poravnanje može se specificirati na nekoliko načina:
ALIGN=bleedleft gura sadržaj ćelije blizu lijeve ivice.
ALIGN=lijevo Poravnava sadržaj ćelije ulijevo, uzimajući u obzir uvlačenje navedeno atributom CELLPADDING.
ALIGN=centar centrirati sadržaj ćelije.
ALIGN=desno Poravnava sadržaj ćelije udesno, uzimajući u obzir uvlačenje navedeno atributom CELLPADDING.

 

 

 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 


Atribut VALIGN poravnava tekst i grafiku unutar ćelije okomito. Vertikalno poravnanje može se specificirati na nekoliko načina:
VALIGN=vrh Poravnava sadržaj ćelije s gornjom ivicom.
VALIGN=srednja Centrira sadržaj ćelije okomito.
VALIGN=dno Poravnava sadržaj ćelije s donjom ivicom.

 

 

 

 

 
Atribut VALIGN poravnava tekst i grafiku unutar ćelije okomito.
 
vrh,
 
sredina,
 
dnu.
 
 

 
VALIGN=top Poravnava sadržaj ćelije sa gornjom ivicom.
 
vrh,
 
vrh,
 
top.
 
 

 
VALIGN=middle Centrira sadržaj ćelije okomito.
 
sredina,
 
sredina,
 
srednji.
 
 

 
VALIGN=bottom Poravnava sadržaj ćelije sa donjom ivicom.
 
dno,
 
dno,
 
dnu.
 
 
 


BORDER atribut
U oznaci<ТАВLЕ>često određuju kako će izgledati granice, odnosno linije koje okružuju ćelije tablice i samu tablicu.  Ako ne postavite okvir, dobićete sto bez linija, ali će prostor za njih biti dodijeljen.  Isti rezultat se može postići postavljanjem<ТАВLЕ ВОRDER=0>.  Ponekad želite da obrub učinite debljim tako da se bolje ističe.  Možete postaviti isključivo podebljane ivice kako biste skrenuli pažnju na sliku ili tekst.  Prilikom kreiranja ugniježđenih tabela, morate učiniti za različiti stolovi granice različite debljine kako bi se lakše razlikovale.
CELLSPACING atribut
Atribut CELLSPACING specificira razmak između ćelija u pikselima.  Ako ovaj atribut nije naveden, zadana vrijednost je dva piksela.  Sa CELLSPACING= atributom, možete postaviti tekst i grafiku gdje god želite.  Ako želiš da odeš prazno mesto, možete unijeti razmak u ćeliju.

 

 

 

 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 
 

 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 
 

 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 

 
Tekst ili podaci
 
 
 


BGCOLOR atribut
Ovaj atribut vam omogućava da postavite boju pozadine.  U zavisnosti od toga sa kojom oznakom (TABLE, TR, TD) se primenjuje, boja pozadine se može postaviti za celu tabelu, za red ili za jednu ćeliju.  Značenje dati atribut je RGB kod ili standardni naziv boje.

 

 

 

 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 

 
Tekst ili podaci
 
Tekst ili podaci
 
Tekst ili podaci
 
 
 


Atribut BACKGROUND
Ovaj atribut postavlja pozadinsku sliku za tabele.  Primjenjivo na TABLE i TD oznake.  Njegova vrijednost je URL datoteke sa pozadinska slika.  Korištenje ovog atributa razmatra se u nastavku.
Upotreba tabela u dizajnu stranica
Stolovi su dobri jer, po želji, njihove granice možete učiniti nevidljivim.  Ovo omogućava korištenje oznake<ТАВLЕ>lijepo postavite tekst i grafiku na stranicu.  Bye tag<ТАВLЕ>ostaje jedini moćni formater u HTML-u.  Dizajneri web stranica sada imaju gotovo istu slobodu da koriste "bijeli prostor" kao kreatori. štampane stranice.  Tabele su najbolji način da se odmaknete od hijerarhijskog rasporeda teksta na web stranicama.
Ako pretraživač podržava tabele, obično će se prikazati najviše zanimljivi efekti dobijene uz njihovu pomoć

 

 

 

 

 

 
Uralski državni pedagoški univerzitet
 
Dobrodošli!
 

 

 
Obuka"Osnove WEB-masteringa"
 
 
 
 
 
 


 
Kreiranje šarenih stolova
Neki pretraživači dozvoljavaju prikazivanje boja.  Postoji nekoliko načina za bojenje tabele, uglavnom u zavisnosti od pretraživača koji koristite.
Obrube u boji u Netscape Navigatoru.  Ne samo da možete okružiti sto prelep okvir, ali i za njega postaviti boju koja se razlikuje od boja teksta i pozadine.  Napravite jednostavan sivi GIF (ili bilo koji GIF koji želite da imate kao pozadinu) i definirajte ga u tag-u<ВODY>kao pozadina stranice.  Zatim postavite boju pozadine stranice.  Kao rezultat, vaša oznaka<ВОDY>izgledat će otprilike ovako:

 
Napravili ste dvostruku pozadinu - GIF i postavite boju.  Kao rezultat boja pozadine bit će vidljiv na svim granicama tablice i horizontalne linije (<НR>).  Bez obzira da li je vaš GIF u pozadini siv ili ne, obojene linije i ivice tablice će se istaknuti.  Ako pozadinski GIF nije previše kompliciran, vrijeme učitavanja stranice će se samo neznatno povećati.
Postali su popularni, web dizajneri su uglavnom koristili metodu tabelarnog rasporeda i dobili vrlo dobar rezultat.

Oznake koje se koriste za pravljenje tabele u html-u
sto - obavezna oznaka, koji otvara i zatvara sto 
natpis - opciona oznaka, označavajući naslov tabele 
th- opcionu oznaku, u čiju početnu i završnu oznaku stane naziv kolone.  Obično podebljano 
tr- obavezna oznaka sa koje se linija otvara i zatvara 
td- obavezna oznaka koja označava otvaranje i zatvaranje ćelije u nizu 

Primjer jednostavnog koda tablice
 

 

 

 



 



 

 

 


 


 
 
 
Naziv tabele
 
 
Kolona 1 

 
 
 
Stobets 2 

 
 
 
 
 
 
Tekst u prvoj ćeliji 

 
 
 
Tekst u drugoj ćeliji 

 
 
 
 
 




 
Prikazaće se pretraživač

Dodjeljivanje 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.  Stol se može postaviti pozadini(ili njegova boja), indent, širina, granica i druge opciješto će mu dati lep izgled.  Tabela - Vaš prvi korak za razumijevanje web dizajn!  Ranije su mnoge stranice bile u potpunosti postavljene kao tabele, odnosno sve što je korisnik vidio (bočni meni, Top Menu, sadržaj) - bio je sadržaj velikih ćelija tabele. 
S tim u vezi, pređimo na atribute koji čine sto lijepim... 
Svojstva i parametri html tabela: padding, širina, boja pozadine, ivica (okvir)
At table tag ima sljedeće atribute: 
š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 navedena u pikselima 
cell padding- dopuna u pikselima između sadržaja ćelije i njenog unutrašnjeg ruba
Kao i ranije, vrijednost atributa se piše u navodnicima.
 
Razmotrite upotrebu ovih atributa na primjeru.  Da biste to učinili, kreirajte tabelu (ali već bez rijetko korištenih natpisa i oznaka th) i postavite parametar atributa granica (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:
Void- bez okvira,
iznad - samo gornji okvir, 
ispod - samo donji okvir, 
bočne strane - samo gornji i donji okviri, 
vsides - samo lijeva i desna granica, 
lhs - samo lijevi okvir, 
desno - samo desni okvir, 
kutija - sva četiri dijela okvira.
pravila- atribut koji označava granice unutar tabele, između ćelija.  Postoje sljedeće vrijednosti:
Ništa - nema granica između ćelija, 
grupe - granice samo između grupa redova i grupa kolona (o tome će biti reči malo kasnije), 
redovi - granice samo između redova, 
cols - granice samo između kolona, 
sve - prikaži sve granice.
Razmotrite primjer koda
 

 

 

 


 
  
 
 
Kolona 1 

 
 
 
Stobets 2 

 
 
 
 
 
 



 
 


 
 
 
 

 


 


 


 





 
Rezultat
Pokušajmo sada napraviti prekrasan 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), centar (centar) 
cellpacing- udaljenost između ćelija tabele.  Navedeno u pikselima (zadano 0 piksela) 
cell padding- dopuna u pikselima između sadržaja ćelije i njenog unutrašnjeg ruba (podrazumevano 0 piksela)
Razmotrimo primjer
 

 

 

 


 
  
 
 
Kolona 1 

 
 

Stobets 2 

 
 
 
 
 
 

Tekst u prvoj ćeliji prve kolone 

 
 
Tekst u drugoj ćeliji druge kolone 

 
 
 
 


 


 


 


 





 
Pregledač će prikazati centralno poravnatu 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 postavite parametar za string (tr), tada će on biti važeći za sve ćelije(td) u ovom redu, ako za određenu ćeliju, onda samo za nju.  U gornjim primjerima sam odredio boju za red, ovaj parametar je raspoređen u skladu s tim za sve ćelije. 
 



 


Za tr i td oznake postoje sljedeće
poravnati- poravnanje teksta unutar ćelije.  Lijevo (lijevo), desno (desno), centar (centar) 
valign- poravnanje teksta unutar ćelije okomito.  Gore (gore), dolje (dolje), centar (sredina) 
bgcolor- postavlja boju linije 
širina- širina kolone (sve ćelije ispod će prihvatiti dati parametar) je navedeno u pikselima ili u procentima, gdje je 100% širina cijele tablice 
visina- visina ćelije (sve ćelije u redu će prihvatiti ovaj parametar)
Razmotrimo kod u kojem je sadržaj ćelija (td) poravnat na različitim rubovima: u prvom lijevo, u drugom desnom:
 

 

 

 


 
 
 
 
Kolona 1 

 
 
 
Stobets 2 

 
 
 
 
 
 

Tekst u prvoj ćeliji prve kolone 

 
 
Tekst u drugoj ćeliji druge kolone 

 
 
 
 
 

 
 
Kolona 1 

 
 
 
Stobets 2 

 
 
 
 


 


 


 


 





 
Rezultat 

Uz pomoć tabela možete napraviti vrlo dobru stranicu.  Ne zaboravite da u ćelije možete umetnuti ne samo tekst, već i slike, veze i još mnogo toga!)
Hvala vam na pažnji!  Nadam se da je materijal bio od pomoći!
HTML tabele organizirati i prikazati podatke koristeći redove ili stupce.  Tabele se sastoje od ćelija koje se formiraju kada se redovi i kolone ukrste. Ćelije tabele može sadržavati bilo koje HTML elemente kao što su naslovi, liste, tekst, slike, elementi obrasca i druge tabele.  Svaka tabela može imati zaglavlje povezano s njom, postavljeno prije ili iza tabele.
Tabele se više ne koriste za izgled i izgled web stranice pojedinačni elementi, jer takva tehnika ne pruža fleksibilnost u strukturi i prilagodljivost sajta, značajno povećavajući HTML markup.
Za sve elemente tabele su dostupni, kao i sopstveni atributi.
Kreiranje tabela u HTML-u
sadržaj:
1. Kako napraviti tabelu
Tabela se kreira pomoću uparena oznaka
 Fig.1. Izgled tabele bez css formatiranja 
Podrazumevano, tabela i ćelije nemaju vidljive granice. Granice se postavljaju pomoću svojstva granice:
/* 1px sive vanjske granice tablice */ tablica (rubnica: 1px čvrsta siva;) /* granice ćelije prvog reda tablice */ th (rubnica: 1px čvrsta siva;) /* granice ćelije tijela tablice */ td (rubnica: 1px čvrsta siva;)
Razmak između ćelija tabele uklanjaju se pomoću svojstva tablice (border-collapse: kolaps;) .
Širina Tabela podrazumeva širinu svog unutrašnjeg sadržaja.  Da biste postavili širinu, morate postaviti vrijednost za svojstvo širine:
/* napravi širinu tabele jednakom širini bloka kontejnera u */ tabeli (širina: 100%;) /* postavi fiksna širina za tabelu */ tabela (širina: 600px;)
Ako su ćelije tabele postavljene padding i granice, tada će širina tablice uključivati ​​sljedeće vrijednosti: 
padding-left i padding-right , širina ivice-lijevo plus širina ivice-desno zadnje ćelije u redu.  Ako su specificirana širina ćelije i ivice, tada će širina tablice biti zbir širina ćelija plus širina lijevog ruba i širine desne ivice posljednje ćelije u retku.
2. Kako kreirati redove tabele (redove)
Redovi tabele ili redovi se kreiraju pomoću oznake
.  Broj horizontalnih redova u tabeli određen je brojem uparenih oznaka .
3. Kako napraviti ćeliju zaglavlja stupca tabele
4. Kako napraviti ćeliju tijela stola
, koji se nalazi u istom redu, određuju broj ćelija u redu tabele.  Broj parova ćelija i da specificirate svaki dio tabele. 
Element se mora koristiti sljedećim redoslijedom: as podređeni element
 
 
 
 
Kolona 1 

 
 
 
Stobets 2 

 
 
 
 
 
 

Tekst u prvoj ćeliji prve kolone 

 
 
Tekst u drugoj ćeliji druge kolone 

 
 
 
 





kreira naslov stupca - posebnu ćeliju, tekst u kojoj je istaknut podebljanim slovima.  Broj ćelija zaglavlja određen je brojem parova oznaka

  
kreira ćelije tabele koje sadrže podatke tabele.  Uparene oznake

mora biti jednak broju parova ćelija
.  Atributi colspan, rowspan, headers dostupni su za element. 
5. Kako dodati naslov (naslov) u tabelu
Kreira naslov tabele.  Dodano direktno nakon oznake
6. Grupisanje redova i kolona tabele
Kreira strukturnu grupu kolona, ​​naglašavajući logički homogene ćelije.  Grupira jednu ili više kolona za uniformno oblikovanje, dozvoljavajući da se stilovi primjenjuju na stupce umjesto da se stilovi ponavljaju za svaku ćeliju i svaki red.  Dodano direktno nakon oznaka Rice.  2. Isticanje kolona tabele drugom bojom pomoću oznaka i
7. Grupisanje sekcija tabele
Element kreira grupu naslova za redove tabele kako bi se postavio uniforman dizajn.  Koristi se u kombinaciji sa elementima
 
, poslije i, i prije  ,
 i elementi.  Može se koristiti samo jednom u istoj tabeli.grupiše glavni sadržaj tabele.  Koristi se u kombinaciji sa elementima i .
Kreira grupu redova za predstavljanje informacija o iznosima ili ukupnim iznosima, koji se nalaze na dnu tabele.  Jednom korišteno u tabeli.  Stavlja se iza oznake, prije oznaka
i  .
 
Ovo grupisanje redova je ugrađeno u standard u očekivanju da će pretraživači, kada prikazuju dugačke tabele, pomerati redove podataka, držeći superglavu i podnaslov nepomični, a kada se izlaze na štampač, oni će moći da koriste superglavu i podnaslov kao zaglavlja stranica.  Međutim, moderni pretraživači to ne rade i ili jednostavno prikazuju i kao linije podataka, ili, u najbolji slucaj, jednostavno stavite odgovarajuće redove na početak i kraj tabele. 
8. Kako spojiti ćelije tabele
Atributi colspan i rowspan spajaju ćelije tablice.  Colspan atribut specificira broj ćelija spojenih horizontalno, a rowspan atribut specificira broj ćelija spojenih okomito.

Rice.  3. Primjer vodoravnog kombiniranja ćelija tablice korištenjem atributa colspan 
9. Atributi elemenata tabele
Tablica 1. Atributi elementa tablice 

Prihvaćene vrijednosti: lista imena ćelija odvojenih razmacima;  ova imena moraju biti dodijeljena ćelijama preko njihovog id atributa.
Prihvaćene vrijednosti: bilo koji pozitivan cijeli broj.
Atribut
Opis, prihvaćena vrijednost
colspan
Broj ćelija u redu za vodoravno spajanje. 

 
 

zaglavlja
Određuje listu ćelija zaglavlja koja sadrži informacije zaglavlja za trenutnu ćeliju podataka.  Dizajniran za pretraživače govora. 

 
...
...
 
raspon redova
Broj ćelija u koloni za vertikalno spajanje. 

 
 
Moguće vrijednosti: broj od 1 do 999.
raspon
Kombinirani broj kolona za posao uniformni stil, default je 1. 

 
 
10. Primjer kreiranja tabele
 
Rice.  4. Kreirajte meni restorana sa HTML tabelom 
HTML markup

 

 
Jelovnik restorana Romashka
 

 
Kuhinja
 
hladna jela
 
Topla jela
 
deserti
 
 

 
Salate
 
Grickalice
 
Prvi obrok
 
Glavna jela
 
 

 
ruski
 
The vinaigrette
 
Jezik sa hrenom
 
Šći sa kiselim kupusom
 
Knedle od krompira
 
Pečene jabuke sa medom
 
 

 
Olivier salata
 
Goveđi žele
 
Rassolnik kući
 
Šaran pečen u pavlaci
 
palačinka pita
 
 

 
Haringa ispod "krznenog kaputa"
 
Želeran smuđ
 
Meat hodgepodge
 
Kotleti "Pozharsky"
 
Kolač "Krompir"
 
 

 
španski
 
Ceviche od jakobnih kapica
 
Empanadas
 
Krušna supa sa belim lukom
 
Paella sa plodovima mora
 
Churros
 
 

 
Timbale od avokada i tune
 
Ahotomate
 
Asturian fabada
 
Pork Raxo
 
Almoishavena
 
 

 
Pasulj sa šunkom
 
Chanfine
 
Riblja čorba sa knedlama od griza
 
tortilja od krompira
 
Bunuelos
 
 

 
francuski
 
Vosges salata
 
Chicken Riyette
 
Krem supa od patlidžana "Renoir"
 
Potato ograten
 
brioche
 
 

 
Salata "Panzanella"
 
Ukusni sir
 
francuska supa od bundeve
 
Gratin od peradi
 
Ligurska pita od limuna
 
 

 
Tartarus
 
marinirani losos
 
Supa "Conti"
 
Tartiflette
 
Savarin "Trijumf"
 
 

V ovaj odjeljak razmatraju se i neke specifičnosti pojedinačnih pretraživača, kao i individualne suptilnosti građenje i izlaganje tabela.
Prikazivanje praznih ćelija u HTML tabelama
Jedna od karakteristika prezentacije HTML tabela različitim pretraživačima je prikazivanje praznih ćelija.  Prema opisu HTML jezik svi pretraživači moraju popuniti redove praznim ćelijama ako bilo koji red ima manji broj ćelija od drugih redova.  Osim toga, bilo gdje u tablici mogu postojati ćelije koje ne sadrže podatke.
Postoji razlika između praznih ćelija i ćelija koje sadrže nevidljive podatke.  U praznim ćelijama unutar para oznaka i ne sadrži informacije ili jedan ili više prostora koji se ne tretiraju kao podaci.  Ćelije koje sadrže nevidljive podatke, na primjer, mogu sadržavati kod ili kod za unos reda 
, ili bilo koji tekst čija boja odgovara boji pozadine ćelije.  Ako se ćelije koje sadrže podatke (čak i one nevidljive) prikazuju na isti način od strane svih pretraživača, tada će prazne ćelije biti drugačije prikazane.  Netscape pretraživač ne prikazuje praznu ćeliju, odnosno mjesto gdje datu ćeliju, će biti ispunjen bojom pozadine stranice, a ne bojom pozadine ćelije, za razliku od ćelija koje sadrže podatke.  Oko praznih ćelija se ne iscrtava granica. HTML primjer tabele sa praznom ćelijom je prikazano na sl.  4.15.
Rice.  4.15. prazan HTML ćelija tabele se različito prikazuju od strane različitih pretraživača
Microsoft Internet Explorer i te i druge ćelije prikazuju boju pozadine ćelija.  Preglednik kao što je NSCA Mosaic omogućava korisniku da odredi prirodu izdavanja praznih ćelija u tabeli odabirom odgovarajućih opcija.  Poznavanje takvih karakteristika će vam omogućiti da razvijete tabele koje će biti prikazane na odgovarajući način, bez obzira na pretraživač koji je korisnik izabrao.  U nekim slučajevima, dovoljno je stvoriti ćelije koje sadrže jedan kod umjesto nekoliko praznih ćelija.