Tablica je mreža ćelija koje tvore redove i stupce. Primjeri tabela uključuju različite finansijske izvještaje, sportske rezultate, kalendare, rasporede itd. Pojedinačni blok mreže naziva se ćelija tablice. Ćelije tablice mogu sadržavati veliki broj informacija, uključujući brojeve, tekst, pa čak i video i audio objekte. Koristeći HTML jezik, tabele se pišu red po red.
Element
služi kao spremnik za elemente koji definiraju sadržaj tablice. Da biste stvorili red tablice, morate dodati unutar elementa
uparena oznaka bloka
(skraćeno od engleskog. "taye row" - red tabele). Koliko oznaka
dodate, onoliko redova u tabeli i bit će ih. Otvaranje oznake
označava početak novog reda u tablici. Elementi se postavljaju iza njega |
(skraćeno od engleskog "taye data" - tablični podaci), od kojih svaki navodi zasebnu ćeliju u ovom retku. Unutrašnji element |
stavite sadržaj (tekst, brojeve, slike itd.) prikazan u tu ćeliju. Kraj linije označen je završnom oznakom |
.
Element
(skraćeno od engleskog "taYe heading" - naslov tablice) - izborni element tablice koji se koristi na isti način kao i element |
međutim, njegova je svrha stvoriti zaglavlje za redak ili stupac. Tipično element |
postavljen u prvi red tabele. Preglednici prikazuju tekst u elementu |
podebljano i centrirano u odnosu na ćeliju. Upotreba elementa u kodu |
pomaže ljudima koji koriste čitače zaslona, a također poboljšava performanse indeksnih tablica tražilica.
Razmotrite jednostavnu tablicu koja ima tri retka i tri stupca, a ćelije u prvom redu su naslovi odgovarajućih stupaca. Tablice se prema zadanim postavkama obično prikazuju bez obruba:
Primjer: Jednostavna HTML tablica
| Naslov 1 | Naslov 2 | Naslov 3 |
|---|
| Ćelija 2x1 | Ćelija 2x2 | Ćelija 2x3 |
| Ćelija 3x1 | Ćelija 3x2 | Ćelija 3x3 |
Granica stola
Već znamo da se tablice prema zadanim postavkama prikazuju bez obruba. Da biste dodali obrub oko stola, morate u dokumentu navesti nekoliko jednostavnih pravila za stilove. Property granica kontrolira prikaz linija mreže tablice, a također postavlja širinu ivice oko tablice u pikselima. Ivica se pojavljuje oko stola i između ćelija. Dodajte okvir širine jednog piksela u već stvorenu tablicu postavljanjem svojstva granica za sve elemente tablice, na primjer, ovako:
Primjer: Primjena svojstva granica
Okvir oko stola
| Naslov 1 | Naslov 2 | Naslov 3 |
|---|
| Ćelija 2x1 | Ćelija 2x2 | Ćelija 2x3 |
| Ćelija 3x1 | Ćelija 3x2 | Ćelija 3x3 |
Jednostruki okvir stola
Prema zadanim postavkama, susjedne ćelije tablice imat će vlastiti obrub. Ovo rezultira nekom vrstom "dvostruke granice" kao što se vidi u gornjem primjeru. Da biste se riješili "dvostruke granice", dodajte CSS svojstvo rušenje granice u vašu tablicu stilova:
Primjer: Primjena svojstva rušenje granice
Okvir oko stola
| Naslov 1 | Naslov 2 | Naslov 3 |
|---|
| Ćelija 2x1 | Ćelija 2x2 | Ćelija 2x3 |
| Ćelija 3x1 | Ćelija 3x2 | Ćelija 3x3 |
Polja tablice i razmaci
Zadano je da ćelije tablice imaju veličinu tako da odgovaraju njihovom sadržaju, ali ponekad je potrebno ostaviti malo razmaka oko podataka tablice. Budući da su razmak i margine povezani s elementima prezentacije podataka, ovaj se prostor može prilagoditi pomoću CSS stilskih listova. Polje ćelije ( padding) Je udaljenost između sadržaja ćelije i njenog ruba. Da biste ga dodali, upotrijebite svojstvo padding do elementa |
ili |
... Razmak između ćelija ( granični razmak) Je li udaljenost između njih ( |
ili |
). Prvo dodijelite vrijednost odvojeni imovine rušenje granice element
a zatim postavite razmak između ćelija promjenom vrijednosti parametra granični razmak... Ranije su atributi bili odgovorni za polja i razmak između ćelija. cellpadding i razmak ćelija element
ali su zastarele u specifikaciji HTML5.
Primjer upotrebe padding i granični razmak:
Primjer: Primjena svojstava padding i granični razmak
padding i razmak između ivica
| Ćelija 1 | Ćelija 2 |
| Ćelija 3 | Ćelija 4 |
Širina stola
Širina koju zauzima tablica u prozoru preglednika može se odrediti pomoću svojstva width CSS, u pikselima ili postocima. Određivanje širine tablice u pikselima omogućuje vam da odredite njenu tačnu širinu. Postotak vam omogućuje da tablicu učinite fleksibilnom, tj. on će se "rastegnuti" ili "smanjiti" ovisno o tome koji su drugi elementi na stranici i koliko je veliki prozor preglednika.
Evo primjera korištenja svojstva width: Stol (širina: 100%;) Primjer: Primjena svojstva width
| Ćelija 1 | Ćelija 2 |
| Ćelija 3 | Ćelija 4 |
širina: 100%
| Ćelija 1 | Ćelija 2 |
| Ćelija 3 | Ćelija 4 |
Spojene ćelije (colspan i raspon redova)
Jedna od glavnih značajki strukture tablice je povezivanje ćelija, koje uključuje rastezanje ćelije za obuhvaćanje više redaka ili stupaca. Ovo omogućava složene strukture tablice: zaglavlja
ili ćelije |
se kombinuju dodavanjem atributa colspan ili redovi... Atribut colspan određuje broj ćelija koje se data ćelija proteže vodoravno, i redovi- okomito.
Spojite kolone
Povezivanje kolona postiže se pomoću atributa colspan u elementima |
ili |
- ćelija je rastegnuta udesno da pokrije sljedeće stupce. U sljedećem primjeru vrijednost atributa colspan je jednako 2, što znači da ćelija mora obuhvatiti dvije kolone.
Primjer: Primjena atributa colspan
Atribut Colspan
| colspan= "2"> Ćelija sa dvije kolone |
|---|
| Ćelija 1 | Ćelija 2 |
| Ćelija 3 | Ćelija 4 |
Povezivanje nizova
Nizovi spojeni pomoću atributa redovi, ponašaju se isto kao spojeni stupci, s jedinom razlikom što je raspon ćelija od vrha do dna i obuhvaća više redova.
Ovaj primjer proteže prvu ćeliju tablice dva reda prema dolje:
Primjer: Primjena atributa redovi
| Ćelija na dvije linije |
Ćelija 1 | Ćelija 2 |
|---|
| Ćelija 3 | Ćelija 4 |
Atribut raspona redova
| redovi= "2"> Ćelija u dva reda |
Ćelija 1 | Ćelija 2 |
|---|
| Ćelija 3 | Ćelija 4 |
Zaglavlje tablice
Oznaka za par se koristi za stvaranje naslova ili naslova tablice
(iz engleskog natpisa - potpis). Element
služi za organiziranje zaglavlja tablice. Nalazi se odmah nakon oznake
ali izvan opisa retka ili ćelije.
Primjer: Korištenje oznake
Element natpisa
Ovo je zaglavlje tablice
| Ćelija na dvije linije |
Ćelija 1 | Ćelija 2 |
|---|
| Ćelija 3 | Ćelija 4 |
Grupisanje oznaka za stavke tabele
Za grupiranje elemenata tablice koristite oznake
,
i
... Kao što web stranica može sadržavati zaglavlje, tijelo i podnožje, tablica može sadržavati glavu, tijelo i podnožje. Za logičko grupiranje redova na vrhu tablice (to jest, za kreiranje gornje glave tablice), upotrijebite oznaku
... Zaglavlja tablice moraju se postaviti u element
, na primjer:
| Naslov 1 | Naslov 2< /th> |
|---|
Glavni sadržaj (telo) tabele mora biti unutar elementa
(u tablici može biti nekoliko takvih blokova). Za logičko grupiranje redova pri dnu tablice (to jest, za stvaranje "podnožja" tablice), upotrijebite oznaku
(u jednoj tabeli nije dozvoljeno više od jedne oznake
). U izvornom kodu oznaka
postavljen ispred oznake
... Osim logičkog grupiranja, jedan od razloga korištenja elemenata
i
je da ako je vaša tablica predugačka za prikazivanje odjednom na ekranu (ili za štampanje), preglednik će prikazati naslov (
) i zadnji red (
) kada se korisnik pomiče kroz vašu tablicu.
Primjer: Oznake
,
i
Oznake Thead, tbody i tfoot
| Ovo je zaglavlje tablice |
|---|
| Ovo je podnožje tablice |
| Ćelija 1 | Ćelija 2 | Ćelija 3 | Ćelija 4 |
Uprkos činjenici da smo ispred
dodano
, ipak se pojavljuje na kraju tablice. To dolazi iz činjenice da
može sadržavati mnogo redova. No, preglednik mora prikazati dno tablice prije nego što dobije sve (potencijalno brojne) redove podataka. Zbog toga
u kodu se piše prije elementa
.
Zadaci
Tablice su jedan od najvažnijih, ali složenih elemenata koji moraju biti prisutni na web stranicama. Uz njihovu pomoć, prikladno je iznijeti važne i korisne informacije u prilično jezgrovitom obliku. Naravno, većina urednika u predlošcima koji rade na različitim strojevima omogućuju vam da automatski umetnete tablicu na stranicu web stranice ili zasebnu publikaciju, ali što ako dizajn web izvora, njegove stranice budu stvorene od nule? Tada se čarobnjak za početnike može suočiti s problemom: kako to učiniti. Hajde da shvatimo kako ispravno i brzo stvoriti ovaj element. Odabir urednikaPrije svega, počevši s kreiranjem tablice, trebate odlučiti o uređivaču u kojem ćete raditi. Naravno, najlakši način je da odaberete program u kojem kreirate glavni kod web lokacije. Ali u ove svrhe najbolje je koristiti dobru staru bilježnicu. Možete se pitati zašto sebi komplicirati život, jer ako sve radite odjednom u uređivaču, rezultat se može vidjeti i odmah, a možete upotrijebiti i savjete programa. Da, to je istina, ali stvaranjem tablice od nule nećete moći samo temeljito proučiti sam princip njenog stvaranja, već ćete i spriječiti dosadne pravopisne pogreške i greške u glavnom kodu. Ponekad se dogodi da se kursor slučajno pomakne prema dolje, a u procesu pisanja greška se uvuče u kôd, koji je ponekad teško pronaći. Nakon što kreirate tablicu u bilježnici, možete kopirati njenu šifru i zalijepiti je gdje želite. Algoritam za kreiranje tabelePrvo, sastavimo kratak algoritam o tome kako napraviti tablicu u HTML -u. To je kako biste razumjeli slijed svakog koraka. Zatim ćemo analizirati kako tačno izvesti svaku od tačaka. 
Počnimo s pripremnim koracima. 1. Nacrtajte shematsku sliku stola na listu papira. 2. Brojimo broj linija i ćelija. Ako je broj potonjeg različit, računamo za svaki red posebno. 3. Odredite broj ćelija zaglavlja u redu (na primjer, ćelije "No.", "Name" itd.). 4. Zapišite glavne parametre tablice - boju, visinu i širinu, poravnanje teksta - općenito, sve što mislite da je potrebno. 1. Umetnite oznake tabele. 2. Umetnite oznake linije na osnovu broja koji vam je potreban. 3. U redove umetnite oznake ćelija (obične i velike), također na osnovu broja koji ste napisali na papiru. 4. Postavite parametre za tablicu u cjelini. 5. Ako je potrebno, postavite pokazatelje za pojedinačne ćelije. 6. Napunjavamo ćelije tekstom. 
Napravite tabeluOdabrali ste uređivača, a sada shvatimo kako stvoriti tablicu u HTML -u. Oznaka s kojom je tablica umetnuta u kôd stranice ( ), je uparen, odnosno naša konstrukcija počinje ovom oznakom, a završava sa .Umetnuvši oznake tablice, nastavljamo s stvaranjem redova i ćelija. Odmah napominjemo da su i ovi elementi upareni. Tag navodi nizove i | - ćelije. Za ćelije zaglavlja koristite upareni element | . Kao što je već spomenuto, prvi korak je crtanje linija, a zatim ispisivanje ćelija u njih. Kako se ne biste zbunili, savjetujemo vam da ili napravite uvlaku između svakog bloka u jednom ili dva retka, ili upišete novi blok elemenata pomoću tipke "Tab". Kako bi to moglo izgledati? Kao to: ;;| P / p br. | ;| Prezime | ; ;;| 1 | ;| Ivanov | ; | ; .
Kao što vidite, u tome nema ništa komplicirano. Glavna stvar je da se ne zbunite u broju linija i ćelija. U suprotnom, stol se može iskriviti. Raspravljali smo o stvaranju tablice u HTML -u, sada možemo prijeći na parametre i same matrice i njenih redova i ćelija. 
Parametri tablicePrilikom pisanja koda, trebali biste obratiti pažnju na sljedeće: poravnavanje obruba, pozadine, teksta itd. Parametri tablice postavljeni su u oznaci ... Ovo uključuje:1. Granica - širina ivica. Postavlja se kao cijeli broj. Prema zadanim postavkama granice bilo koje tablice su nule. 2. Bordercolor - boja obruba. Može se postaviti kao heksadecimalni kôd boje (# 00008B), a naziv na engleskom (DarkBlue). Podrazumevano je uvek sivo. 3. Bgcolor - Takođe podešeno prema kodu ili imenu. 4. Poravnaj - poravnavanje teksta iza tabele. Zadano je poravnato lijevo. Za ovaj parametar postoje sljedeće opcije: - lijevo - premotajte oko desno;
- desno -omotavanje lijevo;
- centar - prikazuje tablicu u sredini bez omota.
5. Širina i visina - širina i visina stola. Može se postaviti i u pikselima i kao postotak (u odnosu na veličinu prozora preglednika). Propisujući ovaj ili onaj pokazatelj, trebali biste obratiti posebnu pozornost na dizajn. Parametar mora biti praćen znakom "jednako", nakon čega slijedi navedena vrijednost u navodnicima. Što se tiče boje teksta, stiliziran je na isti način kao i običan tekst u HTML formatu. Primjer dizajna stola: ;;| P / p br. | ;| Prezime | ; ;;| 1 | ;| Ivanov | ; | ; .
Parametri nizaDakle, već smo shvatili kako napraviti tablicu u HTML -u i registrirati njene glavne parametre. Ali šta ako moramo da istaknemo red? Treba li stilizirati drugačije od glavnog teksta tablice? Parametri niza zapisani su u oznaci potpuno isto kao i tablični podaci. Za niz se mogu postaviti sljedeće varijable:1. Granica, bordercolor i bgcolor već su vam poznati. 2. Align - poravnavanje teksta u liniji. Može uzeti vrijednosti lijevo, središte i desno. 3. Valign - ova oznaka poravnava tekst okomito. Poprima sljedeće vrijednosti: - gore - tekst je poravnat prema gornjoj ivici;
- sredina - u centru;
- odozdo - uz donju granicu.
Primjer oblikovanja linija: Parametri ćelijeI posljednja stvar na koju vrijedi obratiti pažnju onima koji žele znati napraviti tablicu u HTML -u su parametri pojedinih ćelija, običnih i velikih. U stvari, sve se radi na isti način kao i za tablicu ili red. Jedino što se dodaje još dva važna elementa: 1. Colspan - ovaj parametar navodi broj stupaca koje ćelija može obuhvatiti. 2. Raspon redova - već označava broj redova koje ova ćelija zauzima. Budući da se dizajn ne razlikuje od pisanja retka, nećemo dati primjer koda. 
zaključciNapraviti stol nije tako teško kao što se na prvi pogled čini. Glavna stvar pri pisanju njenog koda je upornost i pažnja. Što se tiče umetanja tablice u HTML, tada je njezina šifra dovoljna za kopiranje i lijepljenje točno na mjesto vaše stranice na kojoj bi se, prema vašem mišljenju, trebala nalaziti. Slobodno eksperimentirajte i uskoro ćete savladati tehniku izrade stolova do savršenstva. Sretno!
HTML tablice su toliko funkcionalne da ih možete koristiti za unos cijelih web stranica (čitati). Sada ćemo govoriti o umetanju jednostavnih HTML tablica na web stranicu, raščlanjivanju samo oznaka, ali ne i dodirivanju dizajna, jer je bolje ukrasiti tablice CSS stilovima.
Oznake tablice i atributi
Evo osnovnih elemenata koji su vam potrebni za izradu tablica:
- kontejner unutar kojeg se nalazi stol (isto kao za označene ili
za numerisane liste).
- granica- atribut koji određuje debljinu okvira. Bolje je umjesto toga koristiti granično CSS svojstvo.
-
specificira potpis tablice. Ne morate koristiti spremnik, ali ako ipak odlučite nasloviti tablicu, stavite je odmah nakon oznake
, izvan ćelija i linija.
- uparena oznaka koja sadrži red tablice (ćelije se nalaze na istoj razini vodoravno).
|
- oznaka koja stvara ćeliju zaglavlja tablice. Izvana se njegov sadržaj razlikuje od sadržaja u drugim ćelijama - obično unutrašnjeg teksta |
pretraživač je podebljan i centriran.
- spremnik s kojim se stvara jednostavna ćelija. Koliko će takvih oznaka niz sadržavati (tag
, u njemu će biti isto toliko ćelija: jedna oznaka - jedna ćelija.
-
omogućuje vam grupiranje stupaca, brzo i bez pretrpavanja koda, kako biste im postavili zajedničke karakteristike. Pomoću spremnika možete odvojiti logičke dijelove tablice jedan od drugog. Nalazi se iza oznake
, ako ne, onda poslije
.
-
koristi se u istu svrhu kao i
.
može sadržavati
ali ne obrnuto.
- raspon- atribut koji specificira broj stupaca na koje se primjenjuju svojstva spremnika
.
-
,
i
- spremnici koji vam omogućuju podjelu stola na gornje (zaglavlja), glavni (tijelo) i donji (završni) dio. U HTML tabeli, redosled ovih oznaka je isti kao i niz kontejnera
,
i u HTML dokumentu.
- colspan potrebno za kombiniranje ćelija u nizu. Vrijednost atributa sadrži broj koji određuje broj ćelija koje se spajaju.
- redovi spaja ćelije u kolone.
Primjer stvaranja tablice
Napravite HTML dokument i kopirajte u njega sljedeći kod:
Tablica primjera
Alati za izradu web stranica
| Imenovanje | Alat |
| Markup | Html | XHTML |
| Registracija | CSS |
| Razvoj | PHP | Python |
U pregledniku će dokument izgledati ovako: Hajde da analiziramo koji su redovi koda odgovorni za šta.
- otvorio stol postavljanjem debljine okvira.
-
Alati za izradu web stranica
- naslovljeno.
- otvorio liniju.
|
Imenovanje |
- kreirao ćeliju s naslovnim dizajnom.|
Alat |
- kreirao drugu ćeliju zaglavlja u redu. Parametar colspan je pokazao da ova ćelija treba zauzeti dvije vodoravno.
- zatvorio liniju. Ostali redovi stvoreni su na isti način. |
Markup |
Html |
XHTML |
- dodao je drugi red tablice s uobičajenim ćelijama, a ne zaglavljem. Naredni redovi i ćelije umetnuti su na sličan način.
- zatvorio stol.
je tijelo stola. Telo se sastoji od redova i kolona. Tabela se puni red po red.
Svaka oznaka stvara novu liniju. Dalje u ugniježđenom kolone su kreirane. Može se kreirati više stupaca. U tom slučaju morate pratiti broj stupaca u svakom retku. Na primjer, ako je prvi red imao 5 stupaca, onda bi i sljedeći redovi trebali imati 5 stupaca. U suprotnom, stol će plutati. Moguće je kombinirati ćelije.
Kako napraviti tabelu u html -u
Navedimo primjer html koda:
| Tablica primjera |
| Kolona 1 |
Kolona 2 |
Obratite pažnju na ćeliju | ... Koristimo poseban atribut colspan za horizontalno kombiniranje ćelija. Njegova numerička vrijednost označava broj stupaca za kombiniranje. Postoji i analog ovog atributa: tag | (zaglavlje tablice), gdje također trebate napisati colspan. Rezultat će biti isti. Ali uobičajeni td se često koristi.
Sada pogledajmo pobliže sve atribute oznake.
.
Atributi i svojstva oznaka
Na početnu oznaku možete pisati različite atribute.
1. Svojstvo align = "parameter" - postavlja poravnanje tablice. Može poprimiti sljedeće vrijednosti:
U gornjem primjeru tablicu smo poravnali po sredini align = "center".
Ovaj atribut se može primijeniti ne samo na tablicu, već i na pojedinačne ćelije tablice. ili žice | ... Stoga će poravnanje biti različito u različitim ćelijama.
Na primjer
| ... |
| ... |
...
2. Pozadina svojstva = "URL" - postavlja sliku pozadine. Umjesto URL -a, mora biti napisana adresa pozadinske slike.
Primjer
| Tablica primjera |
| Kolona 1 |
Kolona 2 |
Pretvoreno na stranici u sljedeće:
U gornjem primjeru, naša pozadinska slika nalazi se u img mapi (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 = "color: white;" ... Budući da je pozadina gotovo crna, tako da se tekst ne stapa s pozadinom, tekst smo učinili 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 ruba tablice. U prethodnim primjerima smo naveli border = "1", što znači da je širina ivice 1 piksel.
5. Svojstvo bordercolor = "color" - postavlja boju obruba. Ako je border = "0", tada neće biti granica i boja obruba neće imati smisla.
6. Svojstvo cellpadding = "broj" - uvlačenje od okvira do sadržaja ćelije u pikselima.
7. Svojstvo cellpacing = "broj" - udaljenost između ćelija u pikselima.
8. Cols svojstva = "broj" - broj stupaca. Ako to ne navedete, preglednik će sam odrediti broj stupaca. Jedina razlika je u tome što će navođenje ovog parametra vjerovatno ubrzati učitavanje tablice.
9. Okvir svojstva = "parametar" - kako prikazati obrube oko tablice. Može poprimiti sljedeće vrijednosti:
- void - ne povlačite granice
- border - granica oko stola
- gore - obrub pri vrhu tabele
- ispod - obrub pri dnu tablice
- hsides - dodajte samo vodoravne ivice (gornji i donji dio tablice)
- suprotnosti - samo nacrtajte okomite granice (lijevo i desno od tablice)
- rhs - obrub samo na desnoj strani stola
- 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 se prikazuju granice između ćelija. Može poprimiti sljedeće vrijednosti:
- sve - crta se linija oko svake ćelije tablice
- grupe - prikazuje se linija između grupa koje su formirane pomoću oznaka , , ,
ili
- cols - linija se prikazuje između stupaca
- ništa - sve granice su skrivene
- redovi - granica se iscrtava između redova tablice stvorenih putem oznake
12. Svojstvo width = "number" - 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 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 = "parameter" - postavlja poravnanje pojedinačne ćelije u tablici. Može poprimiti sljedeće vrijednosti:
- poravnanje lijevo - lijevo
- centar - poravnajte po sredini
- 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 = "letter" - postavlja slovo iz kojeg treba izvršiti poravnanje. Vrijednost atributa align mora biti postavljena 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. Svojstvo width = "number" - postavlja širinu tablice: ili u pikselima ili u postocima%.
9. Svojstvo rowspan = "broj" - postavlja broj spojenih okomitih ćelija.
10. Svojstvo valign = "parametar" - vertikalno poravnanje sadržaja ćelije.
- vrh - poravnava sadržaj ćelije s vrhom retka
- srednji - srednji položaj
- dolje - poravnajte prema dnu
- baseline - poravnanje osnovne linije
Napomena 1 Za oznaku | dostupne su iste opcije kao i za | ... Parametri za jednu oznaku | će se hijerarhijski primijeniti na sve unutar nje
Kako spriječiti lijepljenje ćelija tablice
U slučaju korištenja ruba (granica ćelija) i nultih razmaka između ćelija, oni se i dalje lijepe zajedno i dobivate dvostruku granicu. Da biste to izbjegli, morate registrirati rubnu tablu-kolaps: tablicu u tablici stilova:
...
Dragi čitatelju, sada si naučio mnogo više o oznaci html table. Sada vam savjetujem da prijeđete na sljedeću lekciju.
Izvorni kod jednostavne HTML tablice
Ćelija 1 |
Ćelija 2 |
Ćelija 3 |
Ćelija 4 |
Ćelija 5 |
Ćelija 6 |
Ćelija 7 |
Ćelija 8 |
Ćelija 9 |
Zaglavlja HTML tabela
U HTML tablicama postoje 2 vrste ćelija. Oznaka definira ćeliju uobičajenog tipa. Ako ćelija djeluje kao naslov, identificira se oznakom.
Primjer HTML tablice s naslovom
| Volkswagen AG |
Daimler AG |
BMW Group |
|---|
| Audi |
Mercedes-Benz |
BMW |
| Skoda |
Mercedes-AMG |
Mini |
| Lamborghini |
Pametno |
Rols Rojs |
Izvorni kod HTML tabele sa zaglavljima
Volkswagen AG |
Daimler AG |
BMW Group |
|---|
Audi |
Mercedes-Benz |
BMW |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Pametno |
Rols Rojs |
Spojite ćelije u HTML tablici
HTML tablice imaju mogućnost kombiniranja ćelija vodoravno i okomito.
To vodoravno spojiti ćelije koristite atribut colspan = " NS", u ćeliji ili, gdje x
To spojiti ćelije okomito koristite attribute spanpan = " NS", u ćeliji ili, gdje x- broj ćelija za kombiniranje.
Ćelije se mogu spojiti vodoravno i okomito u isto vrijeme. Da biste to učinili, upotrijebite i colspan i rowpan atribute za željenu ćeliju:
Tekst ćelije |
Imajte na umu da se broj stavki u retku mijenja kada spojite ćelije. Na primjer, ako tablica ima 3 stupca s ćelijama, a kombiniramo prvu i drugu ćeliju, tada će unutar oznake biti 2 elementa koji definiraju ovaj redak, a prvi će sadržavati atribut colspan = "2".
Primjer HTML tablice s povezivanjem ćelija
HTML izvor tablice sa spojenim ćelijama
Nissan |
|---|
Model |
Oprema |
Dostupnost |
|---|
Nissan Qashqai |
VISIA |
+ |
TEKNA |
+ |
Nissan x-trail |
ACENTA |
+ |
CONNECTA |
- |
Zaglavlja i podnožja i potpis u HTML tablicama
HTML tablice mogu se podijeliti u 3 područja: zaglavlje, tijelo, podnožje.
To se postiže omotavanjem redova odabranog dijela tablice oznakama. definira područje zaglavlja, - podnožje, - tijelo tablice.
Zaglavlja i podnožja prema zadanim postavkama nisu stilizirani (to se može učiniti putem CSS -a ako je potrebno), ali ih mogu koristiti preglednici. Na primjer, pri ispisivanju tablice s više stranica zaglavlja i podnožja mogu se duplicirati na svakoj odštampanoj stranici.
Tačan redoslijed postavljanja oznaka područja u HTML kod tablice je sljedeći: prvo zaglavlje, zatim podnožje, zatim glavno tijelo. U tom slučaju glavni dio stranice bit će prikazan između zaglavlja i podnožja.
Tablici možete dodati potpis po potrebi. Da biste to učinili, upotrijebite oznaku.
Primjer HTML tablice sa zaglavljima i podnožjima i potpisom
Izvorni kod za tablicu sa zaglavljima i podnožjima i potpisom
Komplet Renault Sandero Stepway
Karakteristično |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Dostupnost |
+ |
+ |
+ |
|---|
Snaga motora |
0,9 (90 KS) |
0,9 (90 KS) |
1,5 (90 KS) |
|---|
Gorivo |
benzin |
benzin |
dizel |
|---|
Stopa toksičnosti |
Euro 6 |
Euro 6 |
Euro 5 |
|---|
Kolone i grupe kolona
HTML tablica može se podijeliti na stupce i grupe stupaca pomoću oznaka i.
Ovo razdvajanje omogućuje vam postavljanje stilova za tablicu koristeći minimalni broj CSS svojstava, čime se smanjuje količina koda tablice (umjesto definiranja stilova za svaku ćeliju u stupcu, možete postaviti stilove za jednu ili više kolona odjednom).
Oznake i postavljaju se unutar oznake prije oznaka, AKP6 (EDC) Transmisija |
HTML tabela c izvor i
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENZA 2E3C AL A |
Karakteristično |
|---|
1,5 (90 KS) |
1,2 (115 KS) |
1,5 (90 KS) |
Snaga motora |
|---|
dizel |
benzin |
dizel |
Gorivo |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Transmisija |
|---|
Tablice u izgledu stranice web stranice
Na modernim web mjestima važno je pravilno prikazivanje stranica i na računarima i na mobilnim uređajima. Nije preporučljivo koristiti tablice za stvaranje kostura HTML stranice jer se gubi mogućnost prilagođavanja sadržaja ekranima različitih veličina (računari, pametni telefoni, tableti).
Oznake grupe tablica najbolje se koriste unutar stranice za prikaz sadržaja oblikovanog u tablici.
| |
|
| | |
| | |
