Svaka osoba koja je ikada željela stvoriti stranicu za svoj projekt suočila se s problemom njegova pisanja. Nije svatko želi platiti, a ne svaki proračun može priuštiti, za stvaranje web-mjesta za profesionalne webmastere, tako da većina početnika njihov način da web kreatori početi učiti tehnike izgleda. Budući da kvalitetan sadržaj i dostupnost kupljenog prostora na poslužitelju koji hostira stranicu nije dovoljno za postojanje. Prije svega, morate stvoriti "kostur" stranicu.

Što je HTML tablica?

Da biste odgovorili na ovo pitanje, morate definirati pojam rasporeda. Gniježđenje - proces stvaranja strukture html-stranica, stavljanje na njega glavnih elemenata. Raspored tablica je, odnosno, uporaba tablice s nevidljivom konturom kao struktura stranice. To jest, stranica stranice će biti tablica s određenim brojem stupaca i redaka, gdje svaka ćelija ima određeni element.


Izgledi html-dokumenata stvoreni tabelarnim prikazom koriste se u velikoj većini mjesta i koriste se više od 10 godina. To je zbog jednostavnosti strukture, punjenja, kao i svestranosti takve oznake, koja se prikazuje na isti način u različitim preglednicima.

Prva faza izrade mjesta

Raspored tablica počinje označavanjem: html kod stranice se piše tablicom koja se sastoji od određenog broja stupaca i redaka. Za izradu proračunske tablice u HTML-u koristi se posebna oznaka za otvaranje.Unutar njega, oznake se koriste za stvaranje niza,

za stvaranje zaglavlja tablice i

za stvaranje stupca. Stupci i zaglavlja stvaraju se unutar oznake retka, a svaki stupac može biti bilo koji broj stupaca.

Prva tablica
Prvi stupac	Drugi stupac

Mogućnost stvaranja tablice omogućuje izvođenje html-tabličnog prikaza stranica, tako da morate saznati koji su atributi u stvaranju oznaka i kako ih koristiti.

Glavni atributi tabličnih oznaka

Oznaka Ova oznaka, kao simbol za otvaranje tablice, služi za ograničavanje njene strukture, koja određuje njen položaj na stranici i opći izgled svih ćelija, zbog atributa:

Svojstvo poravnanja koristi se za poravnanje položaja tablice , može uzeti vrijednosti "lijevo", "središte" i "desno". To je poravnanje na lijevom rubu, sredini i desno.

Atribut pozadine omogućuje postavljanje pozadinske slike za tablicu s vezom na nju.

Bgcolor određuje boju pozadine tablice, vrijednost može biti ime ili kod bilo koje boje.

Border-definira debljinu okvira tablice i označava se u milisekundama.

Bordercolor postavlja boju obruba.

Postavljanje tipkovnice omogućuje postavljanje razmaka između teksta i granica ćelija.

Svojstvo Frame govori pregledniku da prikaže granice tablice uzimajući vrijednosti void, border, above, below, hsides, vsides, rhs, lhs. Što, prema tome, znači ne prikazivanje granice, crtanje okviraoko stola, čine samo gornju granicu ili samo dno vidljivim, ne skrivaj samo horizontalne granice ili samo okomito, samo odražava desnu ili samo lijevu granicu.

Atribut pravila daje informacije o tome koje granice ćelije trebaju prikazati. Vrijednost none vam omogućuje da sakrijete sve granice, sve ukazuju na njihov prikaz, cols postavlja položaj linija između stupaca, a redovi - između redova.

Oznaka
Ova oznaka stvara redak tablice koji odgovara njegovom izgledu. Ima mali skup atributa: poravnajte kako biste poravnali tekst u retku, bgcolor određuje boju pozadine ćelije, bordercolor postavlja boju granice oko crte. Oznake

i

Ove dvije oznake imaju otprilike jednaku funkcionalnost: kreirajte ćeliju u nizu i postavite njezine uvjete prikaza pomoću atributa:

Abbr vam omogućuje kratak komentar na ćeliju.

Poravnavanje je odgovorno za usklađivanje sadržaja triju horizontalnih položaja.

Pozadina se koristi za popunjavanje pozadine ćelije određenom slikom.

Bgcolor se koristi za postavljanje boje pozadine u ćeliji.

A bordercolor određuje boju granica ćelije.

Visina služi za određivanje visine ćelije.

Nowrap je obvezan zabraniti prijenos niza.

Težina određuje širinu ćelije.

Primjer html-izgleda stranice

