html աղյուսակի տողերի և սյունակների միացում: HTML դաս. Բջիջների միաձուլում. Օգտագործելով ուղղահայաց միաձուլված բջիջներ

Շատ հարմար իր։ Դուք կարող եք անել ամեն ինչ նրանց հետ: Իհարկե, հիմնական նպատակը աղյուսակի տեսքով տեղեկատվություն տեղադրելն է։ Սակայն կայքերի մշակողները ավելի հեռուն են գնացել: Մի ժամանակ շատ տարածված էր աղյուսակների օգտագործումը կայքի շրջանակ ստեղծելու համար: Այժմ մասնագետները փորձում են դա չանել։

Աղյուսակները լայն կիրառություն են գտել ատրիբուտների մեծ քանակի շնորհիվ։ Օրինակ՝ տողեր կամ սյունակներ միացնելու հատկությունը շատ օգտակար է ստացվել։

Տեսության ներածություն

HTML-ում բջիջները միաձուլվում են՝ օգտագործելով երկու հատկանիշ՝ colspan և rowspan: Դրանք նշված են td թեգի համար:

Նախքան թեմայի մեջ խորանալը, նախ վերլուծենք ցանկացած աղյուսակի կառուցվածքը: Յուրաքանչյուր աղյուսակ ունի տող, որի մեջ կան բջիջներ: Հիշեք, որ սկզբում բոլոր աղյուսակները պետք է պարունակեն նույն թվով բջիջներ:

Վերևի նկարը ցույց է տալիս երկու տող, որոնցից յուրաքանչյուրը ունի երեք բջիջ: Սա սովորական սեղան է: Եթե ​​ցանկացած տողում նշեք ավելի փոքր թվով բջիջներ, ապա աղյուսակը «դուրս կտեղափոխվի», ամեն ինչ սխալ կցուցադրվի:

HTML աղյուսակ. բջիջների միաձուլում ուղղահայաց և հորիզոնական

Դուք կարող եք ավելի քիչ բջիջներ կամ տողեր նշել միայն այն դեպքում, եթե ինչ-որ բան միացնում եք: Բայց հեռացված տարրի փոխարեն սկզբում մոտակա հարեւանում պետք է նշվի լրացուցիչ հատկանիշ։ Եթե ​​միավորում եք սյունակները, ապա colspan, եթե տողեր, ապա rowspan: Հատկանիշի արժեքը սահմանում է միավորվող տարրերի քանակը:

Խնդրում ենք նկատի ունենալ, որ դուք պետք է նշեք այն սկզբին մոտակա տարրում: Օրինակ, վերը նշված նկարում, եթե ցանկանում եք միաձուլել 1-ին և 2-րդ բջիջները, ապա 1-ին բջիջը կսահմանեք, որպեսզի colspan հատկանիշը լինի երկու: Իսկ ջնջիր 2-րդ կամ 3-րդ բջիջը, դա արդեն նշանակություն չունի։

Ներքևի տողն այն է, որ դուք ասում եք բջիջին, թե որքան տարածք է այն գրավելու: Նախնական արժեքը 1 է:

Բջիջների ուղղահայաց միաձուլումը HTML աղյուսակում հետևում է նույն սկզբունքին: Ուղղակի զբաղեցրած տարածքը դիտարկվելու է ուղղահայաց: Տես ստորև նկարը։

Այստեղ 43 թվով բջիջը երկու տող է զբաղեցնում։ Դրա համար նշվել է rowspan հատկանիշը: Հեշտ է հիշել.

• Շարք - տող:
• Col - սյունակ / սյունակ:
• Span - միություն.

Լեզուն ստեղծողները փորձել են այն հնարավորինս մոտեցնել մարդուն, որպեսզի նույնիսկ առանց այն իմանալու, գոնե ինչ-որ կերպ հասկանալի լինի։

