HTML bemutató. Sejtek egyesítése

Két vagy több cella egyesítéséhez a címke colspan és rowspan attribútumait kell használni. ... A colspan attribútum beállítja a cellák számát vízszintesen egyesíteni. A rowspan attribútum hasonlóan működik, azzal az egyetlen különbséggel, hogy függőlegesen terjed át a cellákon. Az attribútumok hozzáadása előtt ellenőrizze az egyes sorok celláinak számát, és győződjön meg arról, hogy nincs hiba. Így, három cellát helyettesít, így a következő sorban három címkének kell lennie vagy olyan konstrukció ...... ... Ha az egyes sorok celláinak száma nem egyezik, akkor üres fantomcellák jelennek meg. A 12.3 példában látható, bár érvényes, de helytelen kód, amelyben hasonló hiba jelenik meg.

12.3. Példa. Érvénytelen sejtfűzés

A colspan helytelen használata

1. cella 2. cella
3. cella 4. cella

Ennek a példának az eredményét az ábra mutatja. 12.5.

Rizs. 12.5. Egy további cella megjelenése a táblázatban

A példa első sora három cellát tartalmaz, közülük kettőt a colspan attribútum segítségével kapcsolnak össze, a második sorban pedig csak két cellát adnak hozzá. Ez egy extra cellát hoz létre, amely megjelenik a böngészőben. Ábrán jól látható. 12.5.

A 12-4. Példa a colspan és a rowspan attribútumok helyes használatát mutatja be.

12.4. Példa. Egyesítse a cellákat függőlegesen és vízszintesen

Sejtek egyesítése

Böngésző internet böngésző Opera Firefox
6.07.07.08.09.01.02.0
Támogatott NemIgenNemIgenIgenIgenIgen

Ennek a példának az eredményét az ábra mutatja. 12.6.

Rizs. 12.6. Egy táblázat egyesített cellákkal

Ez a táblázat nyolc oszlopot és három sort tartalmaz. Az "Internet Explorer", az "Opera" és a "Firefox" szavakkal egyes cellák egyesítve vannak, ahol kettő, és hol három cella. Függőleges egyesítés a "Böngésző" feliratú cellában.

Részletesen és részletesen elmondom, hogyan lehet táblázatokban kombinálni a cellákat függőlegesen és vízszintesen.

Ebben a cikkben nem fogjuk elmagyarázni a html táblák létrehozásának elveit; ezen ismeretek megszerzéséhez vegye igénybe HTML tanfolyamunkat.

A táblázat celláinak kombinálásához a címkének két attribútuma van colspan (vízszintes csatlakozás) és soros (függőleges illesztés).

Néhány embernek nehézségei vannak ezen attribútumok használatával, a cellák egyesítésével.

A colspan és a rowspan attribútumok 0 és 1000 közötti egész értékeket vesznek paraméterként. Íme egy kis példa arra, hogyan kombinálhatja a táblázat celláit.

Első pillantásra egy nem túl összetett struktúra valósul meg, de a bőséget tekintve és a kód elemei nehezen érthetők, hogy milyen elvvel kombinálhat még pár cellát.

Sokoldalú és nagyon kényelmes módot kínálunk a cellák kombinálására.

Először is készítsen egy üres lapot a jövőbeli táblázatából, és mutassa be az összes cellát elválasztva. Ez lehet egy asztal 3x3, 6x10 stb. Minden cellának megadjuk a saját számát, kezdve a számolást balról jobbra és fentről lefelé.

Elemezzük a fenti táblázat létrehozását ezzel a módszerrel.

Így fog kinézni sablonunk kódja és maga a sablon:

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16

Vízszintesen egyesítenie kell az 1,2,3 -as számú cellákat. Ehhez a kód 1 -es számú cellájában adja hozzá a colspan attribútumot a 3 értékkel. És távolítsa el elemeket 2 és 3 számokkal. Az összeolvasztott cellák számát beírjuk a kapott cellába.

1,2,3 4
5 6 7 8
9 10 11 12
13 14 15 16

1,2,3 4
5 6 7 8
9 10 11 12
13 14 15 16

