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.

html spajanje stanica

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.

kombinirajući ćelije vertikalno html

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.

stol s HTML-om koji kombinira ćelije



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.

stolne ćelije html tablica

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.

Kombinirajući tri ćelije u HTML

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

Kombinirajući pet stanica u html

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.

struktura stranice u htmlu

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.

Dijelite na društvenim mrežama:

Povezan
Kako dodati redak u Excel: preporuke, primjeriKako dodati redak u Excel: preporuke, primjeri
Kako kombinirati dvije tablice u "Rijeci" vodoravno ili okomitoKako kombinirati dvije tablice u "Rijeci" vodoravno ili okomito
Centalni stol za djevojčice za određivanje odnosa između rasta i fizičkog razvojaCentalni stol za djevojčice za određivanje odnosa između rasta i fizičkog razvoja
Kako napraviti tablicu u HTML-u: detaljan opisKako napraviti tablicu u HTML-u: detaljan opis
Kako napraviti HTML tablicu. Tablica bojaKako napraviti HTML tablicu. Tablica boja
O tome kako prenijeti tablicu iz Excela u WordO tome kako prenijeti tablicu iz Excela u Word
Upotreba HTML-a u tabliciUpotreba HTML-a u tablici
CSS: dizajn stolova. Primjeri dizajnaCSS: dizajn stolova. Primjeri dizajna
Kao u Riječi, izradite tablice (upute)Kao u Riječi, izradite tablice (upute)
Funkcija stvaranja tablice u SQL - Stvaranje tabliceFunkcija stvaranja tablice u SQL - Stvaranje tablice
» » Pouka u HTML-u. Spoji ćelije
LiveInternet