Pouka u HTML-u. Spoji ćelije

Tablice u HTML-u - vrlo povoljno element. Sve možete učiniti s njima. Naravno, glavna svrha - postavljanje informacija u obliku tablice. No, razvojni programeri web mjesta išli su dalje. U jednom je trenutku bilo vrlo popularno koristiti tablice za stvaranje skeleta stranice. Sada stručnjaci pokušavaju to učiniti.

Tablice su naširoko koristi zbog velikog broja atributa. Na primjer, bilo je vrlo korisno kombinirati retke ili stupce.

Uvod u teoriju

U HTML-u, unija ćelija nastaje korištenjem dva atributa: colspan i rowspan. Navedeni su za oznaku td.

Počnimo s pregledavanjem strukture bilo koje tablice prije nego što probamo u temu. U svakoj tablici nalazi se linija, au njoj postoje stanice. Imajte na umu da u početku svi stolovi trebaju sadržavati isti broj ćelija.

Gornja slika pokazuje dvije linije, a svaka ima tri stanice. Ovo je normalna tablica. Ako navedete manji broj ćelija u retku, tablica će "ići", sve će biti prikazano na pogrešan način.

HTML tablica: kombinacija ćelija vertikalno i vodoravno

Možete odrediti manje ćelija ili redaka samo ako kombinirate nešto. No, umjesto obrisanog elementa u najbližem susjedu na početku, morate odrediti dodatni atribut. Ako kombinirate stupce, zatim colspan, ako su retke, a zatim rowspan. Vrijednost atributa određuje broj elemenata koji se spajaju.

Imajte na umu da morate točno odrediti u najbližem elementu na početku. Na primjer, na gornjoj slici, ako želite spojiti ćeliju 1 i 2, morate odrediti u ćeliji 1 atribut colspan s vrijednosti od dva. I izbrišite broj ćelije 2 ili 3, to nije važno.

Dno crta je da kažete ćeliji koliko će prostora biti potrebno. Zadana vrijednost je 1.

Spajanje ćelije okomito HTML-tablica je isto. Samo zauzet prostor će se smatrati okomito. Pogledajte donju sliku.

Ovdje stanica s brojem 43 zauzima dvije linije. Da biste to učinili, navedete atribut redspan. Sjećamo se jednostavno:

• Redak je niz.
• Col stupac / stupac.
• Span - udruga.

Stvoritelji jezika pokušali su ga dovesti što bliže čovjeku, tako da je, čak i bez znanja, barem nekako mogao razumjeti.

U HTML-u, kombiniranje stanica može biti učinjeno u dva smjera: okomito i vodoravno. Da biste to učinili, istodobno navedite oba atributa.

Na gornjoj slici, upravo to je naznačeno, da možete učiniti sjedinjavanje redaka, stupaca i istodobno stupaca i redaka.

HTML: Spajanje ćelija. primjeri

Razmotrite složenije korak-po-korak primjera u velikim tablicama. Ispod slike na lijevoj strani nalazi se izvornu verziju redovitog stola. A desno - varijanta s jedinicom dviju ćelija u drugom retku. Lakše je usporediti HTML kôd.

Također možete kombinirati tri stanice u sredini. U prvom slučaju, atribut colspana naveden je u ćeliji # 1. Ovdje će prvi biti nepromijenjen, au drugom dodana je količina jednaka tri.

Ako želite kombinirati sve ćelije u nizu na jedan, a zatim izbrišite četiri td, a prvom odredite colspan = `5`.

Kao što možete vidjeti, u stvarnosti to je sve jednostavno. Nema ništa komplicirano. Glavna stvar je pažljivo, od prvog trenutka, razumjeti sve poteškoće tablica, a zatim nikakvih problema ne bi trebao nastati.

Tablice kao kostur mjesta

U HTML-u, unija stanica se ne koristi uvijek za obične tablice s podacima (kao u Word ili Excel). Često se koriste programeri web mjesta i upotrebljavaju ih za web-lokaciju.

Na primjer, možete pogledati ovaj izgled web mjesta. Ovaj dizajn je vrlo jednostavan i primitivan. Ali ovdje možete eksplicitno prikazati upotrebu udruge.

Ovdje je u početku bilo tablice od tri reda, dvije stanice u svakoj. Zatim, za postavljanje logotipa web mjesta, dvije su stanice u prvom redu spojene. Dno crta je učinila isto kako bi postavila "podrum".

Zahvaljujući tome, možete staviti elemente dizajna na njihova mjesta, a ništa neće ići nigdje izvan njihovih granica. Vrlo je zgodan i jednostavan. Zato je tako popularno. Sada se preporuča stvoriti blok div oznake.

zaključak

I zapamtite da u HTML tablici možete kombinirati ćelije prema želji. Sve ovisi o tome što vam je potrebno i kako to želite učiniti. Glavna stvar, nemoj se zbuniti. Ako želite stvoriti veliki stol s velikim brojem pridruživanja, preporučujemo da prvo izvlačite sve ovo na komad papira ili u boji. Lakše će biti za početnike.

Kada steknete iskustva, lako možete obavljati takve operacije u glavi.