HTML-ում բջիջները կարող են միավորվել միանգամից երկու ուղղությամբ՝ ուղղահայաց և հորիզոնական: Դա անելու համար նշեք երկու հատկանիշները միաժամանակ:

Վերևի նկարում սա հենց այն է, ինչը ցույց է տալիս, որ դուք կարող եք միություն անել՝ տողեր, սյունակներ և միևնույն ժամանակ սյունակներ և տողեր:

HTML՝ բջիջների միաձուլում: Օրինակներ

Դիտարկենք ավելի բարդ քայլ առ քայլ օրինակներ մեծ աղյուսակներում: Ստորև բերված նկարը ձախ կողմում ցույց է տալիս սովորական աղյուսակի բնօրինակ տարբերակը: Իսկ աջ կողմում՝ տարբերակ՝ երկրորդ շարքում երկու բջիջների միավորմամբ: Այսպիսով, ավելի պարզ և հեշտ է համեմատել HTML կոդը:

Դուք կարող եք նաև միավորել երեք բջիջ կենտրոնում: Առաջին դեպքում colspan հատկանիշը նշված էր #1 բջիջում: Այստեղ առաջինը կմնա անփոփոխ, իսկ երկրորդին ավելացվել է երեքի հավասար սյուն։

Եթե ​​ցանկանում եք միաձուլել բոլոր բջիջները անընդմեջ մեկին, ապա ջնջեք չորս tds և առաջինում նշեք colspan="5":

Ինչպես տեսնում եք, իրականում դա բավականին պարզ է: Դժվար բան չկա։ Հիմնական բանն այն է, որ առաջին անգամից ուշադիր հասկանաք սեղանների բոլոր թակարդները, այնուհետև ոչ մի խնդիր չպետք է առաջանա:

Աղյուսակները որպես կայքի շրջանակ

HTML-ում բջիջների միաձուլումը միշտ չէ, որ օգտագործվում է սովորական տեղեկատվական աղյուսակների համար (ինչպես Word-ում կամ Excel-ում): Կայքերի մշակողները հաճախ, և նախկինում առանց բացառության, դրանք օգտագործում էին կայքի դասավորության համար:

Օրինակ, հաշվի առեք այս կայքի դասավորությունը: Այս դիզայնը շատ պարզ է և պարզունակ: Բայց այստեղ հնարավոր է հստակ ցույց տալ միացման օգտագործումը:

Ի սկզբանե կար երեք տողից բաղկացած աղյուսակ՝ յուրաքանչյուրը երկու բջիջ: Այնուհետև կայքի տարբերանշանը տեղադրելու համար առաջին շարքի երկու բջիջները միաձուլվեցին։ Ներքեւի տողը նույնն արեց «ստորատակը» տեղադրելու համար:

Դրա շնորհիվ դուք կարող եք դիզայնի տարրեր տեղադրել իրենց տեղերում, և ոչինչ դուրս չի գա դրա սահմաններից: Դա շատ հարմար է և պարզ: Այդ իսկ պատճառով այն այդքան տարածված էր: Div պիտակը այժմ առաջարկվում է բլոկներ ստեղծելու համար:

Եզրակացություն

Եվ հիշեք, որ HTML աղյուսակում դուք կարող եք անել այն, ինչ ցանկանում եք միաձուլել բջիջները: Ամեն ինչ կախված է նրանից, թե ինչ է ձեզ անհրաժեշտ և ինչպես եք ցանկանում դա կազմակերպել: Ամենակարևորը՝ մի շփոթվեք։ Եթե ​​ցանկանում եք մեծ թվով միացումներով մեծ սեղան ստեղծել, ապա խորհուրդ է տրվում նախ այս ամենը նկարել թղթի վրա կամ Paint-ում։ Սկսնակների համար այս կերպ ավելի հեշտ կլինի:

Երբ փորձ ձեռք բերես, հեշտությամբ կարող ես նման գործողություններ կատարել քո գլխում։

