› › Kako napraviti tabelu u html-u. Atribut oznake i

Kako napraviti tabelu u html-u. Atribut oznake i

je tijelo stola. Tijelo se sastoji od redova i kolona. Tabela se popunjava red po red.

Svaka oznaka stvara nova linija. 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

Uzmimo primjer, html kod:

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="parametar" - 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.

. Dakle, poravnanje će biti različito u različitim ćelijama.

Na primjer

, , , 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.

    I Dostupne su iste opcije kao i za će se hijerarhijski primjenjivati ​​na sve I

    Najlakši način da shvatite kako se grupiranje redova i kolona može koristiti je na primjeru Sudoku tablice.


    Col tag postavlja parametre zasebno za svaku kolonu. Nije bitno kako napisati u izvornom kodu:

    ili

    Primjer
    ili linije
    ... ... ...

    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 smo specificirali border="1" , što znači da je ivica debela 1 piksel.

    5. Svojstvo bordercolor="color" - postavlja boju ivice. Ako border="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 granica tabele
    • hsides - dodajte samo horizontalne ivice (vrh i dno tablice)
    • 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. Pravila svojstva="parametar" - 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
    .

    Atributi i svojstva

    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 se spajaju.

    10. Svojstvo valign="parameter" - vertikalno poravnanje sadržaja ćelije.

    • vrh - poravnajte sadržaj ćelije s vrhom reda
    • srednje - srednje poravnanje
    • dno - donje poravnanje
    • osnovna linija - poravnanje osnovne linije
    Napomena 1

    Za Tag

    . Opcije za jednu oznaku
    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 stone prezentacije nije bio dovoljan Visoka kvaliteta i izašao iz opšteg stila dokumenta.  Sa uvođenjem tabela u HTML, webmasteri su dobili ne samo alat za postavljanje teksta i brojeva, već 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<ТН>, automatski se 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 - 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

    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.

    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. Prilikom postavljanja WIDTH=50% u oznaci<ТАВ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. Upotreba ovog atributa je razmotrena 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 korištenju "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 pomoću njih.

    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 oznaci<В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 na to je li vaš pozadinski GIF 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.

    Sto sa ramovima

    Ime Prezime
    Larisa Isaev
    Dmitrij Kolesnikov

    REZULTAT:

    Tabela bez granica

    Sto sa ramovima

    Atributi oznake
    I za spajanje ćelija
    Primjer
    tvorovi
    težina veličina
    mužjaci 1,2 - 2,5 kg do 70cm
    ženke 0,7 – 1,0 kg do 40cm

    REZULTAT:

    tvorovi
    težina veličina
    mužjaci 1,2 - 2,5 kg do 70cm
    ženke 0,7 – 1,0 kg do 40cm

    Prema HTML5 standardu, svi prethodno korišteni atributi tablice, kao npr granica, cellpacing, cell padding itd. više nisu podržani i validator smatra njihovu upotrebu greškama u kodu. Da biste dizajnirali tabele, morate koristiti CSS stilove, sa kojima možete zamijeniti sve zastarjele atribute tablice. Na primjer, umjesto atributa cellpacing svojstvo se koristi za promjenu udaljenosti između ćelija tablice granični razmak, i za poravnavanje sadržaja u ćelijama tabele - svojstva text-align I vertikalno-aling. CSS stilovi za tabele

    html oznake za grupisanje redova tabele

    Oznake se mogu koristiti za kreiranje složenijih tabela:

    Primjer
    konzumacija piva
    PUNO IME. litara
    Ukupno 250
    Ivanov Ivan Ivanovič 133
    Petrov Petr Petrovič 117

    REZULTAT:

    html oznake za grupisanje kolona tablice

    Atribut oznake
    žuta crvena

    REZULTAT:


    Ne pokušavajte postaviti stil text-align za oznake I . Tekst postavljen između oznaka ..., ne nasljeđuje ovaj stil jer oznaka nije podređen ni jednoj oznaci , bez oznake .

    Horizontalno poravnanje teksta u određenoj koloni tabele može se promeniti navođenjem stila text-align za pseudo klasu td:nth-child(n), gdje je n broj kolone. Međutim, ova metoda neće raditi ako postoji atribut među ćelijama tablice colspan.

    Primjer
    Ime Cijena, rub.)
    Plaćanje solarijuma po minuti (od 4 minute)15
    50 minuta solarijuma (14 rub/min, 1 mjesec)700
    100 minuta solarijuma (13 rub/min, 2 mjeseca)1300
    200 minuta solarijuma (12 rub/min, 3 mjeseca)2400

    REZULTAT:


    Međutim, ova metoda neće raditi ako postoji atribut među ćelijama tablice colspan.




    U prošloj lekciji kreirali smo index.html fajl glavne stranice sajta, otvorili ga notepadom i dodali mu HTML kod koji sadrži potrebne html oznake.

    Osim toga, naučili smo kako promijeniti boju pozadine stranice promjenom vrijednosti parametra bgcolor oznake BODY.

    Sada se prisjetimo koji smo raspored ili okvir odabrali za stranicu, o tome govorimo u našem kursu.

    Imajte na umu da je izgled stranice zapravo sto.

    Ovdje treba napomenuti da je jedan od najčešćih načina postavljanja html stranica korištenje tabela.

    U stvari, postoje dvije glavne vrste izgleda stranica za html stranice - korištenjem tabela i korištenjem CSS stilova.

    Trenutno je poželjniji izgled sa CSS stilovima, ali kada kreirate sajt u beležnici, lakše je koristiti tabelarni izgled, pa ćemo se zaustaviti na tabeli.

    U početnom periodu razvoja Interneta uglavnom se koristio tabelarni način rasporeda stranica. Široka upotreba tabela u rasporedu html stranicama zbog činjenice da se tabela može kreirati sa bilo kojim brojem kolona i redova. Veličinu tablice je vrlo lako promijeniti uz pomoć parametara.

    Kada je raspored tabelarni, html stranica je podijeljena na potreban broj ćelija, od kojih svaka zauzima vrlo određeno mjesto na stranici. Kao rezultat, možete dodati blokove sadržaja u željene ćelije tabele, čime ćete sadržaj postaviti na pravo mjesto.



    Pa, nastavimo sa radom. Otvorimo html direktorij i tamo pronađemo opis oznake TABLE. Na samom početku opisa tagova obratite pažnju na napomenu da se tabela sa nevidljivim rubom široko koristi za raspored web stranica, o čemu smo gore govorili.

    Dakle, tabela u kodu web stranice je određena oznakom

    , znamo da se tabela sastoji od vertikalnih kolona i horizontalnih redova koji čine ćelije tabele. Redovi u html tabeli su specificirani tagom , a ćelija je oznaka
    .

    Otvorimo index.html datoteku naše web stranice za uređivanje pomoću Notepad++. I otvorite ga u pretraživaču kako biste vidjeli promjene na stranici.

    Na samom početku ovog članka govorili smo o tome da je izgled stranice koji smo osmislili tabela.

    Štaviše, tabela izgleda sajta će se sastojati od tri reda (Heder, Sadržaj i Podnožje) i dve kolone (Meni i Sadržaj).

    Da bismo dodali tabelu sa tri reda i dve kolone, promenimo naš kod da dodamo sledeće:

    1 red 1 kolona 1 red 2 kolona
    2red 1 kolona 2 red 2 kolona
    3red 1 kolona 3 red 2 kolona

    Da biste postavili ivicu u tabeli, koristite parametar granice. Debljina okvira tabele je navedena u pikselima (px).

    Dodajmo parametar granice našem html kodu, sa vrijednošću argumenta jednakom 1px. To jest, debljina okvira tablice bit će jednaka jednom pikselu:

    1 red 1 kolona 1 red 2 kolona
    2red 1 kolona 2 red 2 kolona
    3red 1 kolona 3 red 2 kolona

    Za poravnavanje tabele sa središtem prozora pretraživača koristimo parametar align, koji može imati tri vrednosti: levo, središte, desno, jasno je da je za poravnavanje tabele sa središtem prozora pretraživača vrednost Argument parametra poravnanja mora biti jednak: centar.

    I hajde da postavimo širinu tabele. Širina tabele je postavljena parametrom širine. Vrijednosti koje ovaj parametar može imati mogu se izraziti kao cijeli broj u pikselima ili kao postotak trenutne širine prozora pretraživača.

    Dodajmo poravnanje i širinu tabele našem kodu, kao rezultat, dobijamo sledeći kod:

    1 red 1 kolona 1 red 2 kolona
    2red 1 kolona 2 red 2 kolona
    3red 1 kolona 3 red 2 kolona

    Osvježavanjem prozora preglednika stranice naše web stranice da vidimo promjene, vidimo da je tabela poravnata sa središtem prozora i da je promijenila širinu.

    Sada se vratimo na okvir tabele, postavili smo ga na 1 piksel u html kodu koristeći vrijednost argumenta graničnog parametra: border=”1”.

    Opet pogledajte parametre oznake TABLE u html referenci, postoje dva parametra koja utiču izgled okvir.

    Prvi parametar: razmak između ćelija - postavlja razmak između ćelija tabele.

    Drugi parametar: cellpadding - udaljenost od okvira do sadržaja ćelije ovisi o vrijednosti argumenta ovog parametra.

    Da bi svi razmaci i pomaci bili minimalni, postavite vrijednosti gornjih argumenata na nulu.

    Kao rezultat, html kod tabele će izgledati ovako:

    1 red 1 kolona 1 red 2 kolona
    2red 1 kolona 2 red 2 kolona
    3red 1 kolona 3 red 2 kolona

    Kao što se sećate, naša tabela treba da ima tri reda, iu prvom redu treba da bude jedna ćelija, u drugom redu treba da budu dve ćelije, au trećem redu takođe treba da bude jedna ćelija.

    Ako pogledamo izgled tablice, vidjet ćemo da je za dovođenje tablice u željeni oblik dovoljno da spojimo horizontalne ćelije prvog i trećeg reda.

    Da bismo to učinili, koristit ćemo parametar colspan. Ovaj parametar se koristi u TD oznaci. Vrijednost argumenta parametra colspan označava broj horizontalnih ćelija koje treba spojiti, u našem slučaju ova vrijednost je 2.

    Pored dodavanja parametra colspan, promijenimo oznake u ćelijama tablice tako da odgovaraju našem izgledu.

    Nakon svih izmjena, puni html kod naše stranice će biti sljedeći:

    Kako napraviti web stranicu u notepadu

    header
    meni sajta Sadržaj
    footer

    Spremimo naš kod u notepad i osvježimo datoteku index.html u pretraživaču da vidimo promjene.

    Dakle, ova lekcija se pokazala prilično velikom, pa nastavimo raditi na html tabeli naše stranice u sljedećoj lekciji.

    Tabele u HTML-u su toliko funkcionalne da ih možete koristiti za kucanje cijelih 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 CSS stilovima.

    Tabelarne oznake i atributi

    Evo glavnih elemenata koji su 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 svojstvo CSS granice.
      postavlja oznaku tabele. Ne možete koristiti kontejner, ali ako ipak odlučite da budete na čelu stola, onda ga stavite odmah nakon oznake , izvan ćelija i redova.
      • - oznaka para koja sadrži red tabele (ćelije koje se nalaze na istom nivou horizontalno).
      • , toliko će ćelija biti u njemu: jedna oznaka - jedna ćelija.
      • omogućava vam da grupišete kolone, brzo i bez zasipanja koda da biste postavili zajedničke karakteristike za njih. Uz pomoć kontejnera možete odvojiti logičke dijelove tabele jedan od drugog. Stavlja se iza oznake
      - oznaka koja kreira ćeliju zaglavlja tabele. Izvana, njegov sadržaj se razlikuje od sadržaja u drugim ćelijama - obično tekst iznutra Pretraživač ističe podebljano i stavlja u centar.
      		• - kontejner sa kojim se kreira jednostavna ćelija. Koliko će takvih oznaka niz sadržavati (tag
      , ako ne, onda poslije .
      • koristi se u istu svrhu kao . može sadržavati , ali ne i obrnuto.
    • raspon- atribut koji specificira broj stupaca na koje se primjenjuju svojstva kontejnera
      • .
      • , I - kontejneri koji vam omogućavaju da tablicu podijelite na gornji (zaglavlje), glavni (tijelo) i donji (završni) dio. U HTML tabeli, redosled ovih oznaka je isti kao i redosled kontejnera , I
      u HTML dokumentu.
    • colspan potrebno za spajanje ćelija u nizu. Vrijednost atributa sadrži broj koji određuje broj ćelija koje se spajaju.
    • raspon redova spaja ćelije po kolonama.

      • Primjer kreiranja tablice

      Kreirajte HTML dokument i kopirajte u njega sljedeći kod:

      Primjer tablice

      Alati za izradu web stranica
      SvrhaAlat
      markupHTMLXHTML
      Decorcss
      RazvojPHPPython

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

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

      • - otvorio sto, podesivši mu debljinu okvira.
        • - naslovio ga.
        • - otvorio liniju.
        • - kreirao ćeliju sa dizajnom zaglavlja.
        • - kreirao drugu ćeliju zaglavlja u redu. Parametar colspan je pokazao da ova ćelija treba da zauzima dvije horizontalno.
        • - zatvori liniju. Ostale linije su kreirane na isti način.
        • - dodao je drugi red tabele sa redovnim ćelijama, a ne zaglavljem. Slično, umetnuti su sljedeći redovi i ćelije.
        • Alati za izradu web stranica
        Svrha Alat
        markup HTML XHTML
        - zatvori sto.
      Popularno u kategoriji:
      Upute za registraciju na Instagram pomoću računara Da li je moguće registrirati se na Instagramu na računaru
      Upute za registraciju na Instagram pomoću računara Da li je moguće...
      čitaj
      Usb lampa za osvjetljenje tastature Kako spojiti LED na usb
      Usb svjetlo za tastaturu Kako spojiti LED na...
      čitaj
      Touchpad: kako postaviti uređaj na laptopu koji zamjenjuje fizički miš
      Touchpad: kako postaviti uređaj na laptop koji zamjenjuje ...
      čitaj
      Postavljanje Windows Server Backup-a
      Postavljanje Windows Server Backup-a
      čitaj
      
      Najnoviji članci
      Prijavite se na moju stranicu u razredu
      čitaj
      Promjena izgleda dugmeta Start u...
      čitaj
      BIOS se ne pokreće: glavni uzroci problema
      čitaj
      Kako vratiti stranicu u kontaktu ako...
      čitaj
      Preuzmite besplatni kaspersky antivirus -...
      čitaj
      Dobar izbor grafičke kartice
      čitaj
      MTS govorna pošta: opis i veza
      čitaj
      Objavljena je konačna verzija Skypea za desktop...
      čitaj
      Top