Նկարների և աղյուսակների տեղադրում html էջում։ Նշեք ատրիբուտները և հատկությունները

Դարձավ հայտնի, վեբ դիզայներները հիմնականում օգտագործեցին աղյուսակային դասավորության մեթոդը և ստացան շատ լավ արդյունք։


Թեգեր, որոնք օգտագործվում են html-ով աղյուսակ կառուցելու համար

սեղան- պարտադիր պիտակ, որը բացում և փակում է աղյուսակը
վերնագիր- կամընտիր պիտակ, որը ցույց է տալիս աղյուսակի վերնագիրը
րդ- կամընտիր պիտակ, որի բացման և փակման պիտակները պարունակում են սյունակի անվանումը: Սովորաբար թավով
tr- պարտադիր պիտակ, որից բացվում և փակվում է գիծը
տդ- անընդմեջ բջիջի բացումն ու փակումը նշանակող պարտադիր պիտակ

Աղյուսակի պարզ կոդի օրինակ



html աղյուսակ





Սեղանի անվանումը

Սյունակ 1

Ստոբեթս 2

Տեքստը առաջին բջիջում

Տեքստը երկրորդ բջիջում





Բրաուզերը կցուցադրվի

Աղյուսակների նշանակում html-ով

Սեղանների վրա դասը շատ կարևոր է: Սեղանների շնորհիվ կարող եք դասավորել ոչ միայն տեքստը, այլև պատկերները, հղումները և շատ ավելին: Սեղանը կարելի է դնել ֆոն(կամ դրա գույնը), նահանջ, լայնությունը, սահմանև այլ տարբերակներդա նրան գեղեցկություն կտա տեսքը. Աղյուսակ - Ձեր առաջին քայլը հասկանալու համար Վեբ դիզայն! Նախկինում շատ կայքեր ամբողջությամբ դրված էին որպես աղյուսակներ, այսինքն՝ այն ամենը, ինչ տեսել է օգտատերը ( կողագոտ, վերին մենյու, բովանդակություն) - աղյուսակի մեծ բջիջների բովանդակությունն էր:
Այդ կապակցությամբ անցնենք այն հատկանիշներին, որոնք գեղեցիկ են դարձնում սեղանը...

html աղյուսակների հատկությունները և պարամետրերը՝ լիցք, լայնություն, ֆոնի գույն, եզրագիծ (շրջանակ)

ժամը սեղանի պիտակունի հետևյալ հատկանիշները.

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

Դիտարկենք այս հատկանիշների օգտագործումը օրինակով: Դա անելու համար ստեղծեք աղյուսակ (բայց արդեն առանց հազվադեպ օգտագործվող վերնագրի և th թեգերի) և սահմանեք հատկանիշի պարամետրը սահման (սահման), լայնությունը (աղյուսակի, տողի կամ բջիջի լայնությունը)և bgcolor (բջջի գույն)



html աղյուսակ









Արդյունքում զննարկիչում կցուցադրվի հետևյալ աղյուսակը

շրջանակ- սեղանի շուրջ շրջանակը նշող հատկանիշ: Կան հետևյալ արժեքները.

Անվավեր - առանց շրջանակ,
վերևում - միայն վերին շրջանակը,
ներքևում - միայն ստորին շրջանակը,
hsides - միայն վերին և ստորին եզրագծերը,
vsides - միայն ձախ և աջ եզրագծեր,
lhs - միայն ձախ շրջանակ,
rhs - միայն աջ շրջանակ,
տուփ - շրջանակի բոլոր չորս մասերը:

կանոնները- հատկանիշ, որը ցույց է տալիս աղյուսակի սահմանները, բջիջների միջև: Կան հետևյալ արժեքները.

Ոչ մեկը - բջիջների միջև սահմաններ չկան,
խմբեր - սահմաններ միայն տողերի խմբերի և սյունակների խմբերի միջև (կքննարկվի մի փոքր ուշ),
տողեր - սահմաններ միայն տողերի միջև,
cols - սահմաններ միայն սյունակների միջև,
բոլորը - ցույց տալ բոլոր սահմանները:

Դիտարկենք կոդի օրինակը



html աղյուսակ


Սյունակ 1

Ստոբեթս 2











Արդյունք

Հիմա եկեք փորձենք ստեղծել գեղեցիկ սեղան: Դա անելու համար եկեք սկսենք օգտագործել սեղանի հավասարեցում. Դա անելու համար կան հետևյալ արդեն ծանոթ պարամետրերը.

շարել- սեղանի հավասարեցում. Այն կարող է տեղադրվել ձախ (ձախ), աջ (աջ), կենտրոնում (կենտրոն)
բջիջների տարածություն- սեղանի բջիջների միջև հեռավորությունը: Նշված է պիքսելներով (կանխադրված 0 պիքսել)
բջջային լիցք- պիքսելներով լիցքավորում բջիջի բովանդակության և դրա ներքին սահմանի միջև (կանխադրված 0 պիքսել)
Դիտարկենք մի օրինակ



html աղյուսակ


Սյունակ 1

Ստոբեթս 2

Տեքստը առաջին սյունակի առաջին բջիջում

Տեքստը երկրորդ սյունակի երկրորդ բջիջում









Բրաուզերը կցուցադրի կենտրոնական դասավորված աղյուսակ, որն ունի հետևյալ տեսքը.

tr տողեր և td բջիջներ HTML աղյուսակներում

Կրկին հիշեցնեմ, որ աղյուսակները կազմվում են տող առ տող (tr): Տողերը (tr) արդեն պարունակում են բջիջներ (td): Եթե ​​պարամետր եք սահմանել տողի համար (tr), ապա այն վավեր կլինի բոլոր բջիջները(td) այս տողում, եթե կոնկրետ բջիջի համար, ապա միայն դրա համար: Վերևի օրինակներում ես նշել եմ տողի գույնը, այս պարամետրը համապատասխանաբար բաշխվել է բոլոր բջիջների համար:





tr և td թեգերի համար կան հետևյալը

շարել- տեքստի հավասարեցում բջիջի ներսում: Ձախ (ձախ), աջ (աջ), կենտրոն (կենտրոն)
valign- տեքստի հավասարեցում բջջի ներսում ուղղահայաց: Վերև (վերև), ներքև (ներքև), կենտրոն (միջին)
bgcolor- սահմանում է գծի գույնը
լայնությունը- սյունակի լայնությունը (ներքևում գտնվող բոլոր բջիջները կընդունեն այս պարամետրը) նշվում է պիքսելներով կամ որպես տոկոս, որտեղ 100% -ը ամբողջ աղյուսակի լայնությունն է
բարձրությունը- բջջային բարձրություն (շարքի բոլոր բջիջները կընդունեն այս պարամետրը)

Դիտարկենք կոդը, որտեղ բջիջների (td) բովանդակությունը հավասարեցված է տարբեր եզրերի վրա՝ առաջինում՝ ձախ, երկրորդում՝ աջ.



html աղյուսակ


Սյունակ 1

Ստոբեթս 2

Տեքստը առաջին սյունակի առաջին բջիջում

Տեքստը երկրորդ սյունակի երկրորդ բջիջում

Սյունակ 1

Ստոբեթս 2









Արդյունք

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

Շնորհակալություն ուշադրության համար! Հուսով եմ, որ նյութը օգտակար էր:

Ինչ է սեղանը:

Աղյուսակը տվյալների կառուցվածքային շարք է, որը կազմված է տողերից և սյունակներից ( աղյուսակային տվյալներ) Աղյուսակը թույլ է տալիս արագ և հեշտությամբ փնտրել արժեքներ, որոնք ցույց են տալիս ինչ-որ կապ տարբեր տեսակի տվյալների միջև, օրինակ՝ անձի և նրա տարիքի, կամ շաբաթվա օրը, կամ տեղական լողավազանի ժամանակացույցը:

Աղյուսակները շատ հաճախ օգտագործվում են մարդկային հասարակության մեջ և երկար ժամանակ օգտագործվել են, ինչպես վկայում է 1800 թվականի ԱՄՆ մարդահամարի այս փաստաթուղթը.

Հետևաբար, զարմանալի չէ, որ HTML-ի ստեղծողները միջոցներ են տրամադրել համացանցում աղյուսակային տվյալները կառուցելու և ներկայացնելու համար:

Ինչպե՞ս է աշխատում սեղանը:

Սեղանի իմաստն այն է, որ այն կոշտ է: Տեղեկատվությունը հեշտությամբ մեկնաբանվում է տողերի և սյունակների վերնագրերի միջև տեսողական կապեր ստեղծելով: Օրինակ՝ նայեք ստորև բերված աղյուսակին և գտեք Հովյան գազային հսկա՝ 62 արբանյակներով: Պատասխանը կարող եք գտնել՝ կապելով համապատասխան տողերի և սյունակների վերնագրերը:


Սյունակ 1

Ստոբեթս 2

Տեքստը առաջին սյունակի առաջին բջիջում