Ես ձեզ մանրամասն և մանրամասն կպատմեմ, թե ինչպես կարելի է միաձուլել բջիջները ուղղահայաց և հորիզոնական աղյուսակներում:

Այս հոդվածում մենք չենք բացատրի սկզբունքները ստեղծելով htmlաղյուսակներ, այս գիտելիքների համար անցեք մեր դասընթացը HTML-ի վերաբերյալ:

Սեղանի ներսում բջիջները միացնելու համար պիտակի համար սահմանված է երկու հատկանիշ դրանք են colspan (հորիզոնական միություն) և rowspan (ուղղահայաց միություն):

Որոշ մարդիկ դժվարանում են օգտագործել այս հատկանիշները՝ միաձուլելով բջիջները:

colspan և rowspan ատրիբուտները որպես պարամետր վերցնում են 0-ից մինչև 1000 ամբողջ արժեքներ: Ահա մի փոքր օրինակ, թե ինչպես կարող եք միաձուլել բջիջները աղյուսակում:

Առաջին հայացքից ոչ այնքան բարդ կառույց է իրականացվում, բայց նայելով առատությանը Եվ կոդում առկա տարրերը, դժվար է հասկանալ, թե ինչ սկզբունքով կարելի է միավորել ևս մի քանի բջիջ:

Մենք ձեզ առաջարկում ենք ունիվերսալ և շատ հարմար միջոցմիաձուլվող բջիջները:

Սկսելու համար պատրաստեք դատարկ ձեր ապագա աղյուսակի համար՝ ներկայացնելով այն բոլոր առանձնացված բջիջներով: Դա կարող է լինել սեղան 3x3, 6x10եւ այլն։ Յուրաքանչյուր բջիջին կտանք իր համարը՝ սկսելով հաշվել ձախից աջ և վերևից ներքև։

Եկեք վերլուծենք վերը նշված աղյուսակի ստեղծումը՝ օգտագործելով այս մեթոդը:

Ահա թե ինչպես կանդրադառնա մեր աշխատանքային մասի ծածկագիրը և ինքնին.

Անհրաժեշտ է հորիզոնական միաձուլել 1,2,3 թվերով բջիջները։ Դա անելու համար 1-ին բջիջի կոդի մեջ ավելացրեք colspan հատկանիշը 3 արժեքով: Եվ ջնջեք տարրեր 2 և 3 թվերով: Ստացված վանդակում գրի՛ր միավորված բջիջների համարները:

Այժմ մենք պետք է միաձուլենք 9-րդ և 13-րդ բջիջները ուղղահայաց: Կատարում ենք նմանատիպ ընթացակարգ՝ թիվ 9 բջիջի համար սահմանում ենք rowspan հատկանիշը 2 արժեքով, ջնջում ենք թիվ 13 բջիջը, միացված բջիջում գրում ենք այն բջիջների համարները, որոնցից այն բաղկացած է։

Սա կփոխի մեր կոդը և տեսքըսեղաններ:

Մնում է 11,12,15,16 բջիջները միավորել մեկի մեջ։ Դա անելու համար 11 համարով բջիջում մենք գրում ենք colspan = "2" rowspan = "2" ատրիբուտները: 12,15,16 բջիջները հանվում են ծածկագրից։ Համակցված վանդակում գրում ենք 11,12,13,14 թվերը։

Ահա թե ինչպես կփոխվի մեր կոդը և աղյուսակի տեսքը.

Այսքանը, մենք ստացանք օրիգինալ աղյուսակը, այժմ բջիջները կարող են լրացվել այն տեղեկություններով, որոնք հարմար կլինեն ձեզ համար:

Հուսով ենք, որ դուք հասկանում եք բջիջների միաձուլմամբ բարդ աղյուսակներ ստեղծելու սկզբունքը:

Դաս 11

Աղյուսակի բջիջների միաձուլում:

