Kako napraviti tablicu u HTML-u: detaljan opis

Tablice su jedan od najvažnijih, ali istovremeno složenih elemenata koji moraju biti prisutni na web stranicama. Uz njihovu pomoć prikladno je dostaviti važne i korisne informacije u prilično sažetom obliku. Naravno, većina urednika u predlošcima koji se izvode na različitim motorima omogućuju automatsko umetanje tablice na stranicu web mjesta ili jedne publikacije, ali što ako je dizajn web resursa, njegove stranice su stvorene od nule? Zatim prije majstora početnika može doći do problema: kako napraviti tablica u HTML-u.

Odaberite urednik

Prije svega, kada počnete stvarati tablicu, trebate odrediti editor u kojem ćete raditi. Naravno, najlakši način odabira programa u kojem ste stvorili glavni kôd stranice. Ali najbolje je koristiti stari dobar bilježnica za te svrhe.

Možete pitati zašto komplicirati život, jer ako sve odjednom u uredniku, tada možete odmah vidjeti rezultat, a također upotrijebite upute programa.

Da, to je istina, ali kada izradite stol ispočetka, ne samo da ćete moći temeljito proučiti samo načelo njezina stvaranja, već i izbjeći neugodne pogreške u pogrešci i pogreške u glavnom kodu. Ponekad se dogodi da se pokazivač slučajno pomiče dolje, a kod pisanja kôda puzi u pogrešku, što je ponekad teško pronaći. Stvaranje tablice u bilježnici možete kopirati njegov kôd i zalijepiti ga na željeno mjesto.

Algoritam za izradu tablice

Prvo ćemo sastaviti kratki algoritam za izradu tablice u HTML-u. To je neophodno kako biste razumjeli slijed svakog koraka. Zatim ćemo analizirati kako izvršiti svaku stavku.

Počnimo s pripremnim radnjama.

1. Nacrtajte dijagram stola na list papira.

2. Brojite broj redaka i ćelija. Ako se broj posljednjeg razlikuje - uz svaki red zasebno.

3. Odredite broj ćelija u zaglavljima retka (na primjer, ćelije "Br.", "Naziv" itd.).

4. Snimite glavne parametre tablice - boju, visinu i širinu, poravnanje teksta - općenito, sve što vam treba.

Dalje, idite izravno na stvaranje tablice:

1. Umetnite oznake tablice.

2. Umetnite oznake redaka na temelju iznosa koji vam je potreban.

3. U retke umetamo oznake ćelija (uobičajene i kapitalne), također temeljene na iznosu koji je napisan na vašem papiru.

4. Postavite parametre za tablicu u cjelini.

5. Po potrebi postavljamo indikatore za pojedinačne ćelije.

6. Napunite naše ćelije tekstom.

Izradite tablicu

Dakle, odabrali ste urednika, a sada ćemo shvatiti kako izraditi tablicu u HTML-u. Oznaka koja umetne tablicu u kôd stranice (

Umetanje oznaka tablice nastavljamo stvarati retke i ćelije.

Odmah zamjećemo da su ti elementi također upareni. oznaka postavlja linije i - stanica.

Za ćelije zaglavlja upotrijebite upareni element .

Kao što je već spomenuto, prije svega je potrebno izdati linije, a zatim u njima registrirati stanice. Kako se ne bi zbunili, savjetujemo vam da između dvaju blokova unesete jednu ili dvije retke ili da odredite novi blok elemenata pomoću tipke "Tab".

Kako može izgledati? Oko:

• ;
• ;
• № p / p ;
• Prezime ;
• ;
• ;
• 1;
• Ivanov;
• ;
• .

Kao što možete vidjeti, ništa nije komplicirano u ovome. Glavna stvar je ne zbuniti se broj redaka i stanica. U suprotnom, stol se može naginjati.

Razgovarali smo o stvaranju tablice u HTML-u, sada možemo prijeći na parametre i same matrice i njezinih redaka i ćelija.

Opcije tablice

Kada je upisan kôd, treba zapaziti sljedeće točke: usklađivanje u HTML stol, boja granica, pozadina, tekst i tako dalje.

Parametri tablice postavljeni su u oznaci

1. Granica - širina granica. Dati se kao cijeli broj. Prema zadanim postavkama granice bilo koje tablice su nula.

2. Bordercolor - boje granice. Može se navesti kao heksadecimalni kôd boja (# 00008B) i ​​njegovo ime na engleskom (DarkBlue). Prema zadanim je postavkama uvijek siv.

3. Bgcolor - boja pozadine. Također je postavljen kodom ili nazivom.

4. Poravnajte - poravnajte tekst iza tablice. Zadana postavka je preostala. Za ovaj parametar postoje sljedeće opcije:

• lijevo je tok na desnoj strani;
• desni smjer lijevo;
• središte - izlaz iz stola u sredinu bez strujanja.

5. Širina i visina - širina i visina stola. Moguće je specificirati u oba piksela i postocima (u odnosu na veličinu prozora preglednika).

Propisivanjem ovog ili onog pokazatelja treba obratiti posebnu pozornost dizajnu. Nakon specificiranja parametra, mora se slijediti jednak znak, nakon čega slijedi navedena vrijednost u navodnicima.

Što se tiče boje teksta, dizajniran je na isti način kao i običan tekst u HTML formatu.

Primjer tablice:

• ;
• ;
• № p / p;
• Prezime;
• ;
• ;
• 1;
• Ivanov;
• ;
• .

Parametri linije

Dakle, već smo shvatili kako napraviti tablicu u HTML-u i propisati njegove osnovne parametre. Ali što ako trebamo odabrati liniju? Dizajnirati ga kao glavni tekst tablice?

Parametri niza napisani su u oznaci na isti način kao i podaci u tablici. Sljedeće varijable mogu se navesti za niz:

1. Već poznajemo vas granicu, bordercolor i bgcolor.

2. Poravnajte - poravnajte tekst u retku. Može uzeti vrijednosti lijevo, srednje i desne.

3. Valj. - ova oznaka poravnava tekst okomito. Potrebno je sljedeće vrijednosti:

• vrh - tekst je poravnat na gornjoj granici;
• srednje središte;
• dno - na donjoj granici.

Primjer crte:

• ;
• № p / p;
• Prezime;
• .

Postavke ćelije

I posljednja stvar koju treba obratiti pažnju onima koji žele znati napraviti tablicu u HTML-u su parametri pojedinih stanica, oba konvencionalna i zaglavlja. Zapravo, sve se radi točno na isti način kao i za stol ili redak. Jedina stvar, dodaju se još dva važnija elementa:

1. Colspan - ovaj parametar određuje broj stupaca koji stanica može obuhvatiti.

2. Rowspan - određuje broj redaka koji ova ćelija zauzima.

Budući da se dizajn ne razlikuje od pisanja linije, nećemo vam dati primjer koda.

nalazi

Izrada tablice nije tako teško kao što se na prvi pogled može činiti. Glavna stvar kod pisanja njezinog koda je tjeskoba i pažnja.

Što se tiče toga kako umetnuti tablicu u HTML, njegov šifra se kopira i zalijepi upravo na mjesto vaše stranice, u kojoj, po vašem mišljenju, treba biti smještena.

Nemojte se bojati eksperimentirati, a uskoro ćete svladati tehniku ​​izrade tablica. Sretno!