Kako napraviti tabelu u css-u. Višeslojna numerisana lista
29.03.2019
vijesti
Online primjeri
formu
Ovaj primjer pokazuje kako kreirati tabelu u HTML dokumentu.
(Više primjera možete pronaći na dnu ove stranice.)
HTML tabela
Forma definisana od strane
tag. Svaka tabela ima određeni broj linija (definiranih od tag), svaka linija je podijeljena na određeni broj ćelija (definiranih pomoću oznaka). Odnosi se na sadržaj slova td tabelarni podaci (tabelarni podaci), odnosno na ćeliju podataka. Ćelija sa podacima može sadržavati tekst, slike, liste, pasuse, forme, horizontalne, tabele i tako dalje.Primer tabele
red 1, ćelija 1 |
red 1, ćelija 2 |
red 2, ćelija 1 |
red 2, ćelija 2 |
Pregledač prikazuje sljedeće: | red 1, ćelija 1 | red 1, ćelija 2 |
| red 2, ćelija 1 | red 2, ćelija 2 |
HTML tabele i svojstva granicaAko ne definirate atribut granice, tabela se neće prikazati. Ponekad je ovo korisno, ali većinu vremena želimo pokazati granicu. Koristite svojstvo granice da prikažete tabelu sa ivicama:
Red 1, ćelija 1 |
Red 1, ćelija 2 |
HTML zaglavlje tabeleZaglavlje tabele koristeći | tag je definisan. Većina pretraživača će prikazati tekst zaglavlja podebljano u sredini:
Zaglavlje 1 |
Zaglavlje 2 |
|---|
red 1, ćelija 1 |
red 1, ćelija 2 |
red 2, ćelija 1 |
red 2, ćelija 2 |
Pregledač prikazuje sljedeće: | Zaglavlje 1 | Zaglavlje 2 |
|---|
| red 1, ćelija 1 | red 1, ćelija 2 |
| red 2, ćelija 1 | red 2, ćelija 2 |
Nema graničnog stola
Ovaj slučaj nije pokazao granicu tabele. Zaglavlje tabele (naslov)
Ovaj primjer pokazuje kako prikazati zaglavlje tablice. Tabela sa naslovima
Ovaj primjer pokazuje naslovom (naslovom) obrasca Međubankarska po kolonama ili ćeliji tabele
Ovaj primjer pokazuje kako definirati unakrsne ili poprečne stupce ćelije tabele. Oznake unutar tabele
Ovaj primjer pokazuje kako prikazati elemente u različitim elementima. Dopuna ćelije (Cell padding)
Ovaj primjer demonstrira kako se koristi dopuna ćelije za kreiranje sadržaja prazne ćelije i njenih granica između. Razmak između ćelija (razmak između ćelija)
Ovaj primjer pokazuje kako koristiti razmak ćelija za povećanje udaljenosti izmeđućelije.
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 postavljaju u skladu sa tim pomoću oznaka i | ... Tabela mora sadržavati najmanje jednu ćeliju (primjer 1). Dozvoljeno umjesto oznake | koristiti oznaku | ... Tekst u ćeliji ukrašen oznakom | , koje pretraživač prikazuje u fontu bold i poravnat je sa središtem ćelije. Inače, razlike između ćelija stvorene su preko oznaka | i | br.
Primjer 1. Kreiranje tabele
HTML5 IE Cr Op Sa Fx
Table tag
| Ćelija 1 |
Ćelija 2 |
| Ćelija 3 |
Ćelija 4 |
Redoslijed ćelija i njihov izgled prikazan je na Sl. jedan.
Rice. 1. Rezultat kreiranja tabele sa četiri ćelije
Atribut granice oznake dozvoljeno je dodati samo sa prazna vrijednost () ili jednako 1. Sve ostale vrijednosti nisu potvrđene.
Svojstvo stila dopune se koristi za kontrolu margina unutar ćelija, koje se dodaje td selektoru. Razmak između ćelija se mijenja svojstvom razmaka granica (primjer 2) dodanim selektoru tablice, IE pretraživač to razumije tek od verzije 8.0.
Primjer 2. Polja unutar ćelija
HTML5 CSS 2.1 IE Cr Op Sa Fx
Table tag
| Naslov 1 | Naslov 2 |
|---|
| Ćelija 3 | Ćelija 4 |
Tabela sa poljima i razmacima između ćelija prikazana je na Sl. 2. Sličan rezultat može se postići uz pomoć okvira bijela oko ćelija.
Rice. 2. Polja u ćelijama tabele
Zbog raznovrsnosti stolova, veliki broj parametara koji kontrolišu njihov izgled, tabele su odavno postale definitivan standard za izgled web stranica. Stol sa nevidljiva granica je kao modularna mreža, u čije blokove je zgodno postaviti elemente web stranice. Međutim, to zapravo nije pravi pristup jer svi HTML objekat je definiran za svoje potrebe i ako se koristi u druge svrhe, štoviše, to znači da nema alternative. I tako je bilo dugo vremena sve dok slojevi nisu došli da zamijene tabele u izgledu lokacije. To ne znači da se slojevi sada koriste cijelo vrijeme, ali trend je već jasno ocrtan - 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. Obično se tabele koriste za organizovanje i predstavljanje podataka, ali mogućnosti tabela nisu ograničene na to. Uz pomoć tabela, zgodno je kucati raspored stranica postavljanjem na pravi način fragmenti teksta 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 postavljaju u skladu sa tim pomoću oznaka i | ... Tabela mora sadržavati najmanje jednu ćeliju (primjer 12.1). Dozvoljeno umjesto oznake | koristiti oznaku | ... Tekst u ćeliji ukrašen oznakom | , koje pretraživač prikazuje podebljano i poravnato sa središtem ćelije. Inače, razlike između ćelija stvorene su preko oznaka | i | br.
Primjer 12.1. Kreiranje tabele
TABLE tag
| Ćelija 1 |
Ćelija 2 |
| Ćelija 3 |
Ćelija 4 |
Redoslijed ć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 | stvara nova linija... Dalje u ugniježđenom kolone se kreiraju. Može se 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 sledeći redovi trebalo bi da ima 5 kolona. U suprotnom, tabela će plutati. Moguće je kombinovati ćelije.
Kako napraviti tabelu u html-u
Dajemo primjer, html kod:
| Primjer tabele |
| Kolona 1 |
Kolona 2 |
Obratite pažnju na ćeliju | ... Koristimo poseban atribut colspan za vodoravno kombiniranje ćelija. Njegova numerička vrijednost označava broj kolona koje treba kombinirati. Postoji i analog ovog atributa: oznaka | (zaglavlje tabele), gde takođe treba da napišete colspan. Rezultat će biti isti. Ali uobičajeni td se često koristi.
Sada pogledajmo bliže sve atribute oznake.
.
Atributi i svojstva oznake
Do uvodne oznake možete napisati razne atribute.
1. Svojstvo align = "parametar" - postavlja poravnanje tabele. Može poprimiti sljedeće vrijednosti:
U gornjem primjeru, poravnali smo tabelu po sredini align = "center".
Ovaj atribut se može primijeniti ne samo na tablicu, već i na pojedinačne ćelije tablice. ili žice | ... Dakle, u različite ćelije poravnanje će biti drugačije.
na primjer
| ... |
| ... |
...
2. Svojstvo background = "URL" - postavlja pozadinska slika... Umjesto URL-a, mora biti napisana adresa pozadinske slike.
Primjer
| Primjer tabele |
| Kolona 1 |
Kolona 2 |
Pretvoreno na stranici u sljedeće:
U razmatranom primjeru, naš pozadinska slika nalazi se u folderu img (koji se nalazi u istom direktoriju kao i html stranica), a slika se zove fon.gif. Imajte na umu da smo u tag dodali style = "boja: bijela;" ... Kako je pozadina skoro crna, tako da se tekst ne spaja sa pozadinom, 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. Granica svojstva = "broj" - postavlja debljinu ivice tabele. U prethodnim primjerima smo specificirali border = "1", što znači da je širina ivice 1 piksel.
5. Svojstvo bordercolor = "color" - postavlja boju ivice. Ako je granica = "0", onda neće biti ivice i boja granice neće imati smisla.
6. Svojstvo cellpadding = "number" - uvlačenje od okvira do sadržaja ćelije u pikselima.
7. Svojstvo cellspacing = "number" - udaljenost između ćelija u pikselima.
8. Svojstvo cols = "broj" - broj kolona. Ako ga ne navedete, pretraživač će sam odrediti broj kolona. Jedina razlika je u tome što će specificiranje ovog parametra vjerovatno ubrzati učitavanje tabele.
9. Okvir svojstva = "parametar" - kako prikazati ivice oko stola. Može poprimiti sljedeće vrijednosti:
- void - ne crtajte granice
- granica - granica oko stola
- iznad - ivica na vrhu tabele
- ispod - ivica na dnu tabele
- hsides - dodajte samo horizontalne ivice (gornji i donji dio tabele)
- vsides - nacrtajte samo okomite granice (lijevo i desno od tabele)
- rhs - samo granica desna strana stolovi
- lhs - ivica samo na lijevoj strani tabele
10. Visina svojstva = "broj" - postavlja visinu tabele: ili u pikselima ili u procentima.
11. Pravila svojstava = "parametar" - gdje prikazati granice između ćelija. Može poprimiti sljedeće vrijednosti:
- sve - crta se crta oko svake ćelije u tabeli
- grupe - linija se prikazuje između grupa koje su formirane tagovima , , ,
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 širina = "broj" - postavlja širinu tabele: ili u pikselima ili u procentima.
13. Svojstvo class = "class_name" - možete odrediti ime klase kojoj tabela pripada.
14. Stil svojstva = "stilovi" - 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 pojedinačne ćelije u tabeli. 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, mora biti napisana adresa pozadinske slike.
3. Svojstvo bgcolor = "color" - postavlja boju pozadine ćelije.
4. Svojstvo bordercolor = "color" - postavlja boju ivice ćelije.
5. Svojstvo char = "slovo" - postavlja slovo od kojeg treba izvršiti poravnanje. Značenje align atribut mora biti postavljeno na char.
6. Svojstvo colspan = "number" - postavlja broj horizontalnih ćelija za kombinovanje.
7. Visina svojstva = "broj" - postavlja visinu tabele: u pikselima ili u procentima%.
8. Širina svojstva = "broj" - postavlja širinu tabele: ili u pikselima ili u procentima%.
9. Svojstvo rowspan = "number" - postavlja broj spojenih vertikalnih ćelija.
10. Svojstvo valign = "parametar" - vertikalno poravnanje sadržaja ćelije.
- vrh - poravnava sadržaj ćelije sa vrhom reda
- srednje - srednje poravnanje
- dno - poravnajte prema dnu
- osnovna linija - poravnanje osnovne linije
Napomena 1 Za oznaku | dostupne su iste opcije kao za | ... Parametri za jednu oznaku | će se hijerarhijski primjenjivati na sve unutar njega
Kako spriječiti da se ćelije tabele lijepe zajedno
U slučaju korištenja obruba (granice ćelija) i nulte podloge između ćelija, one su i dalje zalijepljene zajedno i dobijate dvostruku ivicu. Da biste to izbjegli, morate registrirati tablicu border-collapse: collapse u tablici stilova:
...
Dragi čitaoče, sada ste naučili mnogo više o tome html tag sto. Sada vam savjetujem da pređete na sljedeću lekciju.
Top srodni članci
| |
|
| | |