Այս դասում մենք շարունակում ենք ուսումնասիրել աղյուսակները, մասնավորապես, մենք կքննարկենք ևս երկու հատկանիշ պիտակի համար <td>, որոնք պատասխանատու են բջիջների միաձուլման համար։ Նայելով ստորև ներկայացված նկարին՝ կհասկանաք, թե ինչ ասոցիացիայի մասին է խոսքը։

Ձախ կողմում ներկայացված աղյուսակն ունի սովորական կառուցվածք։ Առաջին շարքի աջ աղյուսակում երկու բջիջները միաձուլվում են իրար՝ կազմելով մեկ մեծ բջիջ:

Այս հատկանիշների կիրառումը մի փոքր ավելի բարդ է, քան մյուսների կիրառումը: Դրա համար էլ առանձին դաս ունեն։

Colspan հատկանիշը.

Հատկանիշ colspanօգտագործվում է բջիջների հորիզոնական միաձուլման համար: Հատկանիշի արժեքը սահմանում է բջիջների քանակը, որոնք պետք է միավորվեն մեկի մեջ:

Ուշադրություն. Շատ կարևոր է, որ մի շարքում միաձուլված և նորմալ բջիջների ընդհանուր թիվը հավասար լինի մյուս շարքի բջիջների ընդհանուր թվին: Դիտարկենք առաջին նկարի ճիշտ աղյուսակը որպես օրինակ: Վերին տողը պարունակում է միայն մեկ մեծ բջիջ, որը բաղկացած է երկու սովորական բջիջներից, իսկ ստորին տողը պարունակում է երկու սովորական բջիջ:
Ստորև ներկայացված է ճիշտ գրված կոդի տարբերակ.

Կոդի բացատրություններ.
Վերին գիծ <tr>ունի մեկ բջիջ <td>, որի համար գրանցված է հատկանիշը colspanիմաստով 2 . Դա նշանակում է որ տրված բջիջմիավորում է համապատասխանաբար 2 բջիջ, այս բջիջը փոխարինում է 2 բջիջ։ Երկրորդ տող <tr>ունի 2 կանոնավոր բջիջ <td>.
Ստացվում է, որ վերևի շարքում մենք ունենք երկու բջիջ՝ միաձուլված միմյանց հետ, իսկ ներքևի շարքում՝ երկու սովորական բջիջ։ Թիվը հավասար է, ուստի կոդը ճիշտ է գրված։

Այժմ ընդհանուր սխալով կոդ օրինակ.

Կոդի բացատրություններ.
Սխալն այն է, որ առաջին տողը <tr>պարունակում է ավելի քան երկու բջիջ <td>, և երեքը, մինչդեռ երկրորդ տողը <tr>պարունակում է երկու բջիջ <td>.
Նայելով ծածկագրին, տեսողականորեն թվում է, որ տողերում բջիջների թիվը նույնն է, քանի որ պիտակների քանակը <td>նույնը. Բայց պիտակներից մեկը <td>հատկանիշ ունի colspanիմաստով 2 , ինչը նշանակում է, որ այս մեկ բջիջը զբաղեցնում է երկուսի տեղը։

rowspan հատկանիշը.

Հատկանիշ շարքի բացվածքօգտագործվում է բջիջները ուղղահայաց միաձուլելու համար: Գործողության սկզբունքը ճիշտ նույնն է, ինչ հատկանիշին colspan.

Կոդի բացատրություններ.
Վերին գիծ <tr>ունի երեք բջիջ <td>, դրանցից մեկն ունի հատկանիշը շարքի բացվածքիմաստով 3 . Սա նշանակում է, որ այս բջիջը միավորում է 3 բջիջ (որն ունի հատկանիշ + 2 ստորին բջիջ ուղղահայաց): Ինչպես ասացի, առաջին շարքը ունի 3 բջիջ, ինչը նշանակում է, որ ներքևի երկու տողերը նույնպես պետք է ունենան երեքական բջիջ: Նայելով ծածկագրին, մենք տեսնում ենք, որ ներքևի երկու տողերը <tr>ունեն ընդամենը երկու բջիջ <td>, բայց մի մոռացեք, որ առաջին բջիջը վերին գիծզբաղեցրեց իր տեղը + դրա տակ գտնվող երկու բջիջների ևս մեկ տեղ: Սա նշանակում է, որ բջիջների ընդհանուր թիվը յուրաքանչյուրում առանձին գիծհավասար է երեքի։

