Kako napraviti tablicu u HTML-u: detaljan opis

računala

Tablice su jedna od najvažnijih, ali isto takovremenski kompleksni elementi 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 početka čarobnjaka može doći do problema: kako napraviti tablicu u HTML-u. Razmotrimo kako ispravno i brzo stvoriti ovaj element.

kako napraviti tablicu u htmlu

Odaberite urednik

Prije svega, kada započnete s izradom tablice,Trebali biste odrediti urednika 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 stvaranjem tablicene samo da ćete moći temeljito proučiti samo načelo njezina stvaranja, već i ne dopustiti dosadne pogreške u pisanju 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.

Stvaranje tablice u htmlu

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.

kako umetnuti tablicu u html

Izradite tablicu

Dakle, odabrali ste urednika, a sada ćemoOtkriti ćemo kako izraditi tablicu u HTML-u. Oznaka s kojom je tablica umetnuta u kôd stranice (<tablica>) jest par, to jest, naš dizajn počinje s ovom oznakom i završava s </ table>.

Umetanje oznaka tablice nastavljamo stvarati retke i ćelije.

Odmah zamjećemo da su ti elementi također upareni. Oznaka <tr> određuje retke i <td> ćelije.

Za ćelije zaglavlja upotrijebite <par> upareni element.

Kao što je već spomenuto, prvi korak je formaliziratilinije, a zatim u njima da registriraju već stanice. Kako se ne bi zbunili, savjetujemo vam da između dvaju blokova unesete jednu ili dvije retke ili odredite novi blok elemenata pomoću tipke "Tab".

Kako može izgledati? Oko:

  • <Tabela>;
  • 'Tr>;
  • <th> Ne. </ p>;
  • <th> Prezime </ th>;
  • </ tr>;
  • 'Tr>;
  • <td> 1 <td>;
  • <td> Ivanov </ td>;
  • </ tr>;
  • </ table>.

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.

kako umetnuti tablicu u html

Opcije tablice

Kada se piše kôd, obratite pozornost na sljedeće točke: poravnavanje u HTML tablici, boju obruba, pozadinu, tekst i tako dalje.

Parametri tablice navedeni su u <table> oznaku. To uključuje:

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:

  • <table border = "2" bordercolor = "# 00008B" bgcolor = "#FFFFFF" align = "center" width = "800" height = "800">;
  • 'Tr>;
  • <th> Ne. </ p>;
  • <th> Prezime </ th>;
  • </ tr>;
  • 'Tr>;
  • <td> 1 <td>;
  • <td> Ivanov </ td>;
  • </ tr>;
  • </ table>.

kako stvoriti tablicu u html

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 <tr> tagu na isti način kao i tablični podaci. 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:

  • <tr border = "3", bordercolor = "# 00007F" bgcolor = "# FFFFE0" align = "centar" valign = "srednji">;
  • <th> Ne. </ p>;
  • <th> Prezime </ th>;
  • </ tr>.

Postavke ćelije

I posljednja stvar na koju treba obratiti pažnju,koji želi znati napraviti tablicu u HTML-u - parametri pojedinih stanica, oba konvencionalna i kapitalna. 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.

poravnanje u HTML tablici

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!