Most függőlegesen egyesítenünk kell a 9. és a 13. cellát. Hasonló eljárást hajtunk végre - állítsuk be a sorpanel attribútumot a 9 -es cellaszámra 2 -es értékkel, töröljük a cellát a 13 -as számból, és írjuk be azoknak a celláknak a számát, amelyekből az egyesített cella áll.

Ez megváltoztatja a kódunkat és a táblázat megjelenését:

1,2,3 4
5 6 7 8
9,13 10 11 12
14 15 16

1,2,3 4
5 6 7 8
9,13 10 11 12
14 15 16

Marad a 11,12,15,16 sejt egyesítése. Ehhez írja be a 11 -es cellába a colspan = "2" rowspan = "2" attribútumokat. A 12,15,16 cellákat eltávolítjuk a kódból. A kombinált cellába 11,12,13,14 számokat írunk.

Ez megváltoztatja a kódunkat és a táblázat megjelenését:

1,2,3 4
5 6 7 8
9,13 10 11,12,15,16
14

1,2,3 4
5 6 7 8
9,13 10 11,12,15,16
14

Ennyi, megkaptuk az eredeti táblázatot, most a cellákat meg lehet tölteni az Ön számára kényelmes információkkal.

Reméljük, megértette az összetett táblák összefűzött cellákkal történő létrehozásának elvét.

A HTML tábláknak két funkciójuk van. Az első a táblázatok maguk, vagyis az információ kimenete táblázat formájában. A második pedig az oldal elrendezése. Külön tartalomdarabok kerülnek a táblázat különböző celláiba, és így a megfelelő helyen jelennek meg az oldalon.

Táblázat készítése

Nézzük meg, hogyan hozhatunk létre táblázatot HTML -ben. Ez a címke használatával történik

... A táblázatok sorokból állnak, amelyekben cellák vannak. Ezek a cellák tartalmazzák a táblázat tartalmát. Címke hozzáad egy sort a táblázathoz és a címkét
cellát ad hozzá egy sorhoz. Ne felejtse el bezárni a címkéket. Hozzon létre például egy ilyen táblázatot:

Annak érdekében, hogy a táblázat keretei láthatók legyenek, a címke

a border attribútum be van állítva, de a HTML5 megszünteti ezt az attribútumot, és elavulttá teszi. Ezenkívül vannak más attribútumok a keretekkel való munkavégzéshez és a háttér megváltoztatásához, valamint a cellák is rendelkeznek a tartalom összehangolásához szükséges attribútumokkal. Mindezek az attribútumok is elavultak; stílusokat kell használni helyette.

A táblázat celláinak összefűzése

Lehetőség van a táblázat celláinak egyesítésére. Ehhez a címkét

van egy colspan attribútum, amely összefűzi az azonos sor celláit, és egy sorpanel attribútum, amely összefűzi a különböző sorok celláit. Ezen attribútumok értéke az egyesítendő cellák száma.

Készítsünk egy ilyen táblázatot:

Kérjük, vegye figyelembe, hogy a táblázat második sorában egy cella veszi át a két cella helyét, így a sor összes cellájának száma kevesebb lesz, mint a többi, ebben az esetben egy.

Most hozzunk létre egy ilyen táblázatot:

További táblázatcímkék

Az általunk használt címkéken kívül vannak olyan címkék is, amelyeket táblázat létrehozásakor is használnak.

- fejléc. Általában a táblázat első sorában található. A táblázat oszlopának nevét hozza létre. Címkéből csak félkövér és középre igazításban különbözik.

- benne van a címkében címmel egészíti ki a táblázatot.

- tartalmazza a táblázat első néhány sorát egy adott stílus jelzésére. A táblázatban csak egy ilyen címke lehet. A benne található soroknak az első sorból kell kiindulniuk.

- a táblázat több sorát tartalmazza egy adott stílus jelzésére. A táblázatban több ilyen címke is lehet.

- tartalmazza a táblázat sorait, amelyek a táblázat legalján jelennek meg.

- meghatározza a táblázat egyik oszlopának stílusát, az elsőtől kezdve. Vagyis az első ilyen címke megadja az első oszlop stílusát, a második címke a második oszlopot stb. Különböző módon működik a különböző böngészőkben.