Nakon proučavanja teorije rada s tablicama u html-u, možete početi stvarati vlastiti izgled stranice. Da biste to učinili, odredite koji će funkcionalni blokovi biti na vašoj web-lokaciji. Ovo može biti šešir, podrum,blok sadržaja, bočni blokovi. U izgledu HTML tablice potrebno je samo stvoriti tablicu.
Zapravo, u ovoj fazi, možete stvoriti potpuno dovršen izgled postavljanjem izgleda svakog elementa kroz gore opisana svojstva oznaka. I onda samo trebate kopirati kod tablice na svaku novu stranicu tako da ima jedan stil. Ali to je prilično nezgodno, budući da će stil stranice biti spremljen samo u njegovu datoteku, što znači da ako trebate nešto promijeniti, morat ćete se jako potruditi pronaći traženi atribut stila u svakom dokumentu i promijeniti njegovu vrijednost. No postoji mogućnost optimizacije tog procesa pomoću metode tabličnog izgleda CSS-a. Stoga pri izradi HTML tablice ne morate koristiti atribute stila u dokumentu. Jedini atribut koji se koristi je id, koji vam tada omogućuje da se odnosite samo na stil jednog elementa. To je univerzalni atribut koji se koristi s bilo kojim oznakama. Potrebne su vrijednosti koje se sastoje od latiničnih slova i simbola. Prilikom stvaranja tablice, morate postaviti ID za oznaku, na primjer, s vrijednošću "document". Zatim, za ćeliju (oznaku

ili

) koja je dodijeljena u zaglavlju, atribut id može prihvatiti vrijednost "header". Lijevi izbornik može se zvati "left_side", a desno "right_side". Blok sadržaja, pretpostavimo, će se zvati "sadržaj", a baza stranice - "podnožje".

Ovo će prikazati stranicu u pregledniku.

Druga faza izgleda

Stvoreni dokument mora biti povezan sa stilskimCSS datoteka za kontrolu izgleda objekata stranice. Da biste to učinili, morate stvoriti CSS dokument, nazvati ga, na primjer, mystyle.css. I sada unutar oznake u glavnom dokumentu stranice morate propisati sljedeće: Zatim, upisivanjem uvjeta mystyle.css prikaza elemenata, možete promijeniti izgled stranice kako želite. Na primjer, svojstvo boje određuje boju teksta, a pozadina određuje kako će izgledati pozadina elementa. Postoji oko 20 glavnih svojstava, pomoću kojih možete promijeniti položaj elemenata, njihovu veličinu, boju i odabir. Dakle, ovaj raspored nije jako kompliciran i može biti učinjen od strane početnika, ali koliko će biti kreativan i zanimljiv, ovisi samo o vama.

CSS-raspored

Kao što znate, većina webmastera sada odabire drugi između tablice i izgleda bloka u html-u. To je prvenstveno zbog činjenice da je kod rasporeda tablica vrlo glomazan, a to otežava preuzimanje stranice. Obujam koda objašnjava se prisutnošću složene strukture strukture tablice (razina 3: tada i tek nakon

.) Ova okolnost čak nadjačava očite prednosti izgleda tablice, kao što je jasna hijerarhija elemenata, fiksna pozicija, unakrsno pretraživanje i jednostavnost rasporeda. No, tu je rješenje za ovaj problem u jeziku Cascading Style Sheets (CSS).
Raspored CSS-a s karticama može se izvesti, na primjer, ako u oznaci postoje samo pojedinačni elementi koji nisu tablica. Da biste optimizirali kôd, možete stvoriti dokumente tablice izravno putemsvojstva stilova. To koristi svojstvo prikaza, koje govori pregledniku kako da opazi taj ili onaj element u dokumentu. Na primjer, ako je vrijednost tablica, tada se stavka prikazuje kao tablica, a ako je tablica-redak ili ćelija tablice tablica i ćelijska linija. Time se eliminira potreba za korištenjem oznaka oznaka u html skupu.

Adaptivni raspored tablica

Adaptivni raspored uključuje promjenu prikaza mjesta na različitim zaslonima, ovisno o razlučivosti i veličini zaslona. To je prilično težak zadatak za razvojnog inženjera, jer zahtijeva pažljive izračune i testiranje na mnogim platformama. Ipak, bilo koji popularni moderni resurs ne može se zamisliti bez korištenja adaptacije za različite uređaje. I CSS se koristi za rješavanje ovog problema. Prije svega, tako da je u svim preglednicima site style bio jedini, trebate resetirati sve standarde prikaza preglednika koristeći css reset kako biste se riješili nestandardnih uvlačenja, odabira i slično. Drugo, morate primati upite medija iz uređaja koji se povezuju s resursom kako biste dobili informacije o razlučivosti zaslona i primijenili prilagodbu. U tu svrhu se uglavnom koriste svojstva min-width, max-width i display. Prva dva definiraju granice proširenja bloka, a svojstvo prikaza s vrijednošću none ne omogućuje skrivanje velikih i nefunkcionalnih blokova na zaslonima niske rezolucije.

Primjeri

Nije bitno koja metoda programer koristi za stvaranje markupa, on će ga moći urediti koristeći CSS tako jedinstven iDovoljno je estetske mašte. Ispod su primjeri izgleda HTML tablica. Još jedan primjer. I možete to organizirati i tako. Zapravo, uopće nije bitno da izgled tablica više ne izgleda suvremeno i relevantno - lako se kompenzira kreativnošću i pismenošću dizajnerskog dizajna.