Amikor HTML-ben hoz létre táblázatokat, néha vízszintesen kell egyesítenie a cellákat.
A HTML-táblázatban minden cellát címkék határolnak el
A cellák egyesítéséhez a HTML-ben kevesebb cellát kell hozzáadnia egy sorhoz, mint más sorokhoz, és hozzá kell adnia a colspan=" " attribútumot a címkén belül.
Nézzünk egy egyszerű példát egy két sorból és két oszlopból (négy cellából) álló HTML-táblázatra. A HTML kódja így néz ki:
| tartalom | tartalom |
| tartalom | tartalom |
| tartalom | |
| tartalom | tartalom |
A felső sor cellája most két oszlopot ölel fel. Mivel két cella helyet foglal el, az első sorban csak egy td elem található.
A HTML-tábla celláit tetszőleges területen, tetszőleges számú oszloppal egyesítheti. A cellák vízszintes egyesítésének egyik leghasznosabb módja a táblázatfejlécek létrehozása. Ha a táblázat n oszlopot tartalmaz, helyezzen el egy colspan="n" attribútumot a felső sor első cellájába, és távolítsa el a többi cellát a sorból.
A rowspan="" attribútum lehetővé teszi a cellák függőleges egyesítését
Ha azt szeretné, hogy egy cella több sort fedjen át, adja hozzá a rowspan=" " attribútumot a címkén belül
Nézzünk egy egyszerű példát egy HTML-táblázatra, amelyben négy cella van két sorra és két oszlopra osztva. HTML kód:
| tartalom | tartalom |
| tartalom | tartalom |
A cellák függőleges egyesítéséhez egy HTML-táblázatban adja hozzá a rowspan="2" attribútumot a felső sor első cellájához, majd törölje az egyik cellát az alsó sorból. A HTML kód most így fog kinézni:
| dolog | tartalom |
| tartalom |
Egy táblázatban kombinálhatja a cellák vízszintes és függőleges összevonását, ahogy a bal oldali képen látható. Egy cella akár több sort és oszlopot is átfedhet, amint az a jobb oldali képen látható. Az egyes táblázatok HTML-kódja az alábbiakban található:
A sorhossz és a colspan kombinálásának módjai egyéni HTML-táblázatok létrehozásához több sort és oszlopot átívelő cellákkal
| 3 soron át | 3 oszlopra terjed ki | ||
| H | T | 2 soron át | |
| M | L | ||
| 4 oszlopra terjed ki | |||
| 2 sorból és 2 oszlopból áll | T | |
| A | ||
| E | L | B |
A HTML-cellák függőleges egyesítése egy oszlopba akkor használható, ha fejlécet szeretne létrehozni az adott oszlop melletti sorok csoportjához. Segíthet a karakterláncok csoportjainak típus szerinti szétválasztásában is.
Nagyon kényelmes 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 webhelyfejlesztők azonban tovább mentek. Egy időben nagyon népszerű volt a táblázatok használata a weboldal keretrendszerének létrehozásához. Most a szakemberek megpróbálják ezt nem tenni.
A táblákat széles körben használják az attribútumok nagy száma miatt. Például a sorok vagy oszlopok összekapcsolásának tulajdonsága nagyon hasznosnak bizonyult.
A HTML-ben a cellák összevonása két attribútum használatával történik: colspan és rowspan. A td címkéhez vannak megadva.
Mielőtt belemerülnénk a témába, először nézzük meg bármelyik táblázat felépítését. Minden táblának van egy sora, és vannak benne cellák. Ne feledje, hogy kezdetben minden táblának ugyanannyi cellát kell tartalmaznia.
A fenti ábra két vonalat mutat, mindegyik három cellával. Ez egy normál asztal. Ha bármely sorban kisebb számú cellát ad meg, a táblázat „megereszkedik”, és minden hibásan jelenik meg.
Csak akkor adhat meg kevesebb cellát vagy sort, ha összevon 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 kombinál, akkor rowspan. Az attribútum értéke az egyesítendő elemek számát adja meg.
Kérjük, vegye figyelembe, hogy a kezdethez legközelebb eső elemben kell megadnia. Például a fenti képen, ha egyesíteni szeretné az 1. és 2. cellát, akkor az 1. cellában a colspan attribútumot kettős értékkel adja meg. És a 2-es vagy 3-as cella törlése már nem számít.
Az ötlet 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. Egyszerűen az elfoglalt területet függőlegesen számolja a rendszer. Lásd az alábbi képet.
Itt a 43-as cella két sort foglal el. Ehhez adja meg a rowspan attribútumot. Könnyen megjegyezhető:
A nyelvet alkotók igyekeztek minél közelebb hozni az emberi nyelvhez, hogy ismerete nélkül is legalább valahogy megértsék.
A HTML-ben a cellák egyesítése egyszerre két irányban történhet: függőlegesen és vízszintesen. Ehhez mindkét attribútumot egyszerre adjuk meg.
A fenti ábrán pontosan ez jelzi, hogy lehet egyesíteni: sorok, oszlopok, és egyszerre oszlopok és sorok.
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. A jobb oldalon pedig egy lehetőség van a második sorban lévő két cella kombinálásával. Ez világosabbá és egyszerűbbé teszi a HTML-kódok összehasonlítását.
Három cellát is kombinálhat a közepén. Az első esetben a colspan attribútumot az 1. számú cellában adtuk meg. Itt az első változatlan marad, a másodikhoz három colspan lesz hozzáadva.
Ha minden egyes cellát össze akar vonni egy sorban, töröljön négy td-t, és az elsőben adja meg a colspan="5" értéket.
Mint látható, a valóságban mindez egyszerű. Nincs semmi bonyolult. A lényeg az, hogy először alaposan megértsük a táblázatok összes buktatóját, és akkor nem merülhet fel probléma.
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 webhely-fejlesztők gyakran és korábban is használták őket webhely-elrendezéshez.
Vegyük például ezt a webhely makettjét. Ez a kialakítás nagyon egyszerű és primitív. De itt meg lehet mutatni az unió használatát kifejezetten.
Eredetileg egy háromsoros, két cellából álló táblázat volt. Ezután a webhely logójának elhelyezése érdekében az első sorban lévő két cellát egyesítették. Az alsó sorban ugyanígy tettük az „alagsor” elhelyezését.
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ű. Napjainkban a div címkét ajánlják blokkok létrehozásához.
És ne feledje, hogy egy HTML-táblázatban tetszőleges módon egyesítheti a cellákat. Minden attól függ, hogy mire van szüksége és hogyan szeretné elrendezni. A lényeg, hogy ne keveredj össze. Ha egy nagy táblázatot szeretne létrehozni nagy számú illesztéssel, akkor ajánlatos először az egészet egy papírra vagy Paintben rajzolni. Könnyebb lesz a kezdő tervezők számára.
Ha tapasztalatot szerez, könnyen végrehajthat ilyen műveleteket a fejében.
Valójában nagyon egyszerű, ha már létrehozott HTML-táblázatokat. Néhány paraméter elsajátítása után megtanulja, hogyan egyesítheti a táblázat celláit. A vízszintesen és függőlegesen egyesített cellákat tartalmazó táblázat példáját lásd például az előző cikkben.
Nézzük meg, hogyan kombinálhatók a cellák egy 5x5-ös HTML-tábla példáján. Táblázatok létrehozásához használom. A tervező által készített 5x5-ös táblázat kódja így néz ki:
| < div> < table border= "1" cellspacing= "1" cellpadding= "1" width= "100%" > < tbody> < tr> < td align= "left" >C1R1 < td align= "left" >C2R1 < td align= "left" >C3R1 < td align= "left" >C4R1 < td align= "left" >C5R1 < tr> < td align= "left" >C1R2 < td align= "left" >C2R2 < td align= "left" >C3R2 < td align= "left" >C4R2 < td align= "left" >C5R2 < tr> < td align= "left" >C1R3 < td align= "left" >C2R3 < td align= "left" >C3R3 < td align= "left" >C4R3 < td align= "left" >C5R3 < tr> < td align= "left" >C1R4 < td align= "left" >C2R4 < td align= "left" >C3R4 < td align= "left" >C4R4 < td align= "left" >C5R4 < tr> < td align= "left" >C1R5 < td align= "left" >C2R5 < td align= "left" >C3R5 < td align= "left" >C4R5 < td align= "left" >C5R5 |
| C1R1 | C2R1 | C3R1 | C4R1 | C5R1 |
| C1R2 | C2R2 | C3R2 | C4R2 | C5R2 |
| C1R3 | C2R3 | C3R3 | C4R3 | C5R3 |
| C1R4 | C2R4 | C3R4 | C4R4 | C5R4 |
| C1R5 | C2R5 | C3R5 | C4R5 | C5R5 |
Maga a táblázat kezdetben így néz ki:
| C1R1 | C2R1 | C3R1 | C4R1 | C5R1 |
| C1R2 | C2R2 | C3R2 | C4R2 | C5R2 |
| C1R3 | C2R3 | C3R3 | C4R3 | C5R3 |
| C1R4 | C2R4 | C3R4 | C4R4 | C5R4 |
| C1R5 | C2R5 | C3R5 | C4R5 | C5R5 |
I. Cellák függőleges egyesítése
A cellák függőleges egyesítéséhez használja a paramétert sortávolság, amely megadja a függőlegesen egyesített cellák számát.
Egyesítsük össze a fenti táblázat C1R1 és C1R2 celláit. Ehhez szüksége van:
A táblázat most így néz ki:
| C1R1 | C2R1 | C3R1 | C4R1 | C5R1 |
| C2R2 | C3R2 | C4R2 | C5R2 | |
| C1R3 | C2R3 | C3R3 | C4R3 | C5R3 |
| C1R4 | C2R4 | C3R4 | C4R4 | C5R4 |
| C1R5 | C2R5 | C3R5 | C4R5 | C5R5 |
II. A cellák vízszintes egyesítése
A cellák vízszintes egyesítéséhez használja a paramétert colspan, amely a vízszintesen egyesített cellák számát adja meg.
Kombináljuk a fenti táblázatban a C2R1, C3R1 és C4R1 cellákat. Ehhez szüksége van:
A táblázat így fog kinézni:
| C1R1 | C2R1 | C5R1 | ||
| C2R2 | C3R2 | C4R2 | C5R2 | |
| C1R3 | C2R3 | C3R3 | C4R3 | C5R3 |
| C1R4 | C2R4 | C3R4 | C4R4 | C5R4 |
| C1R5 | C2R5 | C3R5 | C4R5 | C5R5 |
Nincs más dolga, mint kitölteni a táblázatot a tartalommal: minták a portfóliójában lévő fordításaiból stb.
HTML táblázatok sorok vagy oszlopok segítségével rendszerezheti és megjelenítheti az adatokat. A táblázatok sorok és oszlopok metszéspontjából kialakított cellákból állnak. Táblázat cellái tartalmazhat bármilyen HTML-elemet, például címsorokat, listákat, szöveget, képeket, űrlapelemeket és egyéb táblázatokat. Minden táblázathoz hozzáadhat egy címet, a táblázat elé vagy mögé helyezve.
A táblázatokat már nem használják a weboldalak és az egyes elemek elrendezésére, mivel ez a technika nem biztosítja az oldal szerkezeti rugalmasságát és alkalmazkodóképességét, jelentősen növelve a HTML jelölést.
Minden táblázatelemhez, valamint saját attribútumai is rendelkezésre állnak.
A táblázat párosított címke használatával jön létre
1. ábra. A táblázat megjelenése formázás nélkül CSS-tulajdonságokkalAlapértelmezés szerint a táblázatnak és a celláknak nincs látható szegélye. Határok a border tulajdonság használatával vannak beállítva:
/* a táblázat külső szegélye szürke, 1px vastag */ táblázat (szegély: 1px tömör szürke;) /* a táblázat első sorának celláinak szegélyei */ th (szegély: 1px tömör szürke;) /* szegélyek a táblázat törzsének cellái közül */ td (szegély: 1px tömör szürke;)
Szóközök a táblázat cellái között a tábla tulajdonság segítségével (border-collapse: collapse;) eltávolíthatók.
Szélesség A táblázat alapértelmezés szerint a belső tartalmának szélessége. A szélesség beállításához be kell állítania a szélesség tulajdonságot:
/* a táblázat szélességét egyenlővé teszi annak a tárolóblokknak a szélességével, amelyben található */ tábla (szélesség: 100%;) /* fix szélességet állít be a táblához */ táblázat (szélesség: 600 képpont; )
Ha a táblázat celláiban kitöltés és szegély van megadva, a táblázat szélessége a következő értékeket fogja tartalmazni:
padding-left és padding-right , a border-left szélessége plusz a sor utolsó cellájának jobb szegély szélessége. Ha a cellák szélessége és szegélye meg van adva, akkor a táblázat szélessége a cellák szélességének, valamint a sor utolsó cellájának szegély bal és jobb oldali szélességének összege lesz.
A táblázat sorai vagy sorai a címke használatával jönnek létre
Táblaaláírást hoz létre. Közvetlenül a címke után hozzáadva
Strukturális oszlopcsoportot hoz létre, kiemelve a logikailag homogén cellákat. Egy vagy több oszlopot csoportosít az egységes formázás érdekében, lehetővé téve, hogy stílusokat alkalmazzon az oszlopokra, ahelyett, hogy minden cellához és sorhoz stílusokat ismételne. Közvetlenül a címkék után hozzáadva 
Rizs. 2. Táblázat oszlopainak más színnel való kiemelése a címkék és a
Az elem egy címcsoportot hoz létre a táblázat soraihoz, hogy egységes megjelenést biztosítson. Elemekkel kombinálva használják
Az elemet a következő sorrendben kell használni: gyermekelemként
| Tulajdonság | Leírás, elfogadott érték | |||
|---|---|---|---|---|
| colspan | A vízszintesen egyesítendő cellák száma egy sorban. | |
||
| fejlécek | Az aktuális adatcella fejléc-információit tartalmazó fejléccellák listáját adja meg. Beszédböngészőkhöz tervezve. | ... | ... | |
| sortávolság | A függőlegesen egyesítendő cellák száma az oszlopban. | Lehetséges értékek: szám 1-től 999-ig. |
||
| span | Az egyetlen stílus meghatározásához kombinált oszlopok alapértelmezett száma 1. Elfogadott értékek: bármely pozitív egész szám. |
|||
Rizs. 4. Hozzon létre egy étterem menüt HTML-táblázat segítségével | Konyha | Hideg ételek | Meleg ételek | Desszert | ||
|---|---|---|---|---|---|
| Saláták | Snackek | Első étkezés | Második tanfolyamok | ||
| orosz | A vinaigrette | Nyelv tormával | Shchi savanyú káposztával | Burgonyagombóc | Sült alma mézzel |
| Olivie | Marha zselé | Házi készítésű rassolnik | Tejfölben sült kárász | Palacsinta pite | |
| Hering "bunda alatt" | Kocsonyás süllő | Hús hodgepodge | "Pozharskie" szelet | Torta "burgonya" | |
| spanyol | Fésűkagyló ceviche | Empanadas | Kenyérleves fokhagymával | Paella tenger gyümölcseivel | Churros |
| Avokádó és tonhal tembal | Ahotomate | Asztúriai fabada | Sertés rakso | Almoixavena | |
| Bab sonkával | Chanfaina | Halászlé búzadara galuskával | Burgonya tortilla | Bunuelos | |
| Francia | Vogéz saláta | Csirke rillette | "Renoir" padlizsánkrémleves | Burgonya ograten | Briós |
| Panzanella saláta | Sajtos finomság | Francia sütőtök leves | Baromfi gratin | Ligur citromos pite | |
| Tartarus | Pácolt lazac | "Conti" leves | Tartiflette | Savarin "Triumph" | |
Rizs. 3. Példa táblázatcellák vízszintes kombinálására a colspan attribútummal 
