Lektion om HTML. Fletning celler

Tabellerne i HTML - en meget praktisk element. Med dem kan du gøre noget. Selvfølgelig er det vigtigste formål - at placere oplysninger i en tabel. Men udviklerne af sider er gået videre. På et tidspunkt var det meget populært at bruge en tabel til at oprette et websted rammer. Nu fagfolk forsøger ikke at gøre det.

Tabeller har fundet deres bred anvendelse på grund af det store antal attributter. For eksempel er en meget nyttig egenskab vendte kombinere rækker eller kolonner.

Introduktion til teori

I HTML foreningen af celler sker ved hjælp af to attributter: kolonnespredning og rowspan. De er angivet for TD-tag.

Lad os først analysere strukturen af hvert bord, før vi dykke ned i emnet. I hvert bord er der en linje, og i det - celle. Husk, at i første omgang, skal alle tabeller indeholder det samme antal celler.

Figuren ovenfor angivne to rækker og i hver af tre celler. Det er en fælles bord. Hvis du er i nogen kasse, skrive et mindre antal celler, tabellen "flytte ud", vil alle ikke blive vist korrekt.

HTML-tabel: flette celler lodret og vandret

For at angive kun kan bruges et mindre antal celler eller strenge, hvis du har noget at fusionere. Men i stedet for det slettede element i den nærmeste nabo til toppen skal du angive en ekstra attribut. Hvis du kombinerer kolonnerne, så colspan, hvis strengene, så rowspan. Værdien af en attribut angiver antallet af elementer, du vil flette.

Bemærk, at du skal angive den i den nærmeste element til toppen. For eksempel i figuren ovenfor, hvis du ønsker at kombinere cellen 1 og 2, skal du angive i cellen 1 colspan attribut med en værdi på to. Og slet stillingen nummer 2 eller 3, er det ligegyldigt.

Den nederste linje er, at du fortæller cellen, hvor meget plads det vil tage. Standardværdien er 1.

Flet celler lodret HTML-tabel finder sted på samme princip. Simpelthen besatte plads vil blive betragtet som lodret. Se figuren nedenfor.

Her cellen med tallet 43 tager to strenge. For at gøre dette, du angiver attributten rowspan. Bare husket:

• Række - række.
• Col - kolonne / søjle.
• Span - Association.

Skaberne har forsøgt at bringe sproget som muligt for det menneskelige, så selv uden at vide det, kunne en eller anden måde forstå.

I HTML, kan foreningen af celler ske i to retninger: vertikalt og horisontalt. For at gøre dette, vi angiver både attribut.

Ovenstående figur er netop det, og erklæret, at det kan gøre: rækker, kolonner eller begge rækker og kolonner.

HTML: flette celler. eksempler

Lad os overveje mere komplekse eksempler milepæl på store borde. Nedenfor til venstre Indstil den originale version af en almindelig tabel. En ret - en variant med en kombination af to celler i anden række. Så klarere og lettere at sammenligne HTML-kode.

Du kan også kombinere de tre i midten af cellen. I det første tilfælde colspan attribut specificerer cellen №1. Her vil den først være uændret, og den anden føjet til colspan, lig med tre.

Hvis du ønsker at fusionere alle cellerne i en række til en enkelt, og fjern derefter fire TD i første indikerer COLSPAN = '5'.

Som du kan se, i virkeligheden, alt er enkel. Intet kompliceret. Vigtigst er det, omhyggeligt, fra første gang at forstå alle faldgruberne i tabellerne, og derefter ingen problemer bør ikke opstå.

Tabel som et site rammer

I HTML er foreningen af celler ikke altid anvendes til almindelige tabeller med de oplysninger (i Word eller Excel). Website designere ofte, men før meningsmålingerne har brugt dem til layoutet af websteder.

For eksempel overveje layoutet af hjemmesiden. Dette design - meget enkel og primitiv. Men du kan vise brugen af foreningen eksplicit.

Der var oprindelig en tabel af tre rækker af hver to celler. Så, for at placere logoet af hjemmesiden, har de to celler i den første række blevet kombineret. Den nederste linje er at gøre det samme for at imødekomme "kælderen".

På grund af sin sted er det muligt at placere elementer af design, og intet vil ikke forlade sine grænser. Dette er en meget praktisk og enkel. Derfor var det så populært. Nu, anbefales det at oprette et div tag blokke.

konklusion

Og husk, at HTML tabelcelle sammenlægning, kan du gøre hvad du vil. Det hele afhænger af, hvad du vil og hvordan du ønsker at arrangere det. Vigtigere er det, du ikke bliver forvirrede. Hvis du ønsker at oprette et stort bord med et stort antal foreninger, anbefales det at trække det hele på et stykke papir eller i Paint. Imposer begyndere vil det være lettere.

Når få erfaring, disse operationer du kan udføre i dit hoved nemt.