HTML աղյուսակում յուրաքանչյուր բջիջ սահմանազատված է պիտակների մի շարքով Եվ, որի միջև դրված է բովանդակությունը։ Եթե ​​դուք չեք ավելացնում պիտակին լրացուցիչ հատկանիշներ կամ css ոճերը, ապա յուրաքանչյուր բջիջ լռելյայնորեն կզբաղեցնի ուղիղ մեկ սյունակ:

HTML-ի միաձուլման բջիջների համար դուք պետք է ավելի քիչ բջիջներ ավելացնեք տողում, քան մնացած տողերում, և պիտակի ներսում ավելացնեք colspan = " " հատկանիշը: բջիջը ընդլայնելու համար:

Դիտարկենք երկու տողով և երկու սյունակով HTML աղյուսակի մի պարզ օրինակ (չորս բջիջ): Նրա HTML կոդը այսպիսի տեսք ունի.

Վերևի տողի բջիջն այժմ ընդգրկում է երկու սյունակ: Քանի որ այն զբաղեցնում է երկու բջիջների տարածք, առաջին շարքում կա միայն մեկ td տարր:

Դուք կարող եք միաձուլել HTML աղյուսակի բջիջները սեղանի ցանկացած հատվածում ցանկացած քանակությամբ սյունակների հետ: Հորիզոնական բջիջների միաձուլման ամենաօգտակար կիրառություններից մեկը աղյուսակի վերնագրեր ստեղծելն է: Եթե ​​աղյուսակն ունի n սյունակ, ապա վերևի տողի առաջին բջիջում դրեք colspan=n" հատկանիշը և այդ տողից հեռացրեք մյուս բջիջները։

Ինչպես միաձուլել բջիջները html աղյուսակում ուղղահայաց՝ տողերի տարածություն

Եթե ​​ցանկանում եք, որ բջիջն ընդարձակվի մի քանի տողերով, ավելացրեք rowspan=" " հատկանիշը պիտակի ներսում ուղղահայաց ձգվող բջիջը. Այն տողից ներքևում գտնվող յուրաքանչյուր տողում, որտեղ սկսվում է ձգված բջիջը, մեկ բջիջ պետք է ջնջվի, որպեսզի աղյուսակը հավասարեցվի: Օրինակ, երբ բջիջը ձգում եք երեք տողերի վրա, դուք պետք է ջնջեք մեկ բջիջ հաջորդ երկու տողերում:

Դիտարկենք HTML աղյուսակի մի պարզ օրինակ՝ չորս բջիջներով, որոնք բաժանված են երկու տողի և երկու սյունակի: HTML կոդը.

HTML աղյուսակի բջիջները ուղղահայաց տարածելու համար rowspan=2» ավելացրեք վերևի տողի առաջին բջիջին, այնուհետև ջնջեք ներքևի տողի բջիջներից մեկը: HTML կոդը այժմ կունենա հետևյալ տեսքը.

Դուք կարող եք համատեղել բջիջների հորիզոնական և ուղղահայաց միաձուլումը նույն աղյուսակում, ինչպես ցույց է տրված ձախ նկարում: Մեկ բջիջը կարող է նույնիսկ մի քանի տողեր և սյունակներ տարածել, ինչպես ցույց է տրված աջ նկարում: Յուրաքանչյուր աղյուսակի HTML կոդը տրված է ստորև.

Օգտագործելով ուղղահայաց միաձուլված բջիջներ

