Két vagy több cella egyesítéséhez a címke colspan és rowspan attribútumait kell használni.
12.3. Példa. Érvénytelen sejtfűzés
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
Böngésző | internet böngésző | Opera | Firefox | ||||
---|---|---|---|---|---|---|---|
6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
Támogatott | Nem | Igen | Nem | Igen | Igen | Igen | Igen |
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
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
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
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
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
|