Két vagy több cella egyesítéséhez használja a címke colspan és rowspan attribútumait
12.3. példa. Rossz cellaegyesítés
| 1. cella | 2. cella | |
| 3. cella | 4. cella | |
Eredmény ezt a példátábrán látható. 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, amelyek közül kettő a colspan attribútummal van egyesítve, a második sorba pedig csak két cella van hozzáadva. Ez egy extra cellát eredményez a böngészőben. ábrán jól látható. 12.5.
A colspan és a rowspan attribútumok helyes használatát a 12-4. példa mutatja be.
12.4. példa. Cellák összevonása 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énye az ábrán látható. 12.6.
Rizs. 12.6. Táblázat egyesített cellákkal
Ez a táblázat nyolc oszlopból és három sorból áll. Az „Internet Explorer”, „Opera” és „Firefox” feliratú cellák egy része össze van vonva, hol kettő, hol pedig három. A "Böngésző" feliratú cella függőleges egyesítést alkalmaz.
táblázatok A legjobb példa erre az 5-10. listában látható egyszerű táblázat HTML-ben.
Ez egy szabályos táblázat, aminek a cellái meg vannak számozva – így a jövőben könnyebb dolgunk lesz. ábrán. Az 5.2 webböngésző ablakban mutatja a megjelenését.
Most nézzük meg az ábrán látható táblázatot. 5.3.
Itt egyes cellák egyesülnek. Látható, hogy az egyesített cellák mintha eggyé olvadtak volna. Hogyan kell csinálni?
Különösen ehhez a címkék és
Több cella vízszintes egyesítéséhez kövesse az alábbi lépéseket.
1. Keresse meg a kódban HTML tag (
2. Adja meg benne a COLSPAN attribútumot, és rendelje hozzá az egyesítendő cellák számát, a legelsőt is számolva.
3. Távolítsa el a címkéket (
Egyesítsük össze a táblázat 2. és 3. celláját (lásd 5.10. lista). A táblázat első sorát létrehozó javított kódrészlet az 5-11. listában látható.
Ugyanígy hozzuk létre a 4 + 5 és 12 + 13 + 14 + 15 egyesített cellákat.
A cellák függőleges egyesítése kissé bonyolultabb. Íme az ehhez szükséges lépések.
1. Keresse meg a kódban HTML karakterlánc(címke ), amely az egyesített cellák közül az elsőt tartalmazza (ha felülről lefelé számolja a sorokat).
2. Keresse meg a címkét (
3. Írja be a ROWSPAN attribútumot, és rendeljen hozzá mennyiséget egyesített cellák, köztük a legelső közülük.
4. Tekintse meg a következő sorokat, és távolítsa el belőlük a címkéket (
elmentünk egyesítse a cellákat 1. és 6. táblázatunk. Az 5-12. lista tartalmazza a HTML-kód javított részletét (a javítások az első és a második sort érintik).
Vegye figyelembe, hogy eltávolítottuk a címkét a második sorból, amely létrehozza a hatodik cellát, mivel az össze van vonva az első cellával.
Ma már nem használják túl gyakran. Korábban azonban, a táblázatos webdizájn virágkorában, nehéz volt egy asztallal találkozni anélkül egyesített cellák. Akárhogy is, nem árt tudni róla.
Részletesen és részletesen elmondom, hogyan lehet a cellákat függőlegesen és vízszintesen egyesíteni a táblázatokban.
Ebben a cikkben nem magyarázzuk el az elveket html létrehozása táblázatok, ehhez a tudáshoz nézze meg HTML-tanfolyamunkat.
A cellák táblázaton belüli egyesítéséhez két attribútumot kell beállítani a címkéhez
Vannak, akiknek problémái 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 fel paraméterként. Íme egy kis példa arra, hogyan egyesíthet cellákat egy táblázatban.
Első pillantásra egy nem túl bonyolult struktúra valósul meg, de a bőséget nézve
Egy univerzális és nagyon kényelmes módot kínálunk a sejtek egyesítésére.
A kezdéshez készítsen egy üreset a jövőbeli táblázathoz, és mutassa be az összes elválasztott cellával. Ez lehet egy asztal 3x3, 6x10 stb. Minden cellának megadjuk a saját számát, balról jobbra és felülről lefelé kezdve számolni.
Elemezzük a fent bemutatott táblázat létrehozását ezzel a módszerrel.
Így fog kinézni a munkadarabunk kódja és maga a munkadarab:
| 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 |
Az 1,2,3 számú cellákat vízszintesen össze kell vonni. Ehhez adja hozzá a kódban az 1-es számú cellát col span attribútum 3 értékkel. És törölni
| 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 a 9-es és a 13-as cellát függőlegesen kell egyesítenünk. Hasonló eljárást hajtunk végre - a 9-es cellánál a rowspan attribútumot 2-es értékkel állítjuk be, a 13-as cellát töröljük, az összevont cellába beírjuk azon cellák számát, amelyekből áll.
Ez megváltoztatja a kódunkat és kinézet táblázatok:
| 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 hátra 11,12,15,16 cella egyesítése. Ehhez a 11-es számú cellába írjuk be a colspan ="2" rowspan ="2" attribútumot. A 12, 15, 16 cellákat eltávolítjuk a kódból. A kombinált cellába írjuk a 11,12,13,14 számokat.
Így változik a kódunk és a táblázat megjelenése:
| 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 | |||
Ez minden, megkaptuk az eredeti táblázatot, most a cellák kitölthetők az Ön számára kényelmes információkkal.
Reméljük, megérti az összetett táblázatok cellaegyesítéssel történő létrehozásának elvét.
Még egy érdekes tulajdonságról kell beszélni HTML nyelv. Ez az ún sejtösszevonás táblázatok. A legjobb példa erre az egyszerű táblázat, amelynek HTML-kódja az 5-10. listában látható.
Felsorolás 5.10
Ez egy szabályos táblázat, aminek a cellái meg vannak számozva – így a jövőben könnyebb dolgunk lesz. ábrán. Az 5.2 webböngésző ablakban mutatja a megjelenését.
Most nézzük meg az ábrán látható táblázatot. 5.3.
Itt egyes cellák egyesülnek. Látható, hogy az egyesített cellák mintha eggyé olvadtak volna. Hogyan kell csinálni?
Különösen ehhez a címkék és
Rizs. 5.2. Az eredeti tábla, amelynek cellái össze lesznek vonva
Rizs. 5.3.ábrán látható táblázat. 5.2, néhány cella egyesítése után (az egyesített cellákat a számok összeadásával jelzi)
Több cella vízszintes egyesítéséhez kövesse az alábbi lépéseket.
1. Keresse meg a címkét a HTML-kódban
Ugyanígy hozzuk létre a 4 + 5 és 12 + 13 + 14 + 15 egyesített cellákat.
A cellák függőleges egyesítése kissé bonyolultabb. Íme az ehhez szükséges lépések.
1. Keresse meg a HTML kódban azt a sort (címkét), amely az egyesítendő cellák közül az elsőt tartalmazza (ha felülről lefelé számolja a sorokat).
2. Keresse meg a címkét a sor kódjában
Vegye figyelembe, hogy eltávolítottuk a címkét a második sorból, amely létrehozza a hatodik cellát, mivel az össze van vonva az első cellával.
A cellák egyesítését manapság nem használják túl gyakran. Azonban korábban, a táblázatos webdizájn virágkorában (a táblázatos webdesignról lásd 10. fejezet), nehéz volt találni egy táblázatot egyesített cellák nélkül. Akárhogy is, nem árt tudni róla.
Nagyon praktikus elem. Bármit megtehetsz velük. Természetesen a fő cél az információk táblázat formájában történő elhelyezése. A weboldal-fejlesztők azonban tovább mentek. Egy időben nagyon népszerű volt a táblázatok használata webhelykeret létrehozásához. Most a szakemberek igyekeznek ezt nem tenni.
A táblázatok széles körben használatosak az attribútumok nagy száma miatt. Például a sorok vagy oszlopok összekapcsolásának tulajdonsága nagyon hasznosnak bizonyult.
Bevezetés az elméletbe
A HTML-ben a cellákat két attribútum segítségével egyesíti: colspan és rowspan. A td címkéhez vannak megadva.
Mielőtt belemerülnénk a témába, először elemezzük bármely táblázat szerkezetét. Minden táblában van egy sor cellákkal. Ne feledje, hogy kezdetben minden táblának ugyanannyi cellát kell tartalmaznia.
A fenti ábrán két sor látható, mindegyik három cellával. Ez egy normál asztal. Ha bármely sorban kisebb számú cellát ad meg, akkor a táblázat "kiköltözik", minden hibásan jelenik meg.
HTML táblázat: Cellák egyesítése függőlegesen és vízszintesen
Csak akkor adhat meg kevesebb cellát vagy sort, ha összefűz valamit. De az eltávolított elem helyett egy további attribútumot kell megadni a kezdethez legközelebbi szomszédban. Ha oszlopokat kombinál, akkor colspan, ha sorokat, akkor sorhosszt. Az attribútum értéke az egyesítendő elemek számát adja meg.
Kérjük, vegye figyelembe, hogy az elejéhez legközelebbi elemben kell megadnia. Például a fenti ábrán, ha egyesíteni szeretné az 1. és 2. cellát, akkor az 1. cellát úgy kell beállítani, hogy a colspan attribútum kettős legyen. És törölje a 2-es vagy 3-as cellát, ez már nem számít.
A lényeg az, hogy megmondja a cellának, hogy mennyi helyet foglal el. Az alapértelmezett érték 1.
A cellák függőleges egyesítése egy HTML-táblázatban ugyanezt az elvet követi. Az egyszerűen elfoglalt hely függőlegesen lesz figyelembe véve. Lásd az alábbi képet.
Itt a 43-as cella két sort foglal el. Ehhez a rowspan attribútumot adták meg. Könnyű megjegyezni:
- Sor - egy karakterlánc.
- Oszlop - oszlop/oszlop.
- Span - szakszervezet.
A nyelvet alkotók igyekeztek minél közelebb hozni az emberhez, hogy ismerete nélkül is legalább valahogy megértsék.
A HTML-ben a cellákat egyszerre két irányban lehet egyesíteni: függőlegesen és vízszintesen. Ehhez adja meg mindkét attribútumot egyszerre.
A fenti ábrán pontosan ez jelzi, hogy lehet egyesíteni: sorok, oszlopok és egyben oszlopok és sorok.
HTML: cellák összevonása. Példák
Nézzünk bonyolultabb példákat lépésről lépésre nagy táblázatokban. Az alábbi bal oldali ábra egy normál táblázat eredeti változatát mutatja. És a jobb oldalon - egy változat a második sorban lévő két cella egyesülésével. Így világosabb és egyszerűbb a HTML kód összehasonlítása.
Három cellát is egyesíthet a közepén. Az első esetben a colspan attribútumot az 1. cellában adták meg. Itt az első változatlan marad, a másodikhoz pedig hozzáadtuk a hárommal egyenlő colspan.
Ha egy sorban az összes cellát egyetlen cellává szeretné egyesíteni, töröljön négy td-t, és az elsőben adja meg a colspan="5" értéket.
Amint látja, valójában nagyon egyszerű. Nincs semmi nehéz. A lényeg az, hogy gondosan, az első alkalomtól kezdve megértse a táblázatok összes buktatóját, és akkor nem merülhet fel probléma.
Táblázatok, mint webhely keretrendszer
A HTML-ben a cellaegyesítést nem mindig használják normál információtáblázatokhoz (mint például a Wordben vagy az Excelben). A weboldal-fejlesztők gyakran, és korábban is kivétel nélkül használták ezeket a weboldalak elrendezéséhez.
Vegyük például ezt a webhely elrendezést. Ez a kialakítás nagyon egyszerű és primitív. De itt lehetőség van az összekapcsolás használatának explicit bemutatására.
Eredetileg egy háromsoros, két cellából álló táblázat volt. Ezután a webhely logójának elhelyezéséhez az első sorban lévő két cellát egyesítettük. BAN BEN alsó sor ugyanezt tette az "alagsor" elhelyezésénél is.
Ennek köszönhetően dizájnelemeket helyezhet el a helyükön, és semmi sem megy túl a határain. Nagyon kényelmes és egyszerű. Ezért volt olyan népszerű. A div tag most ajánlott blokkok létrehozásához.
Következtetés
És ne feledje, hogy egy HTML-táblázatban bármit megtehet a cellák egyesítéséhez. Minden attól függ, hogy mire van szüksége és hogyan szeretné elrendezni. A legfontosabb, hogy ne keveredj össze. Ha nagy méretű táblázatot szeretne készíteni nagy számú illesztéssel, akkor ajánlatos először mindezt egy papírra vagy Paintben lerajzolni. Kezdőknek könnyebb lesz így.
Ha tapasztalatot szerez, könnyen végrehajthat ilyen műveleteket a fejében.