Kako napraviti tablicu u css-u. Višerazinski numerirani popis
29.03.2019
vijesti
Online primjeri
oblik
Ovaj primjer pokazuje kako stvoriti tablicu u HTML dokumentu.
(Više primjera možete pronaći na dnu ove stranice.)
HTML tablica
Oblik definiran prema
označiti. Svaka tablica ima određeni broj redaka (definiranih od tag), svaki je redak podijeljen na određeni broj ćelija (definiranih s označiti). Odnosi se na sadržaj slova td tablični podaci (tablični podaci), odnosno na podatkovnu ćeliju. Podatkovna ćelija može sadržavati tekst, slike, popise, odlomke, obrasce, horizontale, tablice i tako dalje.Primjer tablice
red 1, ćelija 1 |
red 1, ćelija 2 |
red 2, ćelija 1 |
red 2, ćelija 2 |
Preglednik prikazuje sljedeće: | red 1, ćelija 1 | red 1, ćelija 2 |
| red 2, ćelija 1 | red 2, ćelija 2 |
HTML tablice i svojstva obrubaAko ne definirate atribut granice, tablica se neće prikazati. Ponekad je ovo korisno, ali većinu vremena želimo pokazati granicu. Koristite svojstvo granice za prikaz tablice s obrubama:
Red 1, ćelija 1 |
Red 1, ćelija 2 |
HTML zaglavlje tabliceZaglavlje tablice pomoću | oznaka je definirana. Većina preglednika ć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 |
Preglednik 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 tablice. Zaglavlje tablice (naslov)
Ovaj primjer pokazuje kako prikazati zaglavlje tablice. Tablica s naslovima
Ovaj primjer pokazuje naslovom (naslovom) obrasca Međubankarska po stupcima ili ćeliji tablice
Ovaj primjer pokazuje kako definirati križne ili poprečne stupce ćelije tablice. Oznake unutar tablice
Ovaj primjer pokazuje kako prikazati elemente u različitim elementima. Dopuna ćelije (Cell padding)
Ovaj primjer pokazuje kako upotrijebiti punjenje ćelije za stvaranje sadržaja prazne ćelije i njenih granica između. Razmak između ćelija (razmak između ćelija)
Ovaj primjer pokazuje kako koristiti razmak između ćelija za povećanje udaljenosti između Stanice.
Zadatak
Napravite tablicu i odredite njezine parametre (margine i udaljenost između ćelija) kroz stilove.
Riješenje
Tablica se sastoji od redaka i stupaca ćelija koje mogu sadržavati tekst i slike. Za dodavanje tablice na web stranicu, koristite oznaku ... Ovaj element služi kao spremnik za elemente koji definiraju sadržaj tablice. Bilo koja tablica sastoji se od redaka i ćelija, koje se u skladu s tim postavljaju pomoću oznaka i | ... Tablica mora sadržavati barem jednu ćeliju (primjer 1). Dopušteno umjesto oznake | koristiti oznaku | ... Tekst u ćeliji ukrašen oznakom | , koje preglednik prikazuje u fontu podebljano i poravnat je sa središtem ćelije. Inače, razlike između ćelija stvorene su pomoću oznaka | i | Ne.
Primjer 1. Izrada tablice
HTML5 IE Cr Op Sa Fx
Tablica oznaka
| Ćelija 1 |
Ćelija 2 |
| Ćelija 3 |
Ćelija 4 |
Redoslijed stanica i njihov izgled prikazani su na Sl. jedan.
Riža. 1. Rezultat kreiranja tablice s četiri ćelije
Atribut granice oznake dopušteno je dodati samo sa prazna vrijednost () ili jednako 1. Sve ostale vrijednosti nisu potvrđene.
Svojstvo stila paddinga koristi se za kontrolu margina unutar ćelija, koje se dodaje selektoru td. Razmak između ćelija mijenja svojstvo razmaka obruba (primjer 2) dodano selektoru tablice, IE preglednik ga razumije tek od verzije 8.0.
Primjer 2. Polja unutar ćelija
HTML5 CSS 2.1 IE Cr Op Sa Fx
Tablica oznaka
| Naslov 1 | Naslov 2 |
|---|
| Ćelija 3 | Ćelija 4 |
Tablica s poljima i razmacima između ćelija prikazana je na Sl. 2. Sličan rezultat može se postići uz pomoć okvira bijelim oko stanica.
Riža. 2. Polja u ćelijama tablice
Zbog raznovrsnosti stolova, veliki broj parametara koji kontroliraju njihov izgled, tablice su odavno postale definitivan standard za izgled web stranica. Stol sa nevidljiva granica je kao modularna mreža, u čije je blokove prikladno postaviti elemente web stranice. Međutim, to zapravo nije pravi pristup jer svi HTML objekt 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 zamijeniti tablice u izgledu web mjesta. To ne znači da se slojevi sada koriste cijelo vrijeme, ali trend je već jasno ocrtan – tablice se koriste za postavljanje tabličnih podataka, a slojevi se koriste za izgled i dizajn.
Izrada tablice
Tablica se sastoji od redaka i stupaca ćelija koje mogu sadržavati tekst i slike. Tablice se obično koriste za organiziranje i predstavljanje podataka, ali mogućnosti tablica nisu ograničene na to. Uz pomoć tablica zgodno je postaviti izgled stranica postavljanjem pravi put fragmenti teksta i slike.
Za dodavanje tablice na web stranicu, koristite oznaku ... Ovaj element služi kao spremnik za elemente koji definiraju sadržaj tablice. Bilo koja tablica sastoji se od redaka i ćelija, koje se u skladu s tim postavljaju pomoću oznaka i | ... Tablica mora sadržavati barem jednu ćeliju (primjer 12.1). Dopušteno umjesto oznake | koristiti oznaku | ... Tekst u ćeliji ukrašen oznakom | , koje preglednik prikazuje podebljano i poravnato sa središtem ćelije. Inače, razlike između ćelija stvorene su pomoću oznaka | i | Ne.
Primjer 12.1. Izrada tablice
Oznaka TABLE
| Ćelija 1 |
Ćelija 2 |
| Ćelija 3 |
Ćelija 4 |
Redoslijed stanica i njihov izgled prikazani su na Sl. 12.1. je tijelo stola. Tijelo se sastoji od redova i stupaca. Tablica se popunjava red po redak.
Svaka oznaka | stvara nova linija... Dalje u ugniježđenim nastaju stupci. Može se stvoriti više stupaca. U tom slučaju morate pratiti broj stupaca u svakom retku. Na primjer, ako je prvi red imao 5 stupaca, tada je sljedeće redove treba biti 5 stupaca. Inače će stol plutati. Moguće je kombinirati stanice.
Kako napraviti tablicu u html-u
Dajemo primjer, html koda:
| Primjer tablice |
| 1. stupac |
2. stupac |
Obratite pažnju na ćeliju | ... Koristimo poseban atribut colspan za vodoravno kombiniranje stanica. Njegova brojčana vrijednost označava broj stupaca za kombiniranje. Postoji i analog ovog atributa: oznaka | (zaglavlje tablice), gdje također trebate napisati colspan. Rezultat će biti isti. Ali često se koristi uobičajeni td.
Sada pogledajmo pobliže sve atribute oznake.
.
Atributi i svojstva oznake
Na početnu oznaku možete napisati razne atribute.
1. Svojstvo align = "parametar" - postavlja poravnanje tablice. Može poprimiti sljedeće vrijednosti:
U gornjem primjeru, poravnali smo tablicu u središnji align = "center".
Ovaj se atribut može primijeniti ne samo na tablicu, već i na pojedinačne ćelije tablice. ili žice | ... Dakle, u različite stanice poravnanje će biti drugačije.
na primjer
| ... |
| ... |
...
2. Pozadina svojstva = "URL" - postavlja pozadinska slika... Umjesto URL-a mora biti napisana adresa pozadinske slike.
Primjer
| Primjer tablice |
| 1. stupac |
2. stupac |
Pretvoreno na stranici u sljedeće:
U razmatranom primjeru, naš pozadinska slika nalazi se u mapi img (koja se nalazi u istom direktoriju kao i html stranica), a slika se zove fon.gif. Imajte na umu da smo u oznaku dodali style = "boja: bijela;" ... Budući da je pozadina gotovo crna, da se tekst ne spaja s pozadinom, tekst smo napravili bijelim.
3. Svojstvo bgcolor = "color" - postavlja boju pozadine tablice. Kao boju možete odabrati bilo koju od cijele palete (pogledajte kodove i nazive html boja)
4. Granica svojstva = "broj" - postavlja debljinu obruba tablice. U prethodnim primjerima naveli smo border = "1", što znači da je širina obruba 1 piksel.
5. Svojstvo bordercolor = "color" - postavlja boju obruba. Ako je granica = "0", tada neće biti obruba i boja obruba neće imati smisla.
6. Svojstvo cellpadding = "broj" - 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 stupaca. Ako ga ne navedete, preglednik će sam odrediti broj stupaca. Jedina razlika je u tome što će navođenje ovog parametra vjerojatno ubrzati učitavanje tablice.
9. Okvir svojstva = "parametar" - kako prikazati obrube oko stola. Može poprimiti sljedeće vrijednosti:
- void - ne crtajte granice
- granica - granica oko stola
- iznad - obrub na vrhu tablice
- ispod - obrub na dnu tablice
- hsides - dodajte samo vodoravne rubove (gornji i donji dio tablice)
- vsides - nacrtajte samo okomite granice (lijevo i desno od tablice)
- rhs - granica samo na desna strana tablice
- lhs - obrub samo na lijevoj strani stola
10. Visina svojstva = "broj" - postavlja visinu tablice: ili u pikselima ili u postocima.
11. Pravila svojstava = "parametar" - gdje prikazati granice između ćelija. Može poprimiti sljedeće vrijednosti:
- sve - crta se povlači oko svake ćelije u tablici
- grupe - linija se prikazuje između grupa koje su formirane oznakama , , ,
ili
- cols - linija se prikazuje između stupaca
- nijedan - sve granice su skrivene
- rows - granica se iscrtava između redaka tablice kreiranih kroz oznaku
12. Širina svojstva = "broj" - postavlja širinu tablice: bilo u pikselima ili u postocima.
13. Property class = "class_name" - možete odrediti naziv klase kojoj tablica pripada.
14. Stil svojstva = "stilovi" - stilovi se mogu postaviti pojedinačno za svaku tablicu.
Sada je vrijeme da zaronite u tablicu i pogledate atribute ćelija tablice. Ovi atributi moraju biti upisani u početnu oznaku.
.
Atributi i svojstva i |
1. Svojstvo align = "parametar" - postavlja poravnanje pojedinačne ćelije u tablici. Može poprimiti sljedeće vrijednosti:
- lijevo - lijevo poravnanje
- centar - poravnanje središta
- 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 obruba ć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 = "broj" - postavlja broj horizontalnih ćelija za kombiniranje.
7. Visina svojstva = "broj" - postavlja visinu tablice: ili u pikselima ili u postocima%.
8. Širina svojstva = "broj" - postavlja širinu tablice: ili u pikselima ili u postocima%.
9. Svojstvo rowspan = "broj" - postavlja broj spojenih okomitih ćelija.
10. Svojstvo valign = "parametar" - okomito poravnanje sadržaja ćelije.
- vrh - poravnava sadržaj ćelije s vrhom retka
- srednje - srednje poravnanje
- dno - poravnati prema dnu
- baseline - poravnanje osnovne linije
Napomena 1 Za oznaku | dostupne su iste opcije kao za | ... Parametri za jednu oznaku | bit će hijerarhijski primijenjen na sve unutar
Kako spriječiti da se ćelije tablice lijepe zajedno
U slučaju korištenja obruba (granice ćelija) i nulte podloge između ćelija, one su i dalje zalijepljene i dobivate dvostruki obrub. Da biste to izbjegli, morate registrirati tablicu border-collapse: collapse u tablici stilova:
...
Dragi čitatelju, sada ste naučili mnogo više o html oznaka stol. Sada vam savjetujem da prijeđete na sljedeću lekciju.
Vrhunski povezani članci
| |
|
| | |