HTML բջիջների ուղղահայաց միաձուլումը մեկ սյունակում կարող է օգտագործվել, եթե ցանկանում եք վերնագիր ստեղծել այդ սյունակին կից տողերի խմբի համար: Այն կարող է նաև օգնել առանձնացնել լարերի խմբերը ըստ տեսակի։

սեղաններԼավագույն օրինակը պարզ աղյուսակն է, որը ներկայացված է HTML 5-10 ցուցակում:

Սա սովորական սեղան, որոնց բջիջները համարակալված են, ուստի մեզ համար ավելի հեշտ կլինի ապագայում։ Նկ. 5.2-ը ցույց է տալիս իր տեսքը վեբ բրաուզերի պատուհանում:

Այժմ հաշվի առեք Նկ. 5.3.

Այստեղ որոշ բջիջներ միավորվում են: Կարելի է տեսնել, որ միաձուլված բջիջները կարծես միաձուլվել են մեկի մեջ: Ինչպե՞ս դա անել:

Հատկապես այս թեգերի համար և աջակցում են երկու շատ նշանակալի ընտրովի հատկանիշներ: Առաջին - COLSPAN - միավորում է բջիջներըհորիզոնական, երկրորդը -ROWSPAN- ուղղահայաց:

Բազմաթիվ բջիջները հորիզոնական կերպով մեկի մեջ միացնելու համար հետևեք այս քայլերին.

1. Գտեք կոդի մեջ HTML պիտակ () համապատասխանում է միաձուլված բջիջներից առաջինին (եթե բջիջները հաշվվում են ձախից աջ):

2. Մուտքագրեք դրա մեջ COLSPAN հատկանիշը և հատկացրեք միավորվող բջիջների քանակը՝ հաշվելով նաև առաջինը։

3. Հեռացնել պիտակները ( ) որոնք ստեղծում են այդ շարքի միաձուլված բջիջների մնացած մասը:

Եկեք միացնենք աղյուսակի 2-րդ և 3-րդ բջիջները (տես Ցուցակ 5.10): Ուղղված կոդի հատվածը, որը ստեղծում է այս աղյուսակի առաջին տողը, ցուցադրված է 5-11 ցուցակում:

Նույն կերպ մենք կստեղծենք համակցված բջիջները 4 + 5 և 12 + 13 + 14 + 15:

Բջիջների ուղղահայաց միացումը մի փոքր ավելի բարդ է: Ահա այն քայլերը, որոնք պետք է հետևել դրա համար:

1. HTML կոդի մեջ գտեք տողը (պիտակը), որը պարունակում է միավորվող բջիջներից առաջինը (եթե հաշվում եք տողերը վերևից ներքև):

2. Գտեք պիտակը ( ) համապատասխանում է միաձուլված բջիջներից առաջինին:

3. Մուտքագրեք դրա մեջ ROWSPAN հատկանիշը և նշանակեք քանակ միաձուլված բջիջներ, ներառյալ դրանցից հենց առաջինը։

4. Դիտեք հաջորդ տողերը և հեռացրեք պիտակները դրանցից ( ), որոնք ստեղծում են միաձուլված բջիջների մնացած մասը:

Մենք հեռացել ենք միաձուլել բջիջներըՄեր աղյուսակի 1-ին և 6-րդը. 5-12 ցուցակը պարունակում է նրա HTML կոդի ուղղված հատվածը (ուղղումները ազդում են առաջին և երկրորդ տողերի վրա):

Նկատի ունեցեք, որ մենք հեռացրել ենք պիտակը երկրորդ շարքից, որը ստեղծում է վեցերորդ բջիջը, քանի որ այն միաձուլված է առաջին բջիջի հետ։

Այժմ այն ​​շատ հաճախ չի օգտագործվում։ Այնուամենայնիվ, ավելի վաղ, աղյուսակային վեբ դիզայնի ծաղկման շրջանում, դժվար էր հանդիպել առանց սեղանի միաձուլված բջիջներ. Ամեն դեպքում, դա չի խանգարում իմանալ դրա մասին: