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 postavljanjem prije ili poslije tabele.
Tabele se više ne koriste za raspored web stranica i raspored pojedinih elemenata, jer ovakva tehnika ne pruža fleksibilnost u strukturi i prilagodljivost sajta, značajno povećavajući HTML oznaku.
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 oznake pair
Fig.1. Izgled tabele bez formatiranja sa css svojstvima Podrazumevano, tabela i ćelije nemaju vidljive granice. Granice se postavljaju pomoću svojstva granice:
/* 1px sive vanjske granice tablice */ tablica (rub: 1px čvrsta siva;) /* ivice ćelije prvog reda tablice */ th (rub: 1px čvrste sive;) /* ivice ćelije tijela tablice */ td (obrub: 1px pune ćelije 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 fiksnu širinu za tabelu */ tabelu (širina: 600px;)
Ako su padding i ivice postavljene za ćelije tabele, tada će širina tabele uključivati sledeće vrednosti:
padding-left i padding-right , širina ivice-lijevo plus širina ivice-desno posljednje ćelije u retku. Ako su specificirani š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
kreira naslov stupca - posebnu ćeliju, tekst u kojoj je istaknut podebljanim slovima. Broj ćelija zaglavlja određen je brojem parova oznaka |
| 4. Kako napraviti ćeliju tijela stola
kreira ćelije tabele koje sadrže podatke tabele. Uparene oznake |
| , koji se nalazi u istom redu, određuju broj ćelija u redu tabele. Broj parova ćelija 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
| i da specificirate svaki dio tabele. Element se mora koristiti sljedećim redoslijedom: kao podređeni element
, 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 oba kao redove podataka, ili, u najboljem slučaju, jednostavno stavljaju 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 | 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.
| ... |
... |
Prihvaćene vrijednosti: lista imena ćelija odvojenih razmacima; ova imena moraju biti dodijeljena ćelijama preko njihovog id atributa.
|---|
| raspon redova |
Broj ćelija u koloni za vertikalno spajanje.
|
Moguće vrijednosti: broj od 1 do 999. |
| raspon |
Broj kolona u kombinaciji za postavljanje jednog stila je 1 prema zadanim postavkama.
Prihvaćene vrijednosti: bilo koji pozitivan cijeli broj. |
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 tunjevine |
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" |
Zatim tabele igraju veoma važnu ulogu u kreiranju nevidljivog okvira za web stranicu. A to će vam pomoći da ravnomjerno i lijepo uredite tekst, menije, slike itd.
Za bolje razumijevanje onoga što vam pokušavam reći, pogledajte primjer kostura web stranice:
dakle, kako napraviti jednostavnu tabelu u html-u?
Da biste napravili tabelu, trebate koristiti tri oznake:
TABLE
–
ova oznaka je potrebna za otvaranje tabele. Ovo je vrsta kontejnera koji sadrži druge elemente. Ovdje je savijen tako da ga je nemoguće shvatiti bez krofne. Ništa, shvatit ćete kad vidite primjer.
Oznaka za zatvaranje
potrebno.
Tabela se sastoji od reda
| red 1 |
red 1 |
| red 2 |
red 2 |
| red 3 |
red 3 |
| ćelija 1 |
ćelija 2 |
| ćelija 1 |
ćelija 2 |
| ćelija 1 |
ćelija 2 |
TR –
kreira novi red tabele. Oznaka za zatvaranje
potrebno.
TD –
kreira novu ćeliju u redu. Oznaka za zatvaranje
potrebno.
Pogledajmo primjer kako bismo bolje razumjeli sve gore navedeno:
Tabele u HTML-u
| red 1 ćelija 1 | red 1 ćelija2 |
| red 2 ćelija 1 | red 2 ćelija 2 |
| red 3 ćelija 1 | red 3 ćelija 2 |
Evo rezultata:
| red 1 ćelija 1 |
red 1 ćelija2 |
| red 2 ćelija 1 |
red 2 ćelija 2 |
| red 3 ćelija 1 |
red 3 ćelija 2 |
Hajde da objasnimo sve.
Oznaka se otvara prije svakog kreiranja nove tabele.
.
Zatim stavite u sredinu posude
tag
, što označava početak novog reda.
U ovaj red umetnite dvije ćelije sa sadržajem pomoću oznake
red 1 ćelija 1 |
red 1 ćelija2 |
Zatvorite red sa oznakom
.
Otvaranje drugog reda sa oznakom
Zatvorite red sa oznakom
.
Otvaranje trećeg reda sa oznakom
i ponovo ubacite dvije ćelije u njega.
Zatvorite red sa oznakom
.
Zatvaranje stola oznakom
.
Mislim da si shvatio? Ako je neko zaboravio šta je atribut granica koju koristim zajedno sa oznakom
, podsjećam da je ovo debljina okvira. Ako u granicaće biti postavljeno na "0", tada će granice tabele biti nevidljive.
Pogledajte nekoliko primjera kreirane tabele a možete ići dalje:
Tabele u HTML-u
| red 1 ćelija 1 |
| red 2 ćelija 1 |
rezultat:
Da biste umetnuli sliku u tabelu, morate imati osnovno osnovno znanje o tome kako se slika ubacuje u HTML datoteku. Pričam o ovome u . Sada kada znate osnovne nijanse slike u HTML-u, možete pokušati da umetnete sliku u tabelu. Ovo se može uraditi ovako:
u liniji između oznaka
|
umetnite sliku.
Tabele u HTML-u
| red 1 ćelija 1 |
red 1 ćelija 2 |
 |
rezultat:
| red 1 ćelija 1 |
red 1 ćelija 2 |
|
Kako spojiti ćelije u tabeli?
Da biste spojili ćelije u tabeli, morate koristiti ove atribute:
COLSPAN- specificira broj kolona.
Zadana vrijednost je 1.
ROWSPAN- određuje broj redova.
Zadana vrijednost je 1.
spojiti ćelije u gornjem redu sa atributom colspan
:
Tabele u HTML-u
| red 1 ćelija 1+2 |
| red 2 ćelija 1 | red 2 ćelija 2 |
rezultat:
Kako podesiti veličinu stola?
Za postavljanje visine i širine stola koristite sljedeće atribute:
WIDTH- širina stola. Veličina je navedena u pikselima ili u postocima.
VISINA- visina stola. Veličina je navedena u pikselima ili u postocima.
Tabele u HTML-u
| red 1 ćelija 1 | red 1 ćelija2 |
| red 2 ćelija 1 | red 2 ćelija 2 |
rezultat:
Poravnavanje sadržaja u tabeli
Da biste poravnali sadržaj (tekst, slike) unutar tabele, možete koristiti sljedeće atribute:
ALIGN– horizontalno poravnanje sadržaja u tabeli.
Za atribuciju ALIGN vrijednosti su dodijeljene: lijevo (zadano), centar ,u pravu.
lijevo- pritisnite sadržaj na lijevu stranu;
centar - postavljeno u centru;
desno- gurnite sadržaj na desnu stranu
VALIGN- vertikalno poravnanje sadržaja u tabeli.
Za atribuciju VALIGN vrijednosti su dodijeljene: gornji, donji, srednji.
top
–
pritisnite sadržaj na vrh;
dnu
–
pritisnite sadržaj na dno;
srednji
–
postavite sadržaj u sredinu
Tabele u HTML-u
| red 1 ćelija 1 |
red 1 ćelija2 |
| red 2 ćelija 1 |
red 2 ćelija 2 |
rezultat:
Kako napraviti pozadinu stola?
Takođe možete postaviti pozadinu tabele za sve njene ćelije zajedno, kao i za svaku ćeliju pojedinačno. Možete postaviti boju pozadine ili sliku. Postoje dva atributa za pozadinu:
BGCOLOR- boja pozadine cijele tabele ili za svaku ćeliju pojedinačno. Boja je određena šifrom ili riječju.
POZADINA- pozadina u tabeli je ispunjena slikom.
pažnja: ako želite postaviti boju pozadine ili pozadinsku sliku cijele tabele, atributi moraju biti postavljeni u tag-u
. I ako samo na određenu ćeliju, onda na oznaku |
.
Za bolje razumijevanje pogledajte primjer:
Tabele u HTML-u
| red 1 ćelija 1 |
red 1 ćelija2 |
| red 2 ćelija 1 |
red 2 ćelija 2 |
rezultat:
pažnja: ako je slika manja od ćelije, onda će se ponavljati dok ne popuni ćeliju do kraja. Ako je slika veća od ćelije, pozadina slike će biti izrezana kako bi odgovarala ćeliji.
I na kraju, dozvolite mi da vam kažem nešto o tome dva korisna atributa.
U slučaju da iznenada poželite povećati razmak između svih ćelija, sljedeći atributi će vam pomoći:
CELLPADDING– udaljenost između okvira svake ćelije html tabele i materijala koji se u njoj nalazi.
Tabele u HTML-u
| red 1 ćelija 1 |
red 1 ćelija2 |
| red 2 ćelija 1 |
red 2 ćelija 2 |
rezultat:
| red 1 ćelija 1 |
red 1 ćelija2 |
| red 2 ćelija 1 |
red 2 ćelija 2 |
CELLSPACING je udaljenost između granica susjednih ćelija.
Tabele u HTML-u
| red 1 ćelija 1 |
red 1 ćelija2 |
| red 2 ćelija 1 |
red 2 ćelija 2 |
rezultat:
| red 1 ćelija 1 |
red 1 ćelija2 |
| red 2 ćelija 1 |
red 2 ćelija 2 |
Fuj, rekao mi je!
Nadam se da sam se snašao sa zadatkom i objasnio sve o čemu sam znao html tabele. I preporučujem vam da dobro popravite materijal.
Pokušajte da kreirate sopstvenu tabelu, ili još bolje, čitav okvir za web stranicu iz html tabele.
Sve najbolje vama!
Hvala što ste posjetili moj blog
Zbog raznovrsnosti tabela, velikog broja parametara koji kontrolišu njihov izgled, tabele su odavno postale određeni standard za izgled web stranica. Tablica s nevidljivim rubom je poput modularne mreže u čije je blokove zgodno postaviti elemente web stranice. Međutim, ovo nije sasvim ispravan pristup, jer je svaki HTML objekat definisan za svoje potrebe, a ako se koristi neprikladno, i svuda, to znači da nema alternative. Tako je bilo dugo vremena, sve dok tabele nisu zamijenjene slojevima prilikom postavljanja stranica. To ne znači da se slojevi sada koriste cijelo vrijeme, ali trend je već jasno ocrtan - tabele se koriste za smještaj tabelarnih podataka, a slojevi se koriste za izgled i dizajn.
Kreirajte tabelu
Tabela se sastoji od redova i kolona ćelija koje mogu sadržavati tekst i grafiku. Tabele se obično koriste za organiziranje i predstavljanje podataka, ali tabele nisu ograničene na to. Uz pomoć tabela, zgodno je napraviti izgled stranica, raspoređujući fragmente teksta i slike po potrebi.
Oznaka se koristi za dodavanje tabele na web stranicu. . Ovaj element služi kao kontejner za elemente koji definiraju sadržaj tabele. Svaka tabela se sastoji od redova i ćelija, koje se postavljaju pomoću oznaka i | . Tabela mora sadržavati najmanje jednu ćeliju (primjer 12.1). Dozvoljeno umjesto oznake | koristiti oznaku | . Tekst u ćeliji stiliziran oznakom | , pretraživač prikazuje podebljano i centriran je u ćeliji. Inače, razlike između ćelija kreirane su preko oznaka | i | br.
Primjer 12.1. Kreirajte tabelu
TABLE tag
| Ćelija 1 |
Ćelija 2 |
| Ćelija 3 |
Ćelija 4 |
Raspored ćelija i njihov izgled prikazan je na sl. 12.1. je tijelo stola. Tijelo se sastoji od redova i kolona. Tabela se popunjava red po red.
Svaka oznaka | kreira novu liniju. Sljedeće u ugniježđenom kolone se kreiraju. Možete kreirati više kolona. U tom slučaju morate pratiti broj kolona u svakom redu. Na primjer, ako je prvi red imao 5 kolona, onda bi sljedeći redovi također trebali imati 5 kolona. U suprotnom će tabela plutati. Moguće je spajanje ćelija.
Kako napraviti tabelu u html-u
Evo primjera, html koda:
| Primjer tablice |
| Kolona 1 |
Kolona 2 |
Obratite pažnju na ćeliju | . Koristimo poseban atribut colspan za horizontalno premještanje ćelija. Njegova numerička vrijednost određuje broj stupaca za spajanje. Postoji i analog ovog atributa: oznaka | (zaglavlje tabele), gde takođe treba da napišete colspan. Rezultat će biti isti. Ali često koriste običan td.
Pogledajmo detaljnije sve atribute oznaka.
.
Atributi i svojstva oznake
Za otvaranje oznake Možete dodati različite atribute.
1. Svojstvo align="parameter" - postavlja poravnanje tabele. Može poprimiti sljedeće vrijednosti:
U gornjem primjeru, centrirali smo tabelu sa align="center" .
Ovaj atribut se može primijeniti ne samo na tablicu, već i na pojedinačne ćelije tablice. ili linije | . Dakle, poravnanje će biti različito u različitim ćelijama.
na primjer
| ... |
| ... |
...
2. Svojstvo background="URL" - postavlja pozadinsku sliku. Umjesto URL-a, treba napisati adresu pozadinske slike.
Primjer
| Primjer tablice |
| Kolona 1 |
Kolona 2 |
Transformira se na stranici u sljedeće:
U gornjem primjeru, naša pozadinska slika nalazi se u folderu img (koji se nalazi u istom direktoriju kao i html stranica), a slika se zove fon.gif. Obratite pažnju da smo u tag dodali style="color:white;" . Kako je pozadina skoro crna, kako se tekst ne bi stopio u pozadinu, tekst smo napravili bijelim.
3. Svojstvo bgcolor="color" - postavlja boju pozadine tabele. Kao boju možete odabrati bilo koju od cijele palete (pogledajte kodove i nazive html boja)
4. Svojstvo border="number" - postavlja debljinu okvira tabele. U prethodnim primjerima naveli smo border="1" , što znači da je ivica debela 1 piksel.
5. Svojstvo bordercolor="color" - postavlja boju ivice. Ako granica="0" , tada neće biti ivice i boja ivice neće imati smisla.
6. Svojstvo cellpadding="number" - dopuna od okvira do sadržaja ćelije u pikselima.
7. Svojstvo cellspacing="number" - udaljenost između ćelija u pikselima.
8. Svojstvo cols="number" - broj kolona. Ako ga ne postavite, pretraživač će odrediti broj kolona. Jedina razlika je u tome što će specificiranje ovog parametra najvjerovatnije ubrzati učitavanje tabele.
9. Svojstvo frame="parameter" - kako prikazati ivice oko stola. Može poprimiti sljedeće vrijednosti:
- void - ne crtajte granice
- granica - granica oko stola
- iznad - ivica duž gornje ivice tabele
- ispod - donja ivica tabele
- hsides - dodajte samo horizontalne ivice (gornji i donji dio tabele)
- vsides - nacrtajte samo okomite granice (lijevo i desno od tabele)
- rhs - granica samo na desnoj strani tabele
- lhs - ivica samo na lijevoj strani tabele
10. Svojstvo height="number" - postavlja visinu tabele: u pikselima ili u procentima.
11. Property rules="parameter" - gdje prikazati granice između ćelija. Može poprimiti sljedeće vrijednosti:
- sve - crta se crta oko svake ćelije tabele
- grupe - linija se povlači između grupa koje formiraju oznake , , ,
ili
- cols - linija se prikazuje između kolona
- nijedan - sve granice su skrivene
- redovi - granica se iscrtava između redova tabele kreiranih preko oznake
12. Svojstvo width="number" - postavlja širinu tabele: u pikselima ili u procentima.
13. Svojstvo class="class_name" - možete odrediti ime klase kojoj tabela pripada.
14. Svojstvo style="styles" - stilovi se mogu postaviti pojedinačno za svaku tabelu.
Sada je vrijeme da zaronite u tabelu i pogledate atribute ćelija tabele. Ovi atributi moraju biti upisani u početnu oznaku.
.
Atributi i svojstva i |
1. Svojstvo align="parametar" - postavlja poravnanje zasebne ćelije tabele. Može poprimiti sljedeće vrijednosti:
- lijevo - lijevo poravnanje
- centar - centralno poravnanje
- desno - desno poravnanje
2. Svojstvo background="URL" - postavlja pozadinsku sliku ćelije. Umjesto URL-a, treba napisati adresu pozadinske slike.
3. Svojstvo bgcolor="color" - postavlja boju pozadine ćelije.
4. Svojstvo bordercolor="color" - postavlja boju ivice ćelije.
5. Svojstvo char="letter" - postavlja slovo od kojeg treba izvršiti poravnanje. Vrijednost atributa align mora biti postavljena na char.
6. Svojstvo colspan="number" - postavlja broj spojenih horizontalnih ćelija.
7. Svojstvo height="number" - postavlja visinu tabele: u pikselima ili u procentima.
8. Svojstvo width="number" - postavlja širinu tabele: u pikselima ili u procentima.
9. Svojstvo rowspan="number" - postavlja broj vertikalnih ćelija koje će se spojiti.
10. Svojstvo valign="parameter" - vertikalno poravnanje sadržaja ćelije.
- vrh - poravnajte sadržaj ćelije sa vrhom reda
- srednje - srednje poravnanje
- dno - donje poravnanje
- osnovna linija - poravnanje osnovne linije
Napomena 1 Za Tag | Dostupne su iste opcije kao za | . Opcije za jednu oznaku | će se hijerarhijski primjenjivati na sve unutar njega
Kako spriječiti da se granice ćelija lijepe u tabeli
U slučaju korištenja obruba (granice ćelije) i nulte podloge između ćelija, one su i dalje zalijepljene zajedno i dobija se udvostručen obrub. Da biste to izbjegli, trebate stilizirati tablicu s border-collapse: collapse :
...
Dragi čitaoče, sada ste naučili mnogo više o html tablici. Sada vam savjetujem da pređete na sljedeću lekciju.
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
Razvojem WWW-a postalo je jasno da alati koji su ugrađeni u HTML nisu dovoljni za kvalitetan prikaz raznih vrsta 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 prezentacije tabela nije bio dovoljno kvalitetan i bio je van opšteg stila dokumenta. Uvođenjem tabela u HTML, webmasteri su dobili ne samo alat za postavljanje teksta i brojeva, već i moćan alat za dizajn za postavljanje grafike i teksta na pravo mjesto na ekranu.
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
Table
| Ako tabela ima dvije TR oznake, onda ima dva reda. |
| Ako postoje tri TD oznake u redu, |
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 podebljane fontove u tabelama, pa je najbolje postaviti zaglavlja tablice koristeći<ТН>.
| 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 - tag<САРТ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
Tipično, svaki tekst koji ne stane u jedan red ćelije tabele prelazi u 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 običnih ć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.
Atribut WIDTH
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 pomalo č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žete koristiti prazan niz<ВR>. Možete čak definirati prazne stupce tako što ćete odrediti njihovu širinu u pikselima ili relativnim jedinicama i ne unositi nikakve podatke u rezultirajuće ć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 korištenjem atributa ALIGN i VALIGN. Atribut ALIGN određuje horizontalno poravnanje teksta i grafike, odnosno lijevo, desno ili centrirano. Horizontalno poravnanje može se postaviti 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 se može postaviti 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. Kada kreirate ugniježđene tablice, morate napraviti ivice različite debljine za različite tablice kako biste ih lakše razlikovali.
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 želite da ostavite prazan prostor, 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. Vrijednost ovog atributa 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 slike u pozadini. 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 u pogledu korištenja "bijelog prostora" kao kreatori štampanih stranica. Tabele su najbolji način da se odmaknete od hijerarhijskog rasporeda teksta na web stranicama.
Ako pretraživač podržava tabele, obično će ispravno prikazati najzanimljivije efekte dobijene sa njima.
Uralski državni pedagoški univerzitet
Dobrodošli!
| Trening kurs "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 prekrasnim rubom, već i postaviti boju za njega 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 zadatu boju. Kao rezultat toga, boja pozadine će biti vidljiva na svim ivicama tablice i vodoravnim linijama (<Н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.
Top Related Articles
| |
|
| |