Տեքստը երկրորդ սյունակի երկրորդ բջիջում
Տվյալներ մեր արեգակնային համակարգի մոլորակների մասին (Մոլորակային փաստեր՝ վերցված ՆԱՍԱ-ի մոլորակային տվյալների թերթիկից - Metric .
Անուն Զանգված (10 24 կգ) Տրամագիծը (կմ) Խտությունը (կգ/մ3) Ձգողականություն (մ/վ 2) Օրվա տևողությունը (ժամեր) Հեռավորությունը Արևից (106 կմ) Միջին ջերմաստիճանը (°C) լուսինների թիվը նշումներ
Երկրային մոլորակներ Մերկուրի 0.330 4,879 5427 3.7 4222.6 57.9 167 0 Արեգակին ամենամոտ
Վեներա 4.87 12,104 5243 8.9 2802.0 108.2 464 0
Երկիր 5.97 12,756 5514 9.8 24.0 149.6 15 1 Մեր աշխարհը
Մարս 0.642 6,792 3933 3.7 24.7 227.9 -65 2 Կարմիր մոլորակ
հովյան մոլորակներ գազային հսկաներ Յուպիտեր 1898 142,984 1326 23.1 9.9 778.6 -110 67 Ամենամեծ մոլորակը
Սատուրն 568 120,536 687 9.0 10.7 1433.5 -140 62
սառցե հսկաներ Ուրան 86.8 51,118 1271 8.7 17.2 2872.5 -195 27
Նեպտուն 102 49,528 1638 11.0 16.1 4495.1 -200 14
Գաճաճ մոլորակներ Պլուտոն 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 2006 թվականին գաղտնազերծվել է որպես մոլորակ, սակայն դա մնում է հակասական:

Երբ ճիշտ է արվում, նույնիսկ կույր մարդիկ կարող են մեկնաբանել աղյուսակային տվյալները HTML աղյուսակում. հաջողված HTML աղյուսակը պետք է ուժեղացնի տեսողություն ունեցող և տեսողության խնդիրներ ունեցող օգտատերերի փորձը:

Սեղանի ձևավորում

Վերցրեք հետևյալ պարզ օրինակը.

Տվյալներ 1 Տվյալներ 2
Կալկաթա Նարնջագույն
ռոբոտներ Ջազ

Որը մեզ տալիս է հետևյալ արդյունքը.

Տվյալներ 1 Տվյալներ 2
Կալկաթա Նարնջագույն
ռոբոտներ Ջազ

Սա իդեալական չէ, քանի որ մենք պետք է կրկնենք ստիլինգի տեղեկատվությունը սյունակի բոլոր երեք բջիջներում (հավանաբար, իրական նախագծում մենք կունենանք դասակարգում բոլոր երեքի վրա և նշենք ոճավորումը առանձին ոճաթերթում): Դա անելու փոխարեն մենք կարող ենք տեղեկատվությունը մեկ անգամ նշել՝ a տարր. տարրերը նշված են ներսում ա կոնտեյներ հենց բացվածքի տակ

հատկորոշել. Մենք կարող ենք ստեղծել նույն էֆեկտը, ինչ տեսնում ենք վերևում՝ նշելով մեր աղյուսակը հետևյալ կերպ.

Տվյալներ 1 Տվյալներ 2
Կալկաթա Նարնջագույն
ռոբոտներ Ջազ

Արդյունավետորեն մենք սահմանում ենք երկու «ոճային սյունակներ», որոնցից մեկը նշում է ոճային տեղեկատվություն յուրաքանչյուր սյունակի համար: Մենք չենք ձևավորում առաջին սյունակը, բայց դեռ պետք է ներառենք դատարկ տարր. եթե չանեինք, ոճավորումը պարզապես կկիրառվեր նաև առաջին սյունակում:

Եթե ​​մենք ցանկանում ենք կիրառել ոճավորման տեղեկատվությունը երկու սյունակում, մենք կարող ենք պարզապես ներառել մեկը տարր՝ իր վրա span հատկանիշով, այսպես.

Ինչպես colspan-ը և rowspan-ը, span-ը վերցնում է առանց միավորի թվային արժեք, որը նշում է սյունակների քանակը, որոնց վրա ցանկանում եք կիրառել ոճավորումը:

Ակտիվ ուսուցում՝ կոլխումբ և կոլ

Հիմա ժամանակն է ինքներդ գնալ:

Ստորև կարող եք տեսնել լեզվի ուսուցչի ժամանակացույցը. Ուրբաթ օրը նա ունի նոր դասարան ամբողջ օրը հոլանդերեն դասավանդող, բայց նա նաև գերմաներեն է դասավանդում երեքշաբթի և հինգշաբթի օրերին: Նա ցանկանում է ընդգծել իր դասավանդման օրերը պարունակող սյունակները:

Վերստեղծեք աղյուսակը՝ հետևելով ստորև նշված քայլերին:

  1. Նախ, պատրաստեք մեր timetable.html ֆայլի տեղական պատճենը ձեր տեղական մեքենայի նոր գրացուցակում: HTML-ը պարունակում է նույն աղյուսակը, որը տեսաք վերևում, առանց սյունակի ոճավորման տեղեկատվության:
  2. Ավելացնել ա տարրը սեղանի վերևում, հենց դրա տակ պիտակ, որում կարող եք ավելացնել ձեր տարրեր (տե՛ս ստորև ներկայացված մնացած քայլերը):
  3. Առաջին երկու սյունակները պետք է մնան առանց ոճի:
  4. Ավելացնել ա Ֆոնի գույնըդեպի երրորդ սյունակ: Ձեր ոճի հատկանիշի արժեքը ֆոնի գույնն է՝#97DB9A;
  5. Չորրորդ սյունակի վրա սահմանեք առանձին լայնություն: Ձեր ոճի հատկանիշի արժեքը լայնությունն է՝ 42px;
  6. Հինգերորդ սյունակում ավելացրեք ֆոնի գույն: Ձեր ոճի հատկանիշի արժեքը ֆոնի գույնն է՝ #97DB9A;
  7. Վեցերորդ սյունակում ավելացրեք մեկ այլ ֆոնի գույն, գումարած եզրագիծ՝ նշելով, որ սա հատուկ օր է, և նա դասավանդում է նոր դաս: Ձեր ոճի հատկանիշի արժեքներն են՝ ֆոնի գույնը՝#DCC48E; եզրագիծը՝ 4px ամուր: #C1437A;
  8. Վերջին երկու օրերը ազատ օրեր են, այնպես որ պարզապես դրանք սահմանեք առանց ֆոնի գույնի, այլ սահմանված լայնության; style հատկանիշի արժեքը լայնությունն է՝ 42px;
  9. Տեսեք, թե ինչպես եք անցնում օրինակին: Եթե ​​դուք խրված եք կամ ցանկանում եք ստուգել ձեր աշխատանքը, կարող եք գտնել մեր տարբերակը GitHub-ում որպես timetable-fixed.html (տե՛ս այն նաև ուղիղ եթերում):

    Ամփոփում

    Դա ընդամենը HTML աղյուսակների հիմունքների ամփոփումն է: Հաջորդ հոդվածում մենք կանդրադառնանք սեղանի մի փոքր ավելի առաջադեմ առանձնահատկություններին և կսկսենք մտածել, թե որքանով են դրանք հասանելի տեսողության խնդիրներ ունեցող մարդկանց համար:

    Աղյուսակը բջիջների ցանց է, որը կազմում է տողեր և սյունակներ: Աղյուսակների օրինակներ են տարբեր ֆինանսական հաշվետվությունները, սպորտային մրցումների արդյունքները, օրացույցները, ժամանակացույցերը և այլն: Մեկ ցանցի բլոկը կոչվում է աղյուսակի բջիջ: Աղյուսակի բջիջները կարող են պարունակել տեղեկատվության լայն տեսականի, ներառյալ թվեր, տեքստեր և նույնիսկ վիդեո և աուդիո առարկաներ: Լեզվի օգնությամբ HTML աղյուսակներգրվում են տող առ տող.

    Տարր

    ծառայում է որպես բեռնարկղ այն տարրերի համար, որոնք սահմանում են աղյուսակի բովանդակությունը: Աղյուսակային տող ստեղծելու համար անհրաժեշտ է ավելացնել տարրի ներսում
    զուգակցված բլոկի պիտակ (անգլերեն «tаЫе row» - աղյուսակի տող կրճատված): Քանի պիտակ դուք ավելացնում եք, աղյուսակում այնքան տողեր կլինեն, և կլինեն: Բացման պիտակ նշանակում է աղյուսակի նոր տողի սկիզբ: Տարրերը տեղադրվում են դրանից հետո: .

    Տարր

    ավելացրել է , այն դեռ հայտնվում է աղյուսակի վերջում։ Սա գալիս է նրանից, որ կարող է պարունակել բազմաթիվ տողեր: Բայց զննարկիչը պետք է ներկայացնի աղյուսակի ներքևի մասը՝ նախքան տվյալների բոլոր (պոտենցիալ մի քանի) տողերը ստանալը: Ահա թե ինչու կոդում գրված է տարրից առաջ .

    Առաջադրանքներ

    • Հեռացրեք սեղանի երկակի եզրագիծը

      Լռելյայնորեն, աղյուսակի եզրագիծն ունի կրկնակի եզրագծի ազդեցություն, փոխեք կոդը այնպես, որ այս եզրագծի բոլոր տողերը դառնան մեկ:

    Գլուխ 4

    Աղյուսակներ HTML-ում

    Աղյուսակները HTML-ում ամենահզոր և լայնորեն օգտագործվող գործիքներից են: Տվյալների աղյուսակային ներկայացման հայեցակարգը կարիք չունի լրացուցիչ բացատրություն. HTML-ում աղյուսակները ոչ միայն ավանդաբար օգտագործվում են որպես տվյալների ներկայացման մեթոդ, այլ նաև որպես վեբ էջերի ձևաչափման միջոց։ Բերենք իրական փաստաթղթերի օրինակներ, որոնցում ներկայացված է աղյուսակային պատկերը հարմար միջոցփաստաթուղթ կառուցելը. Նկ. Նկար 4.1-ը ցույց է տալիս աղյուսակների օգտագործման տիպիկ օրինակ՝ թվային տվյալները բաժանված տողերի և սյունակների ներկայացնելու համար: Նկ. 4.2 Աղյուսակի օգտագործումը ծառայում է միայն փաստաթղթի ձևաչափման, էջի տարրերի հարաբերական դիրքի սահմանման նպատակներին: Նման փաստաթուղթը դիտելիս անմիջապես պարզ չէ, որ այն կառուցելու համար օգտագործվում է աղյուսակ, քանի որ դրա բջիջների շուրջ շրջանակները գծված չեն:

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

    Եվ
    ցուցադրվում է մոնոբայնացված տառատեսակով, և բոլոր բացատները և ներդիրները նշանակալի են: Նման տեքստի հավասարեցումը կատարվել է ձեռքով, ինչը զգալիորեն դանդաղեցրել է փաստաթղթերի ստեղծումը։ Աղյուսակային տվյալների ներկայացման աջակցությունը դարձել է դե ֆակտո ստանդարտ, քանի որ այն ի սկզբանե ներդրվել է բոլոր հիմնական բրաուզերներում և միայն զգալի ժամանակ հետո ամրագրվել է HTML 3.2 ճշգրտման մեջ:

    Սեղաններ ստեղծելու հատուկ գործիքները, սակայն, չեն չեղարկում նախապես ձևաչափված տեքստի օգտագործման հնարավորությունը: Աղյուսակների օգտագործումը չի սահմանափակվում տողերից և սյունակներից բաղկացած տվյալներով: Օգտագործումներից մեկը էջի վրա տարբեր տվյալների դասավորությունը կազմակերպելն է, որը կարող է բաղկացած լինել պարզ տեքստից, պատկերներից, այլ աղյուսակներից և այլն: Այս գլուխը նվիրված է աղյուսակների ստեղծման կանոններին և դրանց օգտագործման օրինակներին:

    Բրինձ . 4.1. Տիպիկ HTML աղյուսակի օրինակ


    Բրինձ . 4.2. Անսահման աղյուսակի օրինակ

    Հիմնական HTML աղյուսակների ստեղծում

    Եկեք նախ դիտարկենք թեգերի նվազագույն փաթեթը և դրանց պարամետրերը, որոնք անհրաժեշտ և բավարար են պարզ աղյուսակներ ստեղծելու համար, ապա անցնենք դրանց մանրամասն նկարագրությանը:

    Աղյուսակների նկարագրությունը պետք է տեղադրվի փաստաթղթի հատվածում . Փաստաթուղթը կարող է պարունակել կամայական թվով աղյուսակներ, և աղյուսակները կարող են տեղադրվել միմյանց ներսում: Յուրաքանչյուր աղյուսակ պետք է սկսվի պիտակով

    (կրճատված է անգլերեն «tаЫе data»-ից՝ աղյուսակի տվյալներ), որոնցից յուրաքանչյուրն այս շարքում առանձին բջիջ է դնում։ Տարրի ներսում դուք դնում եք ձեր բովանդակությունը (տեքստ, թվեր, պատկերներ և այլն) ցուցադրված այդ բջիջում: Տողի վերջը նշվում է փակման պիտակով
    (կրճատված է անգլերեն «tаЫе heading» - աղյուսակի վերնագիր) - աղյուսակի կամընտիր տարր, որն օգտագործվում է նույն կերպ, ինչ տարրը , բայց դրա նպատակը տողի կամ սյունակի վերնագիր ստեղծելն է։ Որպես կանոն, տարրը տեղադրված է աղյուսակի առաջին շարքում: Բրաուզերները տեքստը ներկայացնում են տարրի մեջ ընդգծված, լայնատառև կենտրոնացնել այն բջիջի նկատմամբ: Դիմում տարրի կոդում օգնում է մարդկանց, ովքեր օգտագործում են էկրանի ընթերցիչներ, և բարելավում է որոնման համակարգերի կողմից ինդեքսավորման աղյուսակների աշխատանքը:

    Դիտարկենք մի պարզ աղյուսակ, որն ունի երեք տող և երեք սյունակ, որտեղ առաջին շարքի բջիջները համապատասխան սյունակների վերնագրերն են: Լռելյայնորեն աղյուսակները սովորաբար ցուցադրվում են առանց եզրագծերի.

    Օրինակ՝ պարզ HTML աղյուսակ

    • Ինքներդ փորձեք»

    Վերնագիր 1Վերնագիր 2Վերնագիր 3
    Բջջ 2x1Բջջ 2x2Բջջ 2x3
    Բջջ 3x1Բջջ 3x2Բջջ 3x3

    սեղանի եզրագիծը

    Մենք արդեն գիտենք, որ լռելյայնորեն աղյուսակները ցուցադրվում են առանց եզրագծի: Սեղանի շուրջ շրջանակ ավելացնելու համար հարկավոր է նշել մի քանիսը պարզ կանոններոճային թերթիկներ. Սեփականություն սահմանվերահսկում է սեղանի ցանցի գծերի ցուցադրումը, ինչպես նաև սահմանում է սեղանի շուրջ շրջանակի հաստությունը պիքսելներով: Սեղանի շուրջ և բջիջների միջև դրվում է եզրագիծ: Արդեն ստեղծված աղյուսակին ավելացնենք մեկ պիքսել հաստությամբ շրջանակ՝ սահմանելով հատկությունը սահմանաղյուսակի բոլոր տարրերի համար, օրինակ, այսպես.

    Օրինակ՝ գույքի կիրառում սահման

    • Ինքներդ փորձեք»




    Շրջանակ սեղանի շուրջ

    Վերնագիր 1Վերնագիր 2Վերնագիր 3
    Բջջ 2x1Բջջ 2x2Բջջ 2x3
    Բջջ 3x1Բջջ 3x2Բջջ 3x3



    Սեղանի համար մեկ շրջանակ

    Լռելյայնորեն, հարակից աղյուսակի բջիջները կունենան իրենց սահմանագիծը: Սա հանգեցնում է մի տեսակ «կրկնակի սահմանի», ինչպես երևում է վերը նշված օրինակում: ազատվելու համար» կրկնակի շրջանակ», ավելացրեք CSS հատկություն սահման-փլուզումձեր ոճաթերթին.

    Օրինակ՝ գույքի կիրառում սահման-փլուզում

    • Ինքներդ փորձեք»




    Շրջանակ սեղանի շուրջ

    Վերնագիր 1Վերնագիր 2Վերնագիր 3
    Բջջ 2x1Բջջ 2x2Բջջ 2x3
    Բջջ 3x1Բջջ 3x2Բջջ 3x3



    Սեղանի լուսանցքները և ընդմիջումները

    Լռելյայնորեն, աղյուսակի բջիջների չափը հարմարվում է դրանց բովանդակությանը, սակայն երբեմն անհրաժեշտ է լինում աղյուսակի տվյալների շուրջ որոշակի լրացումներ թողնել: Քանի որ տարածությունը և լուսանցքները կապված են տվյալների ներկայացման տարրերի հետ, այս տարածքը կազմաձևված է CSS ոճի թերթիկների միջոցով: Բջջային դաշտ ( լիցք) բջիջի բովանդակության և նրա սահմանի (սահմանի) միջև եղած հեռավորությունն է։ Այն ավելացնելու համար օգտագործեք գույքը լիցքտարր

    կամ . Բջիջների տարածություն ( սահմանային տարածություն) նրանց միջև հեռավորությունն է ( կամ ) Նախ նշանակեք արժեք առանձնացնելսեփականություն սահման-փլուզումտարր , և այնուհետև սահմանեք բջիջների միջև հեռավորությունը՝ փոխելով պարամետրի արժեքը սահմանային տարածություն. Նախկինում ատրիբուտները պատասխանատու էին բջիջների դաշտերի և միջակայքի համար բջջային լիցքև բջիջների տարածությունտարր
    , բայց դրանք հնացած էին HTML5 բնութագրում։

    Օգտագործման օրինակ լիցքև սահմանային տարածություն:

    Օրինակ՝ հատկությունների կիրառում լիցքև սահմանային տարածություն

    • Ինքներդ փորձեք»




    լիցքավորում և սահմանների տարածություն

    Բջջ 1Բջջ 2
    Բջջ 3Բջջ 4



    Սեղանի լայնությունը

    Բրաուզերի պատուհանում աղյուսակի զբաղեցրած լայնությունը կարելի է նշել՝ օգտագործելով հատկությունը լայնությունը CSS՝ պիքսելներով կամ տոկոսներով: Սեղանի լայնությունը պիքսելներով նշելը թույլ է տալիս որոշել դրա ճշգրիտ լայնությունը: Տոկոսային հարաբերակցությունը թույլ է տալիս աղյուսակը ճկուն դարձնել, այսինքն. այն «կձգվի» կամ «կծկվի»՝ կախված նրանից, թե ինչ այլ տարրեր կան էջում և ինչ չափի է բրաուզերի պատուհանը։
    Ահա գույքի օգտագործման օրինակ լայնությունը:

    Աղյուսակ (լայնությունը՝ 100%;)

    Օրինակ՝ գույքի կիրառում լայնությունը

    • Ինքներդ փորձեք»
    Բջջ 1Բջջ 2
    Բջջ 3Բջջ 4




    լայնությունը՝ 100%

    Բջջ 1Բջջ 2
    Բջջ 3Բջջ 4



    Բջիջների միաձուլում (colspan և rowspan)

    Սեղանի կառուցվածքի հիմնական հատկանիշներից մեկը բջիջների միաձուլումն է, որը ներառում է բջիջի ձգումը մի քանի տողերի կամ սյուների վրա: Սա թույլ է տալիս ստեղծել բարդ աղյուսակի կառուցվածքներ՝ վերնագրեր

    կամ բջիջներ համակցված՝ ավելացնելով ատրիբուտներ colspanկամ շարքի բացվածք. Հատկանիշ colspanորոշում է այն բջիջների քանակը, որոնք այն անցնում է տրված բջիջհորիզոնական և շարքի բացվածք- ուղղահայաց:

    Սյունակների միաձուլում

    Սյունակների միաձուլումը կատարվում է հատկանիշի միջոցով colspanտարրերի մեջ

    կամ - բջիջը ձգվում է դեպի աջ՝ ծածկելով հաջորդ սյունակները։ Հետևյալ օրինակում հատկանիշի արժեքը colspan 2 է, ինչը նշանակում է, որ բջիջը պետք է ընդարձակվի երկու սյունակի վրա:

    Օրինակ՝ հատկանիշի կիրառում colspan

    • Ինքներդ փորձեք»




    colspan հատկանիշ

    colspan="2">Երկսյունակ բջիջ
    Բջջ 1Բջջ 2
    Բջջ 3Բջջ 4



    Լարերի միացում

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

    Օրինակ՝ հատկանիշի կիրառում շարքի բացվածք

    • Ինքներդ փորձեք»
    բջիջ երկու տողի վրա Բջջ 1Բջջ 2
    Բջջ 3Բջջ 4




    rowspan հատկանիշ

    շարքի բացվածք="2">Բջջ երկու տողում Բջջ 1Բջջ 2
    Բջջ 3Բջջ 4



    Աղյուսակի վերնագիր

    Աղյուսակի համար վերնագիր կամ վերնագիր ստեղծելու համար օգտագործվում է զույգ թեգ

    (անգլերեն մակագրությունից - ստորագրություն): Տարր նախատեսված է աղյուսակի վերնագիրը կազմակերպելու համար: Տեղադրված է պիտակից անմիջապես հետո , բայց տողի կամ բջիջի նկարագրությունից դուրս:

    Օրինակ՝ պիտակի կիրառում

    , և . Ինչպես վեբ էջը կարող է պարունակել վերնագիր, հիմնական և ստորագիր, այնպես էլ աղյուսակը կարող է պարունակել գլուխ, հիմնական և ստորագիր: Աղյուսակի վերևի տողերը տրամաբանորեն խմբավորելու համար (այսինքն՝ վերևի աղյուսակի վերնագիր ստեղծելու համար), օգտագործեք պիտակը. . Աղյուսակի վերնագրերը պետք է տեղադրվեն տարրի մեջ , օրինակ:

    Աղյուսակի հիմնական բովանդակությունը (մարմինը) պետք է լինի տարրի ներսում

    (աղյուսակում կարող են լինել մի քանի նման բլոկներ): Աղյուսակի ներքևի մասում տողերը տրամաբանորեն խմբավորելու համար (այսինքն՝ աղյուսակի «ստորատակը» ստեղծելու համար) օգտագործեք պիտակը. (մեկ աղյուսակում թույլատրվում է ոչ ավելի, քան մեկ պիտակ ) Նշեք սկզբնաղբյուրում դրել պիտակի առաջ . Բացի տրամաբանական խմբավորումից, տարրերի օգտագործման պատճառներից մեկը և այն է, որ եթե ձեր աղյուսակը չափազանց երկար է էկրանին միանգամից ցուցադրվելու (կամ տպագրվելու համար), ապա դիտարկիչը կցուցադրի նաև վերնագիրը ( ) և վերջին տողը ( ) երբ օգտատերը սկսում է պտտվել ձեր աղյուսակով:

    Օրինակ՝ պիտակներ

    , և
    • Ինքներդ փորձեք»




    thead, tbody և tfoot պիտակներ

    • Ինքներդ փորձեք»




    վերնագրի տարր

    Սա աղյուսակի վերնագիրն է
    բջիջ երկու տողի վրա Բջջ 1Բջջ 2
    Բջջ 3Բջջ 4



    Աղյուսակի տարրերի խմբավորման պիտակներ

    Պիտակներն օգտագործվում են աղյուսակի տարրերը խմբավորելու համար:

    Վերնագիր 1Վերնագիր 2< /th>
    Սա աղյուսակի վերնագիրն է։
    Սա աղյուսակի ստորագիրն է
    Բջջ 1Բջջ 2Բջջ 3Բջջ 4



    Թեև մենք առջևում ենք

    և վերջացրեք պիտակով
    . Այս զույգ պիտակների ներսում կա աղյուսակի բովանդակության նկարագրություն: Ցանկացած աղյուսակ բաղկացած է մեկ կամ մի քանի տողերից, որոնցից յուրաքանչյուրը պարունակում է տվյալներ առանձին բջիջների համար:

    Յուրաքանչյուր տող սկսվում է պիտակով (Աղյուսակի տող) և ավարտվում է պիտակով. Անընդմեջ մեկ բջիջը շրջանակված է զույգ պիտակներով և(Աղյուսակի տվյալները) կամ և(աղյուսակի վերնագիր): Նշել սովորաբար օգտագործվում է աղյուսակի վերնագրի բջիջների համար և - տվյալների բջիջների համար: Օգտագործման տարբերությունը միայն տառատեսակի տեսակն է, որն օգտագործվում է լռելյայնորեն բջիջների բովանդակությունը ցուցադրելու համար, ինչպես նաև բջջի ներսում տվյալների գտնվելու վայրը: Բջջի բովանդակության տեսակը ցուցադրվում է Bold և կենտրոնացված (ALIGN=CENTER, VALIGN=MIDDLE): Տեգով սահմանված բջիջներ լռելյայնորեն ցուցադրեք տվյալները՝ հավասարեցված դեպի ձախ (ALIGN=LEFT) և մեջտեղում (VALIGN=MIDDLE) ուղղահայաց ուղղությամբ:

    Պիտակներ և չի կարող հայտնվել աղյուսակի տողի նկարագրությունից դուրս . Դադարեցման կոդեր, ևկարող է բաց թողնել: Այս դեպքում տողի կամ բջիջի նկարագրության վերջը հաջորդ տողի կամ բջիջի սկիզբն է կամ աղյուսակի վերջը: Սեղանի վերջի պիտակչի կարելի բաց թողնել:

    Աղյուսակում տողերի քանակը որոշվում է բացվող պիտակների քանակով , իսկ սյունակների քանակը՝ առավելագույն թիվը կամ բոլոր տողերի մեջ. Որոշ բջիջներ կարող են չպարունակել որևէ տվյալ, այդպիսի բջիջները նկարագրվում են անընդմեջ հաջորդող զույգ պիտակներով. , . Եթե ​​որևէ տողի վերջում գտնվող մեկ կամ մի քանի բջիջներ չեն պարունակում տվյալներ, ապա դրանց նկարագրությունը կարող է բաց թողնել, և զննարկիչը ավտոմատ կերպով կավելացնի դատարկ բջիջների անհրաժեշտ քանակը: Դրանից բխում է, որ չի թույլատրվում կառուցել աղյուսակներ, որոնցում տարբեր տողեր պարունակում են նույն չափի տարբեր թվով սյունակներ:

    Աղյուսակը կարող է ունենալ վերնագիր, որը կցված է զույգ պիտակների մեջ և. Աղյուսակի վերնագրի նկարագրությունը պետք է տեղադրվի պիտակների ներսում

    և
    ցանկացած վայրում, բայց պիտակներից որևէ մեկի նկարագրության տարածքից դուրս , կամ . Ըստ HTML լեզվի ճշգրտման, վերնագրի նկարագրության գտնվելու վայրը ավելի խիստ է կարգավորվում. այն պետք է տեղակայվի պիտակից անմիջապես հետո: և առաջինից առաջ . Խորհուրդ ենք տալիս հետևել այս կանոնին.

    Լռելյայնորեն, աղյուսակի վերնագրի տեքստը տեղադրվում է դրա վերևում (ALIGN=TOP) և կենտրոնացված է հորիզոնական ուղղությամբ:

    Թվարկված պիտակները կարող են ունենալ պարամետրեր, որոնց թիվը և արժեքները տարբեր են: Սակայն ամենապարզ դեպքում պիտակներն օգտագործվում են առանց պարամետրերի, որոնք ընդունում են լռելյայն արժեքներ։

    Այս տեղեկատվությունը բավական է տարրական աղյուսակներ կառուցելու համար: Եկեք երկու տողից և երկու սյունակից բաղկացած պարզ աղյուսակի օրինակ բերենք, որի ցուցադրումը ներկայացված է Նկ. 4.3.

    Պարզ աղյուսակի օրինակ

    1-ին շարքի 1-ին բջիջ Բջիջ 2 շարք 1
    2-րդ շարքի 1-ին բջիջ Բջիջ 2 շարք 2


    Բրինձ. 4.Զ.Պարզ աղյուսակի օրինակ

    Էջի վրա աղյուսակների ներկայացում

    Դիտարկենք տարբեր պարամետրերի նշանակումը, որոնք կարող են օգտագործվել աղյուսակները նկարագրող պիտակներում:

    Աղյուսակի վերնագիր

    Աղյուսակի վերնագրի պիտակ ունի մեկ վավեր պարամետր՝ ALIGN, որը վերցնում է TOP (վերնագիր աղյուսակի վերևում) կամ BOTTOM (վերնագիր աղյուսակի տակ) արժեքները: ALIGN պարամետրը կարող է բաց թողնել, որը համապատասխանում է ALIGN=TOP արժեքին: Հորիզոնական ուղղությամբ սեղանի վերնագիրը միշտ կենտրոնացած է: Աղյուսակը կարող է վերնագիր չունենալ: Շատ դեպքերում պարզ տեքստը օգտագործվում է որպես աղյուսակի վերնագիր, որը կարգավորվում է HTML հատկորոշմամբ, բայց իրականում՝ պիտակների միջև։ ևթույլատրվում է գրել բաժնում օգտագործվող ցանկացած HTML տարր . Ահա աղյուսակի վերնագրի մուտքի օրինակ.

    Առաջնորդվելով աղյուսակի ստորին մասում

    Եթե ​​վերնագրի այս նկարագրությունը ավելացվի վերը նշված օրինակին, ապա աղյուսակը կցուցադրվի այնպես, ինչպես ցույց է տրված նկ. 4.4.


    Բրինձ. 4.4.Աղյուսակ վերնագրով

    Microsoft բրաուզեր ինտերնետ հետազոտողապահովում է լրացուցիչ հնարավորություններվերնագրի գտնվելու վայրը ընտրելու համար: ALIGN պարամետրը ընդունում է LEFT, CENTER և RIGHT հորիզոնական հավասարեցման համար վերը նկարագրված արժեքների հետ միասին: Նշենք, որ սա այն հազվադեպ դեպքերից է, երբ լայնորեն օգտագործվող ALIGN պարամետրը կարող է օգտագործվել ինչպես հորիզոնական, այնպես էլ ուղղահայաց հավասարեցման համար: Օրինակ, ALIGN=RIGHT մուտքագրումը կտրամադրի վերնագիր, որը գտնվում է աջ կողմում և տեղադրված է աղյուսակի վերևում: Եթե ​​գրում եք ALIGN=BOTTOM, ապա ճիշտ ինչպես վերը նշված օրինակում, վերնագիրը կտեղակայվի աղյուսակի տակ: Այնուամենայնիվ, կրկնակի օգտագործումը նույն ALIGN պարամետրի վերնագրում չի թույլատրվում: Հետևաբար, լրացուցիչ ներմուծվում է ուղղահայաց հավասարեցման հատուկ պարամետր՝ VALIGN, որն ընդունում է TOP կամ BOTTOM արժեքները: Օրինակ, ձախից դասավորված աղյուսակի ներքևում տեղադրված վերնագրի համար նկարագրությունը հետևյալն է.

    Ներքևից հավասարեցված վերնագիր ձախ հավասարեցված

    Microsoft Internet Explorer-ում այս վերնագրի նկարագրությամբ աղյուսակը կցուցադրվի հետևյալ կերպ (նկ. 4.5): Եթե ​​այս օրինակը դիտվում է Netscape-ում, ապա վերնագիրը կտեղադրվի լռելյայնորեն, այսինքն՝ աղյուսակի վերևում և մեջտեղում՝ հորիզոնական ուղղությամբ:


    Բրինձ. 4.5.Աղյուսակի վերնագրի հորիզոնական հավասարեցում Microsoft բրաուզերինտերնետ հետազոտող

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

    Նշման ընտրանքներ

    Հիմնական թեգը, որն օգտագործվում է աղյուսակներ ստեղծելու ժամանակ, պիտակն է

    . Այն կարող է օգտագործվել մի շարք տարբերակներով, որոնցից բոլորը կարելի է բաց թողնել: Թույլատրված պարամետրերի հավաքածուն կախված է զննարկիչից: Համաձայն պիտակի HTML բնութագրի
    կարող են օգտագործվել հետևյալ պարամետրերը՝ BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN: NetScape և Microsoft Internet Explorer բրաուզերները թույլ են տալիս օգտագործել HEIGHT և BGCOLOR պարամետրերը վերը նշված հինգ պարամետրերից բացի: Որոշ բրաուզերներ թույլ են տալիս սահմանել նաև այլ տարբերակներ: Դիտարկենք սովորաբար օգտագործվող պիտակների պարամետրերի նշանակումը
    .

    Պարամետր BORDER

    BORDER պարամետրը վերահսկում է յուրաքանչյուր բջիջի շուրջ սահմանների ցուցադրումը, որոնք ըստ էության տալիս են աղյուսակի ցանցի գծերը և ամբողջ աղյուսակի շուրջը: Լռելյայնորեն շրջանակները չեն գծվում, և էկրանին օգտատերը կտեսնի միայն ճշգրիտ տեղակայված աղյուսակի բջիջների տեքստը: Կան բազմաթիվ իրավիճակներ, երբ առանց եզրագծերի աղյուսակների օգտագործումը արդարացված է, օրինակ, բազմասյունակ ցուցակների համար, որոնք իրականացվում են աղյուսակների միջոցով, կամ նշում են թվերի և տեքստի ճշգրիտ հարաբերական դիրքը: Այնուամենայնիվ, շատ դեպքերում, աղյուսակների ավանդական օգտագործման համար, օգտակար է դրանց բջիջները միմյանցից առանձնացնել ցանցային գծերով, ինչը հեշտացնում է աղյուսակում պարունակվող տեղեկատվությունը ընկալելը և հասկանալը:

    Աղյուսակին շրջանակներ ավելացնելու համար դուք պետք է ներառեք կոդը

    BORDER պարամետրը, որը կարող է լինել թվային արժեք:

    Օրինակ,

    կամ
    .

    Պարամետրի թվային արժեքը որոշում է շրջանակի հաստությունը պիքսելներով, որոնք գծված են ամբողջ սեղանի շուրջ, սակայն այս արժեքը չի ազդում յուրաքանչյուր բջիջի շուրջ գտնվող շրջանակների հաստության վրա: Թվային արժեքի բացակայության դեպքում այն ​​սովորաբար ընդունվում է հավասար նվազագույն արժեքը(1), թեև շրջանակների ցուցադրման ոճը կարող է տարբեր լինել տարբեր բրաուզերների համար: Հնարավորություն չկա ինքնուրույն վերահսկելու շրջանակի ցուցադրումը ամբողջ սեղանի շուրջ և շրջանակները՝ բջիջների շուրջ:

    10 պիքսել հաստությամբ եզրագծով աղյուսակի օրինակ ներկայացված է նկ. 4.6.


    Բրինձ. 4.6.Աղյուսակ 10 px հաստությամբ եզրագծով

    HTML 3.0 ճշգրտումը չի ներառում BORDER պարամետրի արժեք: Սա արվում է միայն HTML 3.2-ում: Այսպիսով, մասնավորապես, վաղ Microsoft-ի տարբերակները Internet Explorer-ը թույլ չի տվել թվային արժեք սահմանել:

    Նկատի ունեցեք, որ եթե չկա BORDER պարամետր, ապա սահմաններ չեն գծվում, բայց նրանց համար տարածք է մնում (սա վերաբերում է միայն Netscape-ին): Սեղանի ընդհանուր չափը BORDER պարամետրի բացակայության կամ դրա առկայության դեպքում չի փոխվում (բացառություն է BORDER=0 սահմանելու դեպքը): Այսպիսով, երկու հարակից բջիջների միջև նվազագույն հեռավորությունը այս դեպքերում հավասար կլինի շրջանակի հաստության երկու անգամ, այսինքն, երկու պիքսել: Հնարավոր է բջիջները հնարավորինս մոտ դասավորել միմյանց՝ սահմանելով BORDER=0, ինչը նշանակում է, որ սահմաններ չկան: Որոշ բրաուզերներ կարող են չաջակցել BORDER պարամետրի համար թվային արժեք սահմանելը, որի դեպքում զրոյական արժեքը անտեսվելու է, և աղյուսակը գծվելու է եզրագծերով:

    Ահա մի քանի օրինակներ.

    Այս երեք օրինակներն էլ տարբեր կերպ կարտացոլվեն Netscape բրաուզերի կողմից: Նկատի ունեցեք, որ սա բավականին եզակի դեպք է, երբ դուք չեք կարող խոսել լռելյայն արժեքի մասին: Երրորդ օրինակը, որտեղ BORDER պարամետրը բաց է թողնված, տարբերվում է ցանկացած օրինակից, որտեղ առկա է այս պարամետրը: Microsoft Internet Explorer-ի համար երկրորդ և երրորդ օրինակները նույնական են, ուստի BORDER պարամետրի լռելյայն արժեքը զրո է այս բրաուզերի համար:

    CELLSPACING պարամետր

    Պարամետրի նշման ձևը. CELLSPACING=num, որտեղ num-ը պարամետրի թվային արժեքն է պիքսելներով, որը չի կարելի բաց թողնել: Num արժեքը որոշում է հարակից բջիջների (ավելի ճիշտ՝ բջիջների շրջանակների միջև) հեռավորությունը ինչպես հորիզոնական, այնպես էլ ուղղահայաց: Լռելյայն արժեքը երկուսն է: Նկատի ունեցեք, որ ավանդաբար հրատարակչական համակարգերում աղյուսակի հարակից բջիջներն ունեն ընդհանուր եզրագիծ: HTML աղյուսակներում, լռելյայնորեն, նրանց միջև բաց է թողնված, ինչպես պարզ երևում է վերևի նկարում (Նկար 4.6): CELLSPACING=0 սահմանելիս հարակից բջիջների շրջանակները կմիավորվեն և կստեղծեն աղյուսակի մեկ ցանցի տպավորություն (նկ. 4.7):


    Բրինձ. 4.7.Աղյուսակ CELLSPACING=0 արժեքով

    CELLPADDING պարամետր

    Պարամետրի ձևը նման է CELLSPACING-ին: Num արժեքը որոշում է բջիջի սահմանի և բջիջի ներսում գտնվող տվյալների միջև ազատ տարածության (լցման) քանակը: Լռելյայնորեն արժեքը վերցվում է մեկին հավասար: CELLPADDING պարամետրը զրոյի դնելը կարող է հանգեցնել բջիջի տեքստի որոշ մասերի դիպչել դրա եզրագծին, ինչը էսթետիկորեն այնքան էլ հաճելի չէ:

    Նկ. 4.8-ը ցույց է տալիս CELLPADDING=10 արժեք ունեցող աղյուսակի օրինակ:


    Բրինձ. 4.8.Աղյուսակ CELLPADDING=10 արժեքով

    CELLPADDING և CELLSPACING պարամետրերի ազդեցությունը շատ նման է միմյանց: Անսահման աղյուսակի համար մեկ կամ մյուս պարամետրի փոփոխությունը հանգեցնում է նույն արդյունքի: Երկու տարբերակներն էլ ազդում են համապատասխան օֆսեթների վրա ինչպես հորիզոնական, այնպես էլ ուղղահայաց: Ցավոք, հորիզոնական և ուղղահայաց լուսանցքների առանձին կառավարում, ինչպես դա արվում է, օրինակ, պատկերներից լուսանցքների համար (պիտակի HSPACE և VSPACE պարամետրերը ), չի տրամադրվել.

    Բոլոր երեք պարամետրերը՝ BORDER, CELLPADDING և CELLSPACING գործում են միմյանցից անկախ, եթե դրանցից որևէ մեկը բաց թողնվի, ապա վերցվում է դրա լռելյայն արժեքը։ Մասնավորապես, եթե վերը նշված բոլոր պարամետրերը բաց թողնվեն, ապա հարակից բջիջներից տվյալների միջև նվազագույն հեռավորությունը կլինի 6 պիքսել (Netscape-ի համար): Այս արժեքը CELLSPACING-ի համար երկու պիքսել է, CELLPADDING-ի համար մեկ պիքսել և յուրաքանչյուր բջիջի սահմանի մեկ պիքսել: Առավել կոմպակտ աղյուսակը կստացվի՝ նշելով հետևյալ նկարագրությունը.

    Միայն այս մարմնավորման դեպքում բջիջները կտեղակայվեն միմյանց մոտ: Օգտագործման օրինակ կարող է լինել աղյուսակը, որտեղ բոլոր բջիջները պարունակում են նույն չափի նկարներ, որոնք պետք է տեղադրվեն միմյանց կողքին:

    WIDTH և HEIGHT պարամետրեր

    Երբ աղյուսակները ցուցադրվում են, դրանց լայնությունը և բարձրությունը ավտոմատ կերպով հաշվարկվում են զննարկիչի կողմից և կախված են բազմաթիվ գործոններից. բջիջները, ինչպես նաև տվյալ բրաուզերում փաստաթուղթը դիտելիս նշված պարամետրերը, օրինակ՝ տառատեսակի տեսակը և չափը, տեսադաշտի չափը և այլն: Ցուցադրելիս աղյուսակները հաշվարկվում են ավտոմատ կերպով՝ հաշվի առնելով այս գործոնները, մինչդեռ փորձ է արվում ներկայացնել. աղյուսակը ամենահարմար ձևով - սեղանը դասավորեք այնպես, որ այն տեղավորվի տեսադաշտում: Մեծ փաստաթղթերի դիտման ընդհանուր սխեման, որպես կանոն, հանգում է փաստաթղթի բովանդակության ուղղահայաց ոլորմանը և տարբեր աղյուսակներով, պատկերներով և այլնի միջով ներքաշված տեքստի ընթերցմանը: Սա վերաբերում է ինչպես HTML փաստաթղթերին, այնպես էլ ցանկացած տեքստում ստեղծված սովորական փաստաթղթերին: խմբագիրներ. Տեքստային խմբագրիչների մեծ մասը (օրինակ՝ Microsoft Word-ը) և HTML բրաուզերներն ավտոմատ ձևավորում են տեքստը, որպեսզի (հնարավորության դեպքում) տողերի երկարությունը չգերազանցի տեսադաշտի լայնությունը։ Սա խուսափում է փաստաթուղթը հորիզոնական ոլորելու անհրաժեշտությունից: Նմանատիպ գործողություններփորձված աղյուսակներով բրաուզերների կողմից. հնարավորության դեպքում ձևաչափեք դրանք այնպես, որ աղյուսակի լայնությունը չգերազանցի դիտակետի լայնությունը: Կարելի է եզրակացնել, որ աղյուսակների լայնությունն ավելի կարևոր, առաջնային պարամետր է, որի հաշվարկը կատարվում է առաջին հերթին բարձրության համեմատ։

    Շատ դեպքերում, սեղանի դինամիկ չափումը կհանգեցնի էսթետիկ չափի պատկերի, որն արդյունավետ օգտագործում է իրական տեսադաշտի տարածքը: Այնուամենայնիվ, կարող է անհրաժեշտ լինել ստիպել սեղանի լայնությունը կամ բարձրությունը: Այդ նպատակով օգտագործվում են պիտակի WIDTH (աղյուսակի լայնությունը) և HEIGHT (աղյուսակի բարձրությունը) պարամետրերը։

    . Ձայնագրման ձև. WIDTH=num կամ WIDTH=num%, որտեղ num-ը ամբողջ աղյուսակի լայնության թվային արժեքն է պիքսելներով կամ որպես ամբողջ պատուհանի չափի տոկոս: Նկատի ունեցեք, որ ընդունելի է 100%-ից ավելի արժեքներ սահմանել, թեև դժվար է պատկերացնել դեպք, երբ դա անհրաժեշտ է: Օրինակ:

    .

    Նմանատիպ պարամետրեր կարող են սահմանվել առանձին բջիջների համար: Նկատի ունեցեք, որ պարամետրի որոշակի արժեք սահմանելը, օրինակ WIDTH=200, չի նշանակում, որ աղյուսակը ցանկացած դեպքում կունենա նշված լայնությունը, այլ միայն որոշում է առաջարկվող լայնությունը, որը կպահվի հնարավորինս: Սա բացատրենք օրինակներով։ Թող լինի աղյուսակ, որը տրված պայմաններով, ըստ նախնականի, կունենար նշվածից փոքր լայնություն։ Այս դեպքում զննարկիչը կավելացնի աղյուսակի լայնությունը մինչև պահանջվող լայնությունը՝ համամասնորեն ընդլայնելով աղյուսակի բոլոր սյունակները: Տեսադաշտի նեղացումը չի փոխի աղյուսակի լայնությունը և այն դիտելու համար կարող է պահանջվել հորիզոնական ոլորում: Եթե ​​աղյուսակը լռելյայն ունի նշվածից մեծ լայնություն, ապա զննարկիչը կփորձի նվազեցնել դրա լայնությունը՝ նախ նվազեցնելով առանձին սյունակների լայնությունը, որոնց համար նշված լայնությունը ավելի մեծ է, քան անհրաժեշտ է, և երկրորդ՝ բաժանելով տեքստը։ առանձին բջիջներում մի քանի տողերի մեջ՝ սեղանի բարձրությունը մեծացնելով: Այս գործողությունները կարող են չապահովել աղյուսակի պահանջվող չափը, այնուհետև այն կունենա նվազագույն հնարավոր լայնությունը: Նույն գործողությունները կատարվում են աղյուսակների համար, որոնք չունեն տեսադաշտը նեղացնելու ժամանակ նշված չափսերը:

    Տարբեր բրաուզերների համար աղյուսակներ տեղադրելու հատուկ ալգորիթմները կարող են մի փոքր տարբերվել:

    Պարամետր ALIGN

    Տրված պիտակի պարամետր

    սահմանում է աղյուսակի հորիզոնական դիրքը տեսադաշտում: Վավեր արժեքներն են LEFT (ձախ հավասարեցում) և RIGHT (աջ հավասարեցում): Լռելյայնորեն, աղյուսակները հավասարեցված են ձախ կողմում: Նկատի ունեցեք, որ վավեր արժեքների մեջ չկա հավասարեցման պարամետրի համար բնորոշ արժեք՝ CENTER: HTML լեզվի որոշ աղբյուրներում CENTER արժեքը (կենտրոնում) տրվում է որպես վավեր այս դեպքում: Սա հետևում է HTML ճշգրտմանը, բայց գործնականում և՛ Netscape Navigator-ը, և՛ Microsoft Internet Explorer-ն իրականացնում են ընդամենը երկու արժեք: Փաստն այն է, որ թեգում ALIGN պարամետրի առկայությունը
    ոչ միայն որոշում է սեղանի գտնվելու վայրը, այլև թույլ է տալիս տեքստին հակառակ կողմից փաթաթել սեղանի շուրջը, ինչպես նկարները փաթաթելուն: Սեղանի երկու կողմից տեքստով փաթաթելը ոչ մի դեպքում նախատեսված չէ։ Փաթաթման ավելի նուրբ վերահսկողության համար օգտագործեք պիտակը
    CLEAR պարամետրով նույն կերպ, ինչպես համար . Եթե ​​ALIGN պարամետրը բաց թողնված է, ապա սեղանի աջ և/կամ ձախ տարածությունը միշտ դատարկ կլինի՝ անկախ դրա լայնությունից: Եթե ​​աղյուսակը չի պահանջում տեքստի փաթաթում, ապա դուք կարող եք հասնել դրա գտնվելու վայրը տեսադաշտի կենտրոնում: Դա անելու համար, օրինակ, կարող եք աղյուսակի ամբողջ նկարագրությունը տեղադրել զույգ պիտակների ներսում
    և
    .

    Բերենք փաթաթվող տեքստով աղյուսակի օրինակ, որի ցուցադրումը ներկայացված է նկ. 4.9.

    Աղյուսակ փաթաթված տեքստով


    չափահաս

    Սանկտ Պետերբուրգի բնակչությունը

  10. Աբրամ
  11. Ալեքսանդր
  12. Ալեքսեյ
  13. Ալբերտ
  14. Անատոլի
  15. Էնդրյու

  16. Արկադի
  17. Բորիս
  18. Վադիմ
  19. Վալենտին
  20. Վալերի
  21. Ռեհան

  22. Վիկտոր
  23. Վիտալի
  24. Վլադիմիր
  25. Վլադիսլավ
  26. Վյաչեսլավ

  27. Գենադի
  28. Ջորջ
  29. Հերման
  30. Գրիգոր
  31. Դմիտրի

  32. Եվգենի
  33. Եֆիմ
  34. Իվան
  35. Իգոր
  36. Իլյա
  37. Ջոզեֆ
  38. Կոնստանտին

  39. առյուծ
  40. Լեոնիդ
  41. Միքայել
  42. Նիկոլաս
  43. Օլեգ
  44. Փոլ
  45. Պետրոս

  46. Վեպ
  47. Սեմյոն
  48. Սերգեյ
  49. Ստանիսլավ
  50. Էդվարդ
  51. Յուրի
  52. Յակոբ








  53. Այս 43 ամենահաճախ հանդիպող անուններն ընդգրկում են ընտրանքի 92%-ը:

    Բրինձ. 4.9.Անսահման սեղան՝ փաթաթվող տեքստով

    Այս փաստաթուղթը բաղկացած է առանց եզրագծերի աղյուսակից, որի հավասարեցումը դրված է ALIGN=LEFT, որը թույլ է տալիս աղյուսակին հաջորդող տեքստը տեղավորել դրա աջ կողմում: Աղյուսակը բաղկացած է միայն մեկ տողից, որը պարունակում է երկու բջիջ: Յուրաքանչյուր բջիջ պարունակում է չդասավորված ցուցակի մի մասը

      . Ցուցակը ցուցադրելու համար աղյուսակ օգտագործելը ցուցակը մի քանի սյունակներ ստիպելու ձևերից մեկն է, ինչը նաև ցույց է տալիս այս օրինակը: Սեղանի աջ կողմում գտնվող տեքստը կարող է չհամապատասխանել այնտեղ բոլորին, բայց այն կշարունակվի աղյուսակից հետո: Փորձեք նվազեցնել դիտարկիչի դիտակետի լայնությունը այս օրինակում, և ինչ-որ պահի ամբողջ տեքստը կլինի աղյուսակի ներքևում: Հիշեք, որ սեղանի շուրջ տեքստի հոսքը ընդհատելու համար (օրինակ, եթե հաջորդ տեքստը տրամաբանորեն կապված չէ աղյուսակի հետ և պետք է գտնվի դրա տակ), դուք պետք է օգտագործեք կոդը.
      CLEAR պարամետրերի հավաքածուով: Այս օրինակի համար պետք է գրել
      կամ
      . Որոշ բրաուզերներ թույլ են տալիս CLEAR պարամետրը գրել առանց արժեքի, սակայն դա խորհուրդ չի տրվում: Նույն առաջադրանքը կատարելու համար՝ նշելով մի քանի նոր տողեր
      առանց CLEAR պարամետրի (ինչպես դա արվեց տեքստից առաջ օրինակում՝ այն մի քանի տող ներքև տեղափոխելու համար) կամ մի քանի կոդ՝ նոր պարբերության սկզբի համար։

      Սխալ որոշում.

      Եկեք մի փոքր այլ օրինակ բերենք նմանատիպ էջ ստեղծելու համար, որի ցուցադրումը ներկայացված է Նկ. 4.10.

      Աղյուսակ առանց տեքստի փաթաթելու

      Ամենատարածված արական անունները

      Սանկտ Պետերբուրգի չափահաս բնակչությունը

    • Աբրամ
    • Ալեքսանդր
    • Ալեքսեյ
    • Ալբերտ
    • Անատոլի
    • Էնդրյու

    • Արկադի
    • Բորիս
    • Վադիմ
    • Վալենտին
    • Վալերի
    • Ռեհան

    • Վիկտոր
    • Վիտալի
    • Վլադիմիր
    • Վլադիսլավ
    • Վյաչեսլավ

    • Գենադի
    • Ջորջ
    • Հերման
    • Գրիգոր
    • Դմիտրի

    • Եվգենի
    • Եֆիմ
    • Իվան
    • Իգոր
    • Իլյա
    • Ջոզեֆ
    • Կոնստանտին

    • առյուծ
    • Լեոնիդ
    • Միքայել
    • Նիկոլաս
    • Օլեգ
    • Փոլ
    • Պետրոս

    • Վեպ
    • Սեմյոն
    • Սերգեյ
    • Ստանիսլավ
    • Էդվարդ
    • Յուրի
    • Յակոբ

    • Տվյալ տվյալները ստացվել են Սանկտ Պետերբուրգում բնակվող 18 տարեկանից բարձր 5000 տղամարդկանց մասին տեղեկություններ պարունակող ներկայացուցչական նմուշի վերլուծության հիման վրա։
      Այս 43 ամենատարածված անուններն ընդգրկում են ընտրանքի 92%-ը:
      Մյուս անուններից յուրաքանչյուրի առաջացման հաճախականությունը չի գերազանցում 0,3%-ը.

      Բրինձ. 4.10.Անսահման աղյուսակ, որը պարունակում է երեք սյունակ

      Ի տարբերություն նախորդ օրինակի, սեղանի շուրջ տեքստ չկա: Ամբողջ փաստաթուղթը բաղկացած է մեկ աղյուսակից՝ վերնագրով, որը պարունակում է երեք բջիջ մեկ տողում: Առաջին երկու բջիջները ամբողջությամբ կրկնում են նախորդ օրինակը: Երրորդ բջիջը պարունակում է տեքստ, որը մեկնաբանում է առաջին երկու բջիջների բովանդակությունը: Այստեղ հարկադիր տեքստային ընդմիջում սահմանելու կարիք չկա, ինչպես նկարագրված է նախորդ դեպքում: Աղյուսակին առնչվող ամբողջ տեքստը պետք է տեղադրվի երրորդ բջիջի ներսում, իսկ հաջորդ տեքստը՝ ամբողջ աղյուսակի նկարագրության ավարտից հետո։. Երկու օրինակներն էլ միանման տեսք ունեն ամբողջ էկրանով դիտելիս, բացառությամբ վերնագրի, որը առաջին դեպքում գտնվում է երկսյունանի ցանկի մեջտեղում, իսկ երկրորդ դեպքում՝ աղյուսակի բոլոր երեք սյունակների մեջտեղում։ . Այնուամենայնիվ, երբ վերջին օրինակում տեսադաշտը կրճատվում է, տեքստի ոչ մի հատված չի կարող իջնել աղյուսակից ներքև՝ դրանով իսկ խախտելով դրա կառուցվածքը։

      Տվյալների ձևաչափում աղյուսակի ներսում

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

      ,
      ,


      , վերնագրերի կոդերը՝ սկսած

      նախքան

      , նիշերի ձևաչափման պիտակներ -<В>, , , , , , , գրաֆիկական պատկերներ տեղադրող պիտակներ , հիպերտեքստային հղումներ<А>և այլն: Անմիջապես ընդգծենք, որ մեկ բջիջի ներսում նշված թեգերի շրջանակը սահմանափակվում է այս բջիջի սահմաններով՝ անկախ վերջնական պիտակի առկայությունից: Օրինակ, եթե տեքստի գույնը սահմանվում է բջիջի ներսում, , ապա նույնիսկ վերջնական կոդի բացակայության դեպքումկամ տեղադրելով այն մի քանի բջիջների կամ աղյուսակի շարքերում, հաջորդ բջիջի տեքստը կարտացոլվի լռելյայն գույնով:

      Աղյուսակային բջիջներում տվյալների ձևաչափման համար հասանելի են հետևյալ ընտրանքները:

      Բջիջների բովանդակության հավասարեցման տարբերակներն են ALIGN և VALIGN: Կարող է օգտագործվել կոդերում , և . Հորիզոնական հավասարեցման պարամետրը ALIGN կարող է վերցնել LEFT, RIGHT և CENTER արժեքները (կանխադրվածը LEFT է: եւ ԿԵՆՏՐՈՆ համար ) VALIGN ուղղահայաց հավասարեցման պարամետրը կարող է վերցնել TOP (վերևի երկայնքով), BOTTOM (ներքևի երկայնքով), MIDDLE (միջին), BASELINE (բազային գծի երկայնքով) արժեքները: Լռելյայն միջինն է: Հիմնական գծի հավասարեցումը կապում է բոլոր բջիջների մեկ տողի տեքստը մեկ տողի հետ: Սահմանեք հավասարեցման ընտրանքները կոդի մակարդակում որոշում է հավասարեցումը տվյալ տողի բոլոր բջիջների համար, մինչդեռ տողի յուրաքանչյուր առանձին բջիջ կարող է ունենալ իր պարամետրերը, որոնք վերացնում են նշված պարամետրերի ազդեցությունը. .

      Ահա աղյուսակի օրինակ, որտեղ առաջին սյունակի բջիջների տվյալները աջ հարթեցված են, երկրորդ սյունակը կենտրոնացված է, իսկ երրորդ սյունակը ձախ հավասարեցված է (կանխադրված արժեք).

      Սեղանի տարրերի հավասարեցում

      Բջջ 1 Բջջ 2 Բջջ 3
      Բջջ 4 Բջջ 5 Բջջ 6

      Այս օրինակի զննարկիչի արտացոլումը ներկայացված է Նկ. 4.11.


      Բրինձ. 4.11.Տվյալների հավասարեցում աղյուսակի բջիջներում

      NOWRAP տարբերակը անջատում է բջջային տեքստը տողերի ավտոմատ բաժանելու հնարավորությունը: Կարող է օգտագործվել կոդերում , և . Պետք է խուսափել այս տարբերակի անհարկի օգտագործումից, քանի որ այն կարող է զգալիորեն նվազեցնել աղյուսակների չափսերը դինամիկ փոխելու հնարավորությունը և խաթարել դրանց ընկալումը: Շատ դեպքերում բավական է օգտագործել NOWRAP-ը առանձին բջիջների համար, որոնք իսկապես պահանջում են նոր տողում բառերի փաթաթման արգելք: Բառի փաթաթումն իրականացվում է միայն բառերի (բացատների) միջև տարանջատիչների միջոցով, իսկ որոշ դեպքերում, որոշ տեղերում տեքստային ընդմիջումներն արգելելու համար, բացատ նիշի փոխարեն սահմանել չխախտող տարածության կոդը (NonBreaking Space): Օրինակները ներառում են դեպքեր, երբ բացը խորհուրդ չի տրվում՝ թվային արժեքի և տվյալ մեծության միավորների միջև. ազգանվան և սկզբնատառերի միջև. Այսպիսով, տեքստը 650 կմ կամ Ելցին Բ.Ն. խորհուրդ է տրվում գրել ձևով 650 կմ եւ Ելցինի Բ.Ն.

      WIDTH և HEIGHT պարամետրերը կարող են օգտագործվել կոդերում և . Նրանց շարահյուսությունը նման է պիտակի այս պարամետրերի շարահյուսությանը

      . Նրանց արժեքը որոշում է բջիջի լայնությունը կամ բարձրությունը, որի համար գրված են այս պարամետրերը: Արժեքները կարող են նշվել պիքսելներով կամ որպես ամբողջ աղյուսակի չափի տոկոս: Microsoft Internet Explorer-ը թույլ է տալիս միայն WIDTH արժեքը սահմանել պիքսելներով: Քանի որ աղյուսակը կապակցված կառույց է, որը բաղկացած է տողերից և սյունակներից, ցանկացած բջիջի լայնությունը սահմանելը ազդում է ամբողջ սյունակի լայնության վրա, որում գտնվում է բջիջը, իսկ բարձրությունը՝ ամբողջ տողի վրա: Եթե ​​սյունակի լայնության արժեքը նշված է միայն մեկ բջիջում, ապա այս արժեքը դառնում է ամբողջ սյունակի լայնությունը: Եթե ​​կան մի քանի նման ցուցումներ, ապա ընտրվում է առավելագույն արժեքը: Նույն հատկությունները վերաբերում են տողերին:

      Բարդ աղյուսակները բնութագրվում են մի քանի հարակից բջիջների հորիզոնական կամ ուղղահայաց միաձուլման անհրաժեշտությամբ մեկի մեջ: Այս հատկությունն իրականացվում է կոդերում նշված COLSPAN (COLiimn SPANning) և ROWSPAN (ROW SPANning) պարամետրերի միջոցով:

      սահմանված են այս խմբի առանձին սյունակների կարգավորումները: Այնուամենայնիվ, պիտակի մեջ անհրաժեշտության դեպքում կարող են սահմանվել հավասարեցման պարամետրեր, որոնց արժեքները վերաբերում են այս խմբի բոլոր սյունակներին: Պիտակի մեջ նշված պարամետրերի արժեքները , վերացնել արժեքները պիտակից . Նշենք, որ պիտակում այս օրինակում, ի տարբերություն նախորդի, SPAN պարամետր չկա: Այստեղ դրա օգտագործումն անիմաստ է, քանի որ խմբում տարրերի քանակը որոշվելու է պիտակին հետևողների կողմից պիտակներ . Հետևաբար, պիտակի SPAN պարամետրի ցանկացած տվյալ արժեք կվերասահմանվի։

      Նկ. 4.17-ը ցույց է տալիս վերը նշված կոդի իրագործման արդյունքը, ինչպես նաև նման աղյուսակի ցուցադրման տարբերակ՝ պիտակի մեջ RULES=GROUPS մուտքագրմամբ։

      կամ . Նշում. COLSPAN=num, որտեղ num-ը թվային արժեք է, որը նշում է, թե քանի սյունակ պետք է ընդլայնել ընթացիկ բջիջը հորիզոնական: ROWSPAN պարամետրի օգտագործումը նման է, միայն այստեղ դուք նշում եք տողերի քանակը, որոնք ընթացիկ բջիջը պետք է տարածվի ուղղահայաց: Լռելյայնորեն, այս պարամետրերը սահմանվում են մեկ արժեքով: Հնարավոր է միաժամանակ սահմանել երկու պարամետրերի արժեքները մեկ բջիջի համար: Այս պարամետրերի արժեքների ճիշտ կարգավորումը չի կարող շատ պարզ խնդիր լինել, մանավանդ, որ HTML խմբագրիչների մեծ մասը թույլ է տալիս տեսողականորեն ձևավորել HTML կոդերի հետագա սերունդով միայն ամենապարզ աղյուսակները:

      Նկ. 4.12-ը ցույց է տալիս աղյուսակի ցուցադրման օրինակ, որը ստացվել է հետևյալ HTML կոդով.

      Օգտագործելով COLSPAN և ROWSPAN ընտրանքները

      Երկու տողով բջիջ Երկու սյունակ ընդգրկող բջիջ
      Բջջ 3 Բջջ 4
      Բջջ 5 Բջջ 6 Բջջ 7


      Բրինձ. 4.12.Աղյուսակ բջիջներով, որոնք ընդգրկում են բազմաթիվ տողեր կամ սյունակներ

      Բջիջների տարածման պարամետրերի անուշադիր կարգավորումը կարող է հանգեցնել դրանց փոխադարձ համընկնման և կոնֆլիկտների, որոնց դեպքում արդյունքն անկանխատեսելի է: Ընդլայնված բջիջների տիպիկ օգտագործումը սովորական վերնագիր է մի քանի հարակից սյունակների կամ տողերի համար:

      Դիտարկենք HTML կոդի օրինակ (որը ցույց է տրված Նկար 4.13-ում), որտեղ ընդլայնված բջիջները սխալ են ձևավորվել:

      Ընդլայնված բջիջների սխալ օգտագործումը

      Բջջ 1 Բջջ 2

      Բջջ 3
      (ընդհանուր
      Հա երեք
      տողեր)

      Բջջ 4Բջջ 5
      Բջջ 6 Բջջ 7 (տարածված երկու սյունակի վրա)

      Բրինձ. 4.13.Ընդլայնված բջիջների սխալ հայտնաբերման արդյունք (տեքստի ծածկույթ)

      BGCOLOR պարամետրը սահմանում է ամբողջ աղյուսակի, առանձին տողերի կամ բջիջների ֆոնի գույնը: Կարող է հայտնվել պիտակներում

      , , չի պարունակում տեղեկատվություն կամ մեկ կամ մի քանի բացատներ, որոնք չեն դիտվում որպես տվյալներ: Անտեսանելի տվյալներ պարունակող բջիջները, օրինակ, կարող են պարունակել կոդ կամ տողերի հոսքի կոդ
      , կամ ցանկացած տեքստ, որի գույնը համապատասխանում է բջջի ֆոնի գույնին: Եթե ​​տվյալներ պարունակող բջիջները (նույնիսկ անտեսանելիները) ցուցադրվում են նույն կերպ բոլոր բրաուզերների կողմից, ապա դատարկ բջիջները կցուցադրվեն այլ կերպ: Netscape զննարկիչը դատարկ բջիջ չի ցուցադրում, այսինքն՝ այն վայրը, որտեղ գտնվում է այս բջիջը, կլցվի էջի ֆոնի գույնով, և ոչ թե բջջի ֆոնի գույնով, ի տարբերություն տվյալներ պարունակող բջիջների: Դատարկ բջիջների շուրջ եզրագիծ չի գծվում: Դատարկ բջիջով աղյուսակի օրինակ ներկայացված է նկ. 4.15.


      Բրինձ. 4.15.Աղյուսակի դատարկ բջիջը տարբեր բրաուզերներում տարբեր կերպ է արտացոլվում

      Microsoft Internet Explorer-ը ցուցադրում է երկու բջիջներն էլ բջիջների ֆոնի գույնով: NSCA Mosaic-ի նման զննարկիչը թույլ է տալիս օգտվողին որոշել աղյուսակում դատարկ բջիջների թողարկման բնույթը՝ ընտրելով համապատասխան տարբերակները: Նման հնարավորությունների իմացությունը թույլ կտա նախագծել աղյուսակներ, որոնք կցուցադրվեն համապատասխան կերպով՝ անկախ օգտագործողի ընտրած բրաուզերից: Որոշ դեպքերում բավական է մի քանի դատարկ բջիջների փոխարեն ստեղծել մեկ կոդ պարունակող բջիջներ։

      Տվյալների հավասարեցում աղյուսակի սյունակներում

      Սեղաններ ստեղծելիս բնորոշ խնդիր է առանձին տողերի կամ սյունակների հավասարեցման ընտրանքների կարգավորումը: Ընթացիկ տողի բոլոր բջիջների բովանդակությունը հավասարեցնելու համար բավական է սահմանել անհրաժեշտ պարամետրերը կոդում

      . Ավելի հաճախ, սակայն, անհրաժեշտ է ապահովել, որ նույն սյունակի բոլոր տարրերը հավասարեցվեն նույն ձևով, քանի որ շատ դեպքերում սյունակը պարունակում է միատարր տվյալներ: HTML-ի ավելի վաղ տարբերակներում առաջարկվում էր օգտագործել COLSPEC (COLumn SPECification) պարամետրը, որը դրված էր թեգում։
      և . Այս հատկությունը նախատեսված չէ HTML հատկորոշմամբ, սակայն աջակցվում է ինչպես Netscape-ի, այնպես էլ Microsoft Internet Explorer-ի կողմից: Մուտքի ձևը նույնն է, ինչ պիտակի համար: , այն է՝ BGCOLOR=արժեք, որտեղ արժեքը գույնի բովանդակությունն է RGB ձևաչափով կամ դրա անվանումը։

      Օրինակ:

      կամ .

      Ներդիր սեղաններ

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

      Ահա սեղանի օրինակ, որն օգտագործում է մեկ մակարդակի բույն:

      Լենինգրադի մարզի քաղաքներ

      Լենինգրադի մարզի քաղաքներ

      Հ - քաղաքի բնակչություն (հազար բնակիչ, 1992 թ.)

      P - հեռավորությունը Սանկտ Պետերբուրգից (կմ)

      Պետերբուրգին ենթակա քաղաքներ
      ՔաղաքՀՊ
      Զելենոգորսկ 13.6

      50

      Կոլպինո144.6

      26

      Կրոնշտադտ 45.2

      48

      Լոմոնոսովը 42.0

      40

      Պավլովսկ 25.4

      30

      Պետրոդվորեց 83.8

      29

      Պուշկին 95.1

      24

      Սեստրորեցկ 34.9

      35

      Բոլոր քաղաքները ենթակա են
      վարչակազմ
      Պետերբուրգ, ունեն
      ուղիղ քաղաքային
      հեռախոսահամարներ.

      Մարզային ենթակայության քաղաքներ
      ՔաղաքՀՊ
      Բոկսիտոգորսկ 21.6

      ALIGN=RIGHT>245

      Վոլխովը 50.3

      ALIGN=RIGHT>122

      Վսևոլոժսկ 32.9

      24

      Վիբորգ 80.9 130
      Վիսոցկ 1.0

      ALIGN=RIGHT>159

      Գատչինա 80.9 46
      Իվանգորոդ 11.9

      ALIGN=RIGHT>147

      Կամեննոգորսկ 5.9 157
      Kingisepp 51.5

      ALIGN=RIGHT>138

      Կիրիշի 53.8

      ALIGN=RIGHT>115

      Կիրովսկ 23.8

      55

      Lodeynoye Pole 27.3

      ALIGN=RIGHT>244

      Լիգա 41.8139

      (Աղյուսակի շարունակություն)
      ՔաղաքՀՊ
      Լուբան 4.7

      85

      Նովայա Լադոգա 11.2

      ALIGN=RIGHT>141

      Օտրադնոե 22. 9

      ALIGN=RIGHT>40

      Պիկալևո 25.1

      ALIGN=RIGHT>246

      Ստորգետնյա 23.1285
      Պրիմորսկ 6.7137
      Պրիոզերսկ 20.5

      ALIGN=RIGHT>145

      Սվետոգորսկ 15.8

      ALIGN=RIGHT>201

      Շիֆեր 42.6

      ALIGN=RIGHT>192

      Pinery 57.6

      81

      Տիխվին 72.0

      ALIGN=RIGHT>200

      Տոսնո 33.8

      53

      Շլիսելբուրգ 12.5

      64

      Բրինձ. 4.14.Ներդրված աղյուսակների օրինակ

      Այս օրինակի ցուցադրման արդյունքը ներկայացված է նկ. 4.14.

      Առաջին հայացքից թվում է, թե օրինակում սեղանների բնադրում չկա։ Փաստորեն, ամբողջ փաստաթուղթը անսահման աղյուսակ է, որը բաղկացած է վերնագրից և ընդամենը մեկ տողից, որը պարունակում է հինգ բջիջ: Նման աղյուսակի կազմակերպումը ծառայում է էջի վրա տվյալները դասավորելու միակ նպատակին: Առաջին բջիջի ներսում կա ևս մեկ աղյուսակ, որն ունի իր սեփական վերնագիրը և բաղկացած է երեք սյունակից, որին հաջորդում է մեջտեղում հավասարեցված տեքստը: Երրորդ և հինգերորդ բջիջները նույնպես պարունակում են առանձին աղյուսակներ: Երկրորդ և չորրորդ բջիջները դատարկ են, դրանք չեն պարունակում որևէ տվյալ և ունեն մեկ WIDTH պարամետր, որը նշում է դրա լայնությունը: Նրանց նպատակն է սահմանել նահանջ առաջին և երրորդ, ինչպես նաև երրորդ և հինգերորդ բջիջների միջև, որոնցում գտնվում են աղյուսակները: Սա նման նահանջ սահմանելու հնարավոր տարբերակներից մեկն է։ Մեկ այլ տարբերակ է օգտագործել CELLSPACING պարամետրը, որը որոշում է բջիջների միջև հեռավորությունը, բայց այս պարամետրը սահմանում է ներքևերը ինչպես հորիզոնական, այնպես էլ ուղղահայաց, ինչը այս պահին պարտադիր չէ: Բացի այդ, տրված լայնությամբ դատարկ բջիջը կփոքրանա, երբ տեսադաշտը նեղանա՝ ի տարբերություն CELLSPACING պարամետրով (ինչպես նաև CELLPADDING) նշված տարածության: Այս օրինակի համար փորձեք նվազեցնել զննարկչի տեսադաշտի լայնությունը կամ, նույն կերպ, ավելացնել տեքստը ցուցադրելու համար օգտագործվող տառատեսակի չափը: Աղյուսակների միջև հեռավորությունը կկրճատվի զրոյի՝ հնարավոր դարձնելով հնարավորինս երկար տեսնել ողջ տեղեկատվությունը միաժամանակ, սակայն հետագա փոփոխությունը չի վնասի աղյուսակը, այլ թույլ կտա հորիզոնական ոլորել։ Նմանատիպ սխեմայի համաձայն, դուք կարող եք կազմակերպել տեղեկատվության տեղադրումը, որը բաղկացած է ոչ միայն աղյուսակներից, այլև պատկերներից, տեքստային հատվածներից և այլն:

      Սեղանների կառուցման առանձնահատկությունները

      Այս բաժնում քննարկվում են առանձին բրաուզերների որոշ առանձնահատկություններ, ինչպես նաև աղյուսակներ կառուցելու և ցուցադրելու որոշ նրբություններ:

      Աղյուսակներում դատարկ բջիջների ցուցադրում

      Տարբեր բրաուզերների կողմից աղյուսակների ներկայացման առանձնահատկություններից է դատարկ բջիջների ցուցադրումը։ Լեզվի նկարագրության համաձայն, բոլոր բրաուզերները պետք է տողերը լրացնեն դատարկ բջիջներով, եթե դրանց թիվը ցանկացած տողում ավելի քիչ է, քան մնացած տողերում: Բացի այդ, աղյուսակի ցանկացած կետում կարող են լինել բջիջներ, որոնք տվյալներ չեն պարունակում: Տարբերություն կա դատարկ բջիջների և անտեսանելի տվյալներ պարունակող բջիջների միջև: Զույգ պիտակների ներսում դատարկ բջիջներում

      և
      և սահմանեց յուրաքանչյուր աղյուսակի սյունակի հավասարեցումը և լայնությունը: Օրինակ, colspec="L40 R50 C80" կարգավորումը սահմանեց տվյալների հավասարեցումը բջիջներում աղյուսակի երեք սյունակների համար՝ առաջին սյունակի համար՝ ՁԱԽ, երկրորդի համար՝ RIGHT և երրորդի համար՝ CENTER, ինչպես նաև լայնությունը: յուրաքանչյուր սյունակ: Քանի որ HTML լեզուն զարգացել է, այն հնացել է և ներկայումս լեզվի բնութագրերի մաս չէ և չի աջակցվում բրաուզերների մեծ մասի կողմից: Արդյունքում, Netscape Navigator-ը չունի հատուկ գործիքներ այս խնդիրը լուծելու համար, և միակ տարբերակը կա՛մ օգտագործել լռելյայն հավասարեցումը, կա՛մ անհրաժեշտության դեպքում յուրաքանչյուր բջիջում սահմանել համապատասխան արժեքներ:

      Microsoft Internet Explorer-ը տրամադրում է հատուկ պիտակներ.

      և . Այս պիտակները պետք է հայտնվեն նկարագրությունից անմիջապես հետո:
      նախքան պիտակի առաջին հայտնվելը .

      Նշման ընտրանքներ

      և կարող է լինել SPAN, որը որոշում է հարակից սյունակների քանակը, որոնց վրա ազդում են պարամետրերի արժեքները, և ALIGN, որը որոշում է տվյալների հորիզոնական հավասարեցումը համապատասխան սյունակի (կամ սյունակների) բոլոր բջիջներում: ALIGN պարամետրի վավեր արժեքներն են LEFT, RIGHT և CENTER: SPAN պարամետրի համար լռելյայն արժեքը մեկն է:

      Նշել

      լրացուցիչ թույլ է տալիս սահմանել VALIGN պարամետրը, որը որոշում է բջիջներում տվյալների ուղղահայաց հավասարեցումը: VALIGN պարամետրի վավեր արժեքներն են՝ MIDDLE, TOP և BOTTOM:

      Տարբերությունը պիտակների միջև

      և այն է, որ դրանցից առաջինը, բացի սյունակների համար տվյալների հավասարեցման պարամետրերը սահմանելուց, նաև իրականացնում է մի քանի սյունակների պայմանական միավորում խմբի մեջ: Այս ագրեգացիայի ազդեցությունը ցուցադրվում է RULES պարամետրի օգտագործման ժամանակ, որը նկարագրված է ստորև: Լռելյայնորեն, աղյուսակի բոլոր սյունակները դիտարկվում են որպես մեկ խումբ: Նշել պետք է օգտագործվի միայն խմբի առանձին սյունակներում տվյալների հավասարեցումը որոշելու համար:

      Օրինակ բերենք. Ենթադրենք, որ անհրաժեշտ է կառուցել 6 սյունակ պարունակող աղյուսակ, և դրանցից առաջին երեքի տվյալները պետք է աջ դասավորված լինեն, իսկ հաջորդ երեքը՝ մեջտեղում։ Այս խնդիրը լուծելու համար գրեք HTML կոդի հետևյալ հատվածը.

      (աղյուսակի տվյալները)

      Այս կոդը ցուցադրելու արդյունքը ներկայացված է Նկ. 4.16.


      Բրինձ. 4.16.Աղյուսակ՝ բջիջների խմբերում տվյալների հավասարեցման տարբեր տարբերակներով

      Մեկ այլ օրինակ. Ենթադրենք, որ նախորդ աղյուսակում առաջին երկու սյունակները պետք է հավասարեցվեն դեպի աջ, իսկ երրորդը` մեջտեղում, և բոլոր երեք սյունակները պետք է միավորվեն խմբի մեջ: Հաջորդ երեք սյունակները նույնպես պետք է խմբավորվեն միասին և ունենան նույն հավասարեցումը, ինչ առաջին խումբը: Այս խնդիրը լուծելու համար գրեք HTML կոդի հետևյալ հատվածը.

      (աղյուսակի տվյալները)

      Այս օրինակում պիտակից հետո

      , որից երեւում է խմբավորման իմաստը։

      Խորհուրդ

      Քանի որ պիտակների շրջանակը

      և սահմանափակվում է մեկ բրաուզերով՝ Microsoft Internet Explorer-ով, դրանք պետք է զգուշությամբ օգտագործվեն: Այս թեգերի օգտագործման հարմարավետությունն ակնհայտ է, բայց գործնականում աղյուսակների մեծ մասը կառուցված է աղյուսակի յուրաքանչյուր բջիջի համար համապատասխան ALIGN հավասարեցման տարբերակով, որտեղ անհրաժեշտ է, ինչը մեծապես մեծացնում է աղյուսակի սկզբնական կոդի քանակը, բայց ապահովում է, որ այն տեսանելի է ցանկացածում: բրաուզերը.


      Բրինձ. 4.17.Աղյուսակ՝ խմբավորված սյունակներով

      Սեղանի եզրագծերի գույնի սահմանում

      Եվս մի քանի տարբերակներ, որոնք հատուկ են միայն Microsoft Internet Explorer-ին, թույլ են տալիս ընտրել աղյուսակների եզրագծերի գույնը՝ BORDERCOLOR, BORDERCOLORLIGHT և BORDERCOLORDARK: Այս պարամետրերը կարող են սահմանվել թեգերում

      , . Գույնի անունը կամ դրա տասնվեցական արժեքը կարող է օգտագործվել որպես այս պարամետրերի արժեք: BORDERCOLOR պարամետրը սահմանում է աղյուսակի եզրագծերի բոլոր տարրերի գույնը, մինչդեռ մյուս երկու պարամետրերը նշում են առանձին բաղադրիչի եզրագծերի գույնը՝ գերակայելով BORDERCOLOR արժեքը: BORDERCOLORLIGHT պարամետրը գունավորում է ամբողջ աղյուսակի ձախ և վերին եզրերը և յուրաքանչյուր բջիջի համապատասխանաբար աջ և ներքևի եզրերը: Երկրորդ պարամետրը BORDERCOLORDARK սահմանում է հակառակ եզրերի գույները: Այս պարամետրերի համակցության շնորհիվ աղյուսակը որոշակիորեն բարձրացված տեսք կունենա էջի մակերևույթից կամ ներքև: Ամեն ինչ կախված է գույների ընտրված համադրությունից:

      Նշում

      Netscape 4.x դիտարկիչը նաև աջակցում է BORDERCOLOR տարբերակը:

      Սահմանեք ֆոնային պատկեր սեղանի համար

      Microsoft Internet Explorer-ը (ինչպես նաև Netscape տարբերակը 4.x) թույլ է տալիս օգտագործել BACKGROUND պարամետրը, որը սահմանում է աղյուսակի ֆոնային պատկերը, ինչպես դա կարելի է անել ամբողջ HTML փաստաթղթի համար: Այս պարամետրը կարող է սահմանվել թեգերում

      , և
      , , w

      Microsoft Internet Explorer-ը թույլ է տալիս օգտագործել մի շարք նոր պիտակներ աղյուսակների կառուցվածքի և շրջանակների և ցանցի գծերի գծագրման ճկուն վերահսկողության համար:

      Պիտակներ

      , և ավելի խստորեն սահմանեք աղյուսակի նկարագրության կառուցվածքը՝ ընդգծելով աղյուսակի վերնագրի բջիջները, աղյուսակի հիմնական բովանդակությունը և վերջնական տողը: Այս պիտակները կարող են հայտնվել միայն աղյուսակների նկարագրություններում՝ զույգ պիտակների շրջանակներում
      և .

      Սեղանի կառուցվածքային պիտակներ

      և
      .

      Պիտակներ և օգտագործվում են աղյուսակի վերնագիրն ու ստորագիրը նկարագրելու համար: Այս պիտակները կարող են հայտնվել աղյուսակում միայն մեկ անգամ: Նրանց համար վերջի պիտակը կարող է բաց թողնել: Այս թեգերի օգտագործումը օգտակար է մեծ աղյուսակներ ստեղծելիս, որոնք անցնում են մեկ էջից:

      Նշել կարող է հայտնվել մի քանի անգամ աղյուսակի նկարագրության մեջ և պահանջում է վերջի պիտակի օգտագործումը. Այս թեգը կատարում է տվյալների տրամաբանական խմբավորումը նույն կերպ, ինչ թեգը A, որը խմբավորում է հարակից սյուները:

      Նոր պիտակներ օգտագործելիս հնարավոր է դառնում ավելի ճկուն կառավարել աղյուսակի շրջանակները և ցանցային գծերը:

      Սեղանի շուրջ շրջանակների գծագրումը վերահսկվում է FRAME պիտակի պարամետրով

      , իսկ աղյուսակի ցանցային գծերը՝ RULES պարամետրով։ Օրինակ՝ հնարավոր է դառնում սյունակների միջև միայն ուղղահայաց գծեր գծել և ամբողջ սեղանի շուրջ եզրագծի փոխարեն հորիզոնական գծեր տալ աղյուսակի վերևում և ներքևում։

      FRAME պարամետրը կարող է ընդունել հետևյալ արժեքները.

      • BOX կամ BORDER - շրջանակը գծված է բոլոր չորս կողմերից
      • Վերևում - միայն վերին կողմը
      • ՍՏՈՐԵՎ - միայն ներքևի կողմից
      • HSIDES - նկարեք ներքևի և վերին կողմերը
      • VSIDES - նկարել ձախ և աջ կողմերը
      • LHS - միայն ձախ կողմում
      • RHS - միայն աջ կողմը
      • ԱՆՎԱՐ - սեղան առանց արտաքին շրջանակների

      RULES պարամետրը վերահսկում է աղյուսակի ներքին ցանցային գծերի գծագրումը և կարող է վերցնել հետևյալ արժեքները.

      • ԲՈԼՈՐ - գծված են բոլոր ներքին գծերը
      • ԽՄԲԵՐ - գծված են միայն խմբերը բաժանող գծեր
      • ՇԱՐՔԵՐ - գծել գծերը բաժանող գծեր
      • COLS - նկարել սյունակները բաժանող գծեր
      • ՈՉ ՈՔ - ներքին գծերը գծված չեն

      Օրինակ:

      .

      Նշում

      Սեղանի և շրջանակների ցանցային գծերի գծագրումը կիրականացվի միայն BORDER պիտակի պարամետրի առկայության դեպքում:

      . Եթե ​​այս պարամետրը բացակայում է կամ սահմանվում է զրոյի, ապա ցանցի գծերը և շրջանակները բացակայում են FRAME և RULES պարամետրերի ցանկացած արժեքի համար:

      Ահա ամբողջական HTML կոդի օրինակ, որը ստեղծում է աղյուսակ՝ օգտագործելով նկարագրված հատկանիշները.

      Ընդգծեք վերնագիրը և ներքևի տողը

      Ճկուն գծի կառավարման օրինակ
      սեղանի ցանց

      Սյունակի վերնագիր 1 Սյունակի վերնագիր 2 Սյունակի վերնագիր 3
      ՏվյալներՏվյալներՏվյալներ
      ՏվյալներՏվյալներՏվյալներ
      ՏվյալներՏվյալներՏվյալներ
      ՏվյալներՏվյալներՏվյալներ
      ՏվյալներՏվյալներՏվյալներ
      ՏվյալներՏվյալներՏվյալներ
      ԱրդյունքԱրդյունքԱրդյունք


      Բրինձ. 4.18.Սեղանի ցանցի գծերի ճկուն գծագրում Microsoft Internet Explorer-ի կողմից

      Այս օրինակում, որի ցուցադրումը բրաուզերի կողմից ներկայացված է Նկ. 4.18, ցուցադրված է սեղանի շուրջ ցանցի գծերի և շրջանակների վերահսկման հնարավոր տարբերակներից մեկը: Սեղանի շուրջը գծված է 5 պիքսել հաստությամբ շրջանակ (BORDER=S), միայն վերևի և ներքևի կողմերում (FRAME=HSIDES): Ցանցային գծերը գծվում են աղյուսակի ներսում՝ տվյալների խմբերը առանձնացնելու համար (ԿԱՆՈՆՆԵՐ=ԽՄԲԵՐ): Տվյալների խմբերը սահմանվում են, առաջին հերթին, երեք պիտակների առկայությամբ , որոնցից յուրաքանչյուրը հայտարարում է մեկ աղյուսակի սյունակխումբ. Երկրորդ, պիտակներ , և<тгоот>նաև բաժանել աղյուսակի տվյալները խմբերի, ինչը որոշում է ներքին հորիզոնական գծերի գծագրումը:

      Սահմանեք աղյուսակի սյունակների քանակը

      Microsoft Internet Explorer-ը (ինչպես նաև Netscape տարբերակը 4.x) թույլ է տալիս նշել պիտակի մեջ

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

      Սեղանի ուղղահայաց հավասարեցում

      Վերջին պիտակի պարամետրը

      , որը եզակի է Microsoft Internet Explorer-ի համար, VALIGN է, որը սահմանում է աղյուսակի ուղղահայաց հավասարեցումը տեքստի նկատմամբ: Դրա էֆեկտը նման է պատկերների նույն պարամետրին:

      Նշում

      Նկատի ունեցեք, որ նույն պարամետրի օգտագործումը կարող է զգալիորեն տարբերվել ինչպես նպատակային, այնպես էլ հնարավոր արժեքներով տարբեր պիտակների համար, նույնիսկ նույն բրաուզերի համար և լեզվի ճշգրտման շրջանակներում: Հետևաբար, անհնար է ամփոփ աղյուսակ կազմել տարբեր պարամետրերի օգտագործման վերաբերյալ դրանց կիրառման համատեքստից դուրս: Օրինակ, ALIGN պարամետրը միայն աղյուսակներում օգտագործվում է երեք տարբեր եղանակներով.

      • պիտակի համար
      ALIGN պարամետրը կարող է վերցնել LEFT կամ RIGHT արժեքները և նշանակում է աղյուսակի գտնվելու վայրը՝ սեղմված համապատասխանաբար ձախ կամ աջ եզրին.
    • պիտակի համար
    • ,
      ALIGN պարամետրը վերցնում է TOP կամ BOTTOM արժեքները և նշանակում է աղյուսակի վերնագրի գտնվելու վայրը աղյուսակի վերևում կամ ներքևում.
    • պիտակների համար
    • և ALIGN պարամետրը վերցնում է LEFT, RIGHT կամ CENTER արժեքները և նշանակում է աղյուսակի համապատասխան բջիջի (կամ բջիջների) բովանդակության հավասարեցում հորիզոնական:

      Սեղանի տեսքի այլընտրանք

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

      Որոշ այլ եղանակներ, որոնք չեն օգտագործում աղյուսակների հայեցակարգը.

      • Օգտագործելով նախապես ձևաչափված տեքստ: Այս մեթոդը ավանդաբար օգտագործվում է ավելի վաղ տարբերակները HTML լեզու, երբ սեղանի աջակցությունը դեռ գոյություն չուներ: Դրա օգտագործումը մինչ օրս չի կորցրել իր արդիականությունը, քանի որ նման տեքստերը ճիշտ կցուցադրվեն ցանկացած բրաուզերի կողմից, ներառյալ զուտ տեքստայինները:
      • Օգտագործելով աղյուսակ պարունակող պատկեր: Աղյուսակը կարող է ստեղծել ցանկացած մարդ տեքստային խմբագիրկամ նույնիսկ ցուցադրվում է վեբ բրաուզերի կողմից և այնուհետև պահվում է որպես պատկեր որևէ մեկում գրաֆիկական ձևաչափեր. Սա լավագույն տարբերակը չէ, քանի որ այն կորցնում է սեղանի ցուցադրումը դինամիկ կերպով հարմարեցնելու ողջ ճկունությունը: Բացի այդ, կա պահեստավորման անհրաժեշտություն լրացուցիչ ֆայլպատկերով, որը նույնպես սովորաբար շատ ավելի մեծ կլինի, քան HTML աղյուսակը նկարագրող տեքստի չափը: Կիրառման հնարավոր ոլորտը խստորեն սահմանված չափերի աղյուսակներն են, որոնց համար անընդունելի է դրա ցուցադրման կախվածությունը որևէ արտաքին գործոններից (տառատեսակներ, բրաուզերի ռեժիմներ և այլն):
      • Օգտագործելով ցուցակները աղյուսակների փոխարեն: Ամենապարզ դեպքերի համար, աղյուսակներ կազմակերպելու փոխարեն, միանգամայն հնարավոր է յոլա գնալ HTML լեզվով առկա ցուցակների տեսակներից մեկով:

      Սեղանի պատրաստում

      HTML աղյուսակներ պատրաստելու համար կարող են օգտագործվել ցանկացած խմբագրիչ, որոնցից շատերն ունեն աղյուսակներ տեսողականորեն ստեղծելու գործիքներ։ Ահա HotDog Professional խմբագրում աղյուսակ պատրաստելու օրինակ: Աղյուսակ ստեղծելու համար պարզապես Insert մենյուից ընտրեք Tables տարրը, որից հետո նկ. 4.19. Աղյուսակ ստեղծելու համար անհրաժեշտ է լրացնել պատուհանի համապատասխան դաշտերը: Աղյուսակում տողերի և սյունակների քանակը որոշելուց հետո կարող եք անցնել աղյուսակի առանձին բջիջների ուղղակի լրացմանը, որը կցուցադրվի նույն երկխոսության վանդակում: Երկխոսության տուփն ունի Preview կոճակ, որը սեղմելով թույլ է տալիս ներկառուցված բրաուզերի միջոցով դիտել ստացված աղյուսակը (նկ. 4.20):


      Բրինձ. 4.19.Սեղաններ ստեղծելու համար երկխոսության տուփ


      Բրինձ. 4.20.Աղյուսակը ցուցադրված է ներկառուցված բրաուզերի միջոցով

      Երբ ավարտեք աղյուսակի տվյալների պատրաստումը, սեղմեք OK: Այնուհետև ստեղծված աղյուսակի նկարագրության կոդը կտեղադրվի խմբագրվող HTML փաստաթղթում: Նկ.-ում ներկայացված օրինակի համար. 4.19, կստեղծվի հետևյալ կոդը.

      (կոդի մի մասը բաց է թողնված)

      Սեղանի գլուխ
      Սյունակ 1 Սյունակ 2 Սյունակ 3 Սյունակ 4
      1 2 3 4

      Նույն ձեւով տրված առաջադրանքըլուծվել է Netscape Communicator-ի Netscape Composer բաղադրիչն օգտագործելիս: Նկ. 4.21-ը ցույց է տալիս երկխոսության տուփ, որտեղ դուք պետք է լրացնեք պահանջվող դաշտերը: Ներածման համար լրացուցիչ ընտրանքներհատկորոշել

      տրամադրվում է լրացուցիչ HTML կոճակը: Երկխոսության տուփի դաշտերը լրացնելուց հետո պետք է սեղմել Դիմել կոճակը և այնուհետև ձեզ հնարավորություն կտրվի լրացնել աղյուսակի բջիջները (նկ. 4.22):

      Բրինձ. 4.21. Netscape Composer աղյուսակի ընտրանքները կարգավորելու համար երկխոսության տուփ


      Բրինձ. 4.22.Մուտքային կուրսորի սկզբնական դիրքը դատարկ աղյուսակում