Izrada tablice u HTML-u

U tablicama je prikladno smjestiti podatke međusobno povezane nekim zavisnostima. Za izradu tablica u HTML-u koriste se posebne HTML oznake. Uz njihovu pomoć, možete izgraditi tablicu bilo koje složenosti. Osim toga, praksa tabličnog izgleda je vrlo česta, omogućujući vam da lijepo i prikladno smjestite elemente na web stranicu.

Izrada prve tablice

Kao i obično, otvorite uređivač teksta, izradite praznu HTML datoteku i zalijepite sljedeći kod između oznaka:

  1 
  2 
  3 
  4 
  5 
  6 

Spremite dokument. Otvorite datoteku. Ako nigdje nema pogrešaka pri upisu, preglednik će proizvesti sljedeći rezultat:

Razvrstajmo opisani kod:

1. oznake objaviti pregledniku da je potrebno stvoriti tablicu.
2. Atribut border definira granice tablice, a parametar 1 njihovu debljinu u pikselima.
3. Uz pomoć postavite retke tablice.
4. Broj oznaka određuje broj stupaca.
5. Brojevi između oznaka su sadržaji stanica.

Ako želite ostaviti stanicu praznom, trebali biste u njoj napisati neki nevidljivi znak, kao što je razmak, a ne ostaviti ga bez ikakvog sadržaja. To je potrebno za ispravan prikaz prazne ćelije od strane svih preglednika. Neki od njih mogu iskriviti rezultat, ako to nije učinjeno.

Sadržaj ćelija može biti apsolutno svaki element HTML-a: brojevi, tekst, slike, same tablice, pa čak i cijele stranice. Glavna stvar ovdje nije samo znati kako napraviti tablicu u HTML-u, već i promatrati gniježđenje oznaka.

Postavite veličinu

Gornji primjer je dao mali stol, nezgodan za vizualnu percepciju. Veličinu tablice možete prilagoditi potrebnim parametrima pomoću dva atributa:

1. width - postavlja širinu.
2. height - određuje visinu.

Vrijednosti tih atributa mogu biti pikseli ili postoci. Neki preglednici ne rade ispravno s postocima u odnosu na atribut visine. Stoga biste svoj kôd trebali testirati u nekoliko najčešćih:

• IE.
• Mozilla Firefox.
• Opera.
• Konqueror.
• Safari.

Ako je prikaz netočan, potrebno je promijeniti vrijednost visine tablice u postocima za vrijednost u pikselima. Izbor u korist piksela može se napraviti i na temelju toga što posjetitelj vaše web-lokacije može doći s uređaja koji ima mali monitor (mobitel). Tekst u HTML tablici na monitoru telefona bit će prilagođen njegovoj veličini. A ako su postotci postavljeni, tablica će biti tako mala da je nemoguće pročitati.

Pomoću atributa širine i visine postavimo dimenzije: širina HTML tablice je 300, a visina 200 piksela:

  1 
  2 
  3 
  4 
  5 
  6 

Zbog toga će preglednik prikazati tablicu s potrebnim dimenzijama:

namještanje

Smisao ove akcije je pronaći sadržaj ćelija i lokaciju tablice na web-stranici. Međutim, HTML tehnologija u tablicama postavljenim na web-stranici ograničena je na njihovu lokaciju na lijevoj strani (prema zadanim postavkama), u središtu i na desnoj strani koristeći atribut poravnanja i vrijednosti koje su mu potrebne:

Sintaksa je:

  ... 

U budućnosti, kada učite CSS tehnologiju, naučit ćete kako vertikalno pozicionirati elemente web dokumenata.

Da biste postavili mjesto sadržaja ćelije, isti se atributi s istim vrijednostima primjenjuju na oznaku. :

  ...   ... 
  sadržaj stanica 

Postavite našu tablicu udesno i poravnajte sadržaj njezinih ćelija u centru:

  1 
  2 
  3 
  4 
  5 
  6 

Rezultat bi trebao biti sljedeći:

Ulančavanje nizova

Da bi se u jednoj ćeliji napravilo nekoliko ćelija u retku, koristi se atribut colspan s vrijednošću jednakom broju ćelija koje se spajaju. Sljedeće oznake uklonjene su u kodu. zajedno sa svojim sadržajem. Broj oznaka za brisanje jednaka vrijednosti atributa colspan minus jedan.

Razmotrite ovo pravilo primjerom. Pretpostavimo da trebate stvoriti tablicu u središtu stranice s proizvoljnim brojevima veličine 4 stupca i 3 retka. Zatim spojite ćelije 2 i 3 vodoravno u drugom redu tako da preglednik proizvede sljedeći rezultat:

Sljedeći kôd implementirat će ovu tablicu u web-dokumentu:

  11 
  20 
  4 
  14 
  58 
  36 
  80 
  19 
  10 
  15 
  29 

Primijetite HTML kôd u tablici u kojoj su dvije ćelije kombinirane:

  58   36   80 

Budući da je vrijednost parametra colspan 2, 1 je izbrisana. slijediti ga (2 - 1 = 1) sa svim njegovim sadržajem. Ako je bilo potrebno kombinirati tri ćelije, tada bi se uklonile 2 oznake. ,

Pridružite se stupcima

Vertikalne ćelije su kombinirane pomoću atributa rowspan. Njime se brojčanom vrijednošću određuje broj ćelija koje treba rezati okomito. Ova tema predstavlja najveće poteškoće za studente.

Sljedeća metoda je najlakše razumjeti: stvoriti tablicu i broj ćelija s različitim brojevima. Na primjer:

Kôd tablice bit će sljedeći:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 

Oslobodimo se dvoznamenkastih brojeva kombinirajući stupce s brojevima 6 i 10, 7 i 11, 8 i 12. Ostavite brojeve u vertikalno kombiniranim ćelijama: 6, 7 i 8.

Kombinirajte 6 i 10. U oznaci koji sadrži broj 6, propisati: i strukturu 10 izbrisati. Slično tome, trebate učiniti za preostale parove brojeva. Kao rezultat, kôd će se transformirati na sljedeći način:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 

Preglednik treba izraditi tablicu koja nam je potrebna:

Savjet: dok ne postignete automatsko djelovanje kada kombinirate stupce, koristite ovu metodu pomoću brojeva, zamjenjujući ih željenim podacima.

Sadržaj ćelije

Kao što je gore spomenuto, elementi ćelija mogu biti bilo koji HTML elementi. Primjerice, u tablici će biti prikladna implementacija jednostavne tablice voća i cvijeća:

Kao što možete vidjeti, ćelije u ovoj tablici sadrže tekst, slike i ispunu boje pozadine. Elementi ćelije su primjenjivi i sve HTML oznake rade. Tablica također može sadržavati hiperveze u svim njihovim oblicima (tekst, slikovne veze, itd.).

Posebno je potrebno propisati ispunjavanje ćelija bojom: budući da su prazne, ne sadrže nikakve podatke, potrebno je registrirati prazan prostor: , U tom slučaju, širina ćelije ne mora odgovarati traženoj. I gotovo uvijek se događa. U ovom slučaju na ovu oznaku Atribut width primjenjuje se s traženom vrijednošću: ,

Za ispravan prikaz boje primijenjene na tekst ili pozadinu, u HTML-u postoje tzv. Sigurne boje. Tablica njihovih kodova može se naći na mnogim web-lokacijama. Sigurna boja HTML-a ne znači da može oštetiti računalo, ali znači da će biti prikazana na konzoli posjetitelja na vašu buduću web-lokaciju baš kao što ste namjeravali, bez izobličenja.

Zaglavlja tablica

Često postoji potreba za naslovom tablice. To se radi pomoću posebne oznake para. , Nalazi se odmah nakon oznake.

U pregledniku će ova tablica izgledati ovako:

Osim naziva tablica, koristite nazive stupaca ili redaka pomoću oznake. , Tekst u HTML tablici zatvorenoj između tih oznaka bit će prikazan masnim slovima. Ovoj oznaci primjenjujemo atribut spajanja horizontalne ćelijske crte. Pretvorimo gornju tablicu kao primjer, unoseći promjene u kôd:

  Tablica s brojevima 
  još 
  neparan 
  2 
  1 
  4 
  3 
  6 
  5 

Zbog toga će preglednik prikazati zaglavlje s naslovom stupca:

Da biste izradili bočne zaglavlja kad su to elementi određenog stupca, oznaka nalazi se odmah nakon oznake prije prve oznake ,

Web dokument rasporeda tablice

To je najčešći način stvaranja web stranica. Suština izgleda tablice je postavljanje elemenata na stranicu stranice u ćelije pomoću tablica. Istodobno se uzimaju odvojeni dijelovi stranice (podnožje, zaglavlje, tijelo), koji mogu biti i ćelije. U praksi se raspored tablica u većini slučajeva izvodi prema sljedećem algoritmu:

• web dizajner priprema izgled stranice;
• pomoću grafičkih urednika ili drugog softvera pojedini elementi rasporeda (gumbi, slike) se odvajaju i postaju neovisni;
• web programer kreira tablicu elemenata mjesta kako je dizajner namijenio, ostavljajući stanice prazne;
• web programer stvara sliku mjesta iz izrezanih elemenata pomoću jezika za označavanje i web programiranje, prateći funkcionalnost i operativnost svakog od njih.

Izgled tablice web-lokacije omogućuje vam da prekrasno i logično izgradite sadržaj (sadržaj) da biste posjetitelju koji ga je posjetio pružili. Međutim, ima dva minusa:

1. Zahtijeva veliku količinu koda.
2. To čini mjesto teže i smanjuje brzinu njegovog utovara.

Ali ponekad, kako bi se uskladio s tehničkim zadatkom sa strogim pozicioniranjem elemenata, HTML izgled u tablici postaje jedino rješenje.