Tabela - jedan od najvažnijih, ali u isto vrijeme složene elemente koji moraju biti prisutni na web stranicama. Uz njihovu pomoć to je pogodan za primjenu važan i korisne informacije u prilično sažet oblik. Naravno, većina urednika u predlošcima, radeći na različitim motorima, automatski umetnuti tablicu u vaše web stranice ili posebnoj publikaciji, ali šta ako je web dizajn resursa, njene stranice su stvorene od nule? Onda početnike majstor može dobiti problem: kako napraviti tablicu u HTML. Da vidimo kako brzo i pravilno stvoriti stavku.
odabrati urednik
Prije svega, počevši da se stvori sto, trebalo bi definirati editor u kojem ćete raditi. Naravno, najlakši način da odaberete program u kojem kreirate osnovni kôd lokacije. Ali, to je najbolje koristiti za ovu svrhu dobre stare notepad.
Možda se pitate zašto zakomplicirati svoj život, jer ako radite sve kako treba u editoru, onda rezultat može odmah vidjeti, previše, pa čak i traži program za korištenje.
Da, to je istina, ali da se stvori sto od nule, ne samo da ćete biti u mogućnosti da temeljito ispitati principa njegovog nastanka, ali i da se spriječi sramotno grešaka u kucanju i greške u osnovnom kodu. Ponekad se desi slučajno da kursor se kretao, i proces pisanja koda u zabludi jeza u, što je ponekad teško pronaći. Stvaranje stolu u svesku, možete kopirati kod i zalijepite ga na pravo mjesto za vas.
Algoritam za kreiranje tabele
Za početak, napravite kratak algoritam, kako napraviti tablicu u HTML. Ovo je kako bi se osiguralo da razumete redoslijed svakog koraka. Onda analizirati kako tačno da izvrši svaku od stavki.
Počnimo sa pripremne radnje.
1. Nacrtajte shematski na papiru sto slike.
2. Grof broj redova i ćelija. Ako je broj različitih prošlosti - da svakog ryadochka posebno.
3. Odredite broj u nizu-header ćelija (na primjer, "№» ćelija, "Ime" i t. D.).
4. Zapišite glavnih parametara stola - boja, visina i širina, poravnanje teksta - ukratko, sve ono što čini fit.
Onda idu direktno do stvaranja stola:
1. Umetnite tablicu oznaka.
2. Umetnite oznake linija na osnovu iznosa koji vam je potreban.
3. redova umetnuti oznake ćelija (normalno i velika slova), i na osnovu iznosa koje su snimljene na papiru.
4. Podesite parametre za cijelu tablicu.
5. Ako je potrebno podesiti parametre za pojedinačne ćelije.
6. Ispunite naš tekst ćeliji.
kreirati tabelu
Dakle, odabrati urednik, sada pogledajmo kako stvoriti tablicu u HTML. Citat koji omogućava sto (
) se ubacuje u kod stranice je uparen, to jest, naša izgradnja počinje sa ovim tagom, a završava sa .
Umetanje stola tagova, nastaviti da se stvori redove i ćelija.
Sada, napominjemo da su ovi elementi su također u paru. Tag
definira niz, i | - ćelija.
Za gornji ćelije treba koristiti u paru elemenata | .
Kao što je već spomenuto, prvi korak je povući crtu, onda moraju da se registruju ćelije. Kako bi se izbjegla zabuna, preporučljivo je da se radi bilo padding između svakog bloka u godinu ili dvije linije, ili pak da se propisuje novi blok elemenata pomoću ključa "Tab".
Kako to može izgledati? Otprilike ovako:
-
; -
; -
№ p / p ; -
Naziv ; - ;
-
; -
| 1 | ; -
Ivanov ; - ;
- .
Kao što možete vidjeti, ništa komplicirano o tome. Glavna stvar - nemojte se izgubiti u broju redova i ćelija. U suprotnom, za stolom je nagnut.
Mi se demontiraju kreirati tabelu u HTML-u, sada možemo preći na parametre i Matrix i njenih redova i ćelija.
sto Mogućnosti Kada se piše kod, potrebno je obratiti pažnju na sljedeće točke: poravnanje u tabeli HTML, boja granica, pozadina, tekst, i tako dalje.
Parametri su navedeni u tabeli tag . Oni uključuju:
1. Border - širine granice. Definisanih od strane cijeli broj. Po defaultu, bilo granica sto nestaju.
2. Bordercolor - boja granice. To se može dati kao heksadecimalni boja (# 00008B), a njegovo ime na angliykom (BLACK). Po defaultu, to je uvijek sivo.
3. BGColor - boja pozadine. Kao što je navedeno kod ili ime.
4. Poravnajte - uskladiti tekst za tablicu. Uobičajeno - na lijevoj strani. Postoje sljedeće mogućnosti za ovaj parametar:
- lijevo - desno wrap;
- -obtekanie pravo na lijevo;
- centar - izlaz stol u sredini bez protoka.
5. širina i visina - širina i visina stola. To može biti ili u pikselima ili kao postotak (u odnosu na veličinu preglednika prozor).
Propisivanje određeni pokazatelj, treba obratiti posebnu pažnju na dizajn. Nakon određuje parametar da se znak "jednaki", nakon čega je pod navodnicima ukazuje na predodređena vrijednost.
Što se tiče boja teksta, onda bi se na isti način kao običan tekst u HTML formatu.
Primjer tabele:
-
; -
; -
№ p / p ; -
Naziv ; - ;
-
; -
| 1 | ; -
Ivanov ; - ;
- .
parametri redova Tako smo već shvatili kako napraviti tablicu u HTML i propisuju njegove glavne parametre. Ali, šta ako nam treba da izdvoje string? Vidi joj ne kao glavno tijelo za stolom?
Parametri linija su napisane u oznaci | na isti način kao i tabele sa podacima. Na liniju sljedeće varijable može se definirati:
1. Već je poznato da ste granicu, bordercolor i bgcolor.
2. Poravnajte - poravnajte tekst u liniji. To se može podesiti na lijevo, sredina i desno.
3. valign - oznaku poravnava tekst vertikalno. Potrebno je sljedeće vrijednosti:
- top - tekst je poravnat sa gornje granice;
- srednje - u sredini;
- dno - donji rub.
PRIMJER linija klirens:
-
; -
№ p / p ; -
Naziv ; - .
parametri ćelije I poslednja stvar koju treba obratiti pažnju na one koji žele da znaju kako napraviti tablicu u HTML - parametara pojedinačnih ćelija, normalnim i kapitala. U stvari, sve se radi na isti način kao i za sto ili reda. Jedina je dodao dva bitna elementa:
1. colspan - Ovaj parametar određuje broj stupaca za koje ćelija može produžiti.
2. Rowspan - već pokazuje broj redova zauzima ovoj ćeliji.
S obzirom da je dizajn se ne razlikuje od recepta linije, to neće dovesti u kodu uzorku.
nalazi Napravite sto nije tako teško kao što se možda čini na prvi pogled. Glavna stvar kod pisanja svoj kod - upornost i pažnju.
Što se tiče kako da ubacite sto u HTML-u, onda je njena šifra broj dovoljan da kopirate i zalijepite ga u mjesto vaše stranice, u kojem je, po vašem mišljenju, treba postaviti.
Ne bojte se eksperimentirati, i uskoro ste savršeno ovladao tehnikom kreiranje tablica. Sretno!
| |
| | |
| | | |
|