Մենյու
տունՆավիգացիա

Պատրաստի աղյուսակ html-ով: Օրինակ՝ սահմանի փլուզման հատկության կիրառում

09.11.2015


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

… բայց դա արդեն անցյալում է, քանի որ այսօր դրանք ավելի շատ են արդյունավետ ուղիներստեղծելով լարային շրջանակներ կայքի համար . Ես հաճախ օգտագործում եմ աղյուսակ իմ բլոգում կամ կայքում, օրինակ, ինչպես .

Կարծում եմ, դուք հասկացաք, թե ինչու պետք է սովորեք սեղան ստեղծել:

Որո՞նք են աղյուսակի հիմնական պիտակները:

○ պիտակ ՍԵՂԱՆԱԿ
Սա աղյուսակ ստեղծելու հիմնական տարան է, որի ներսում պարունակվում են աղյուսակի այլ տարրեր՝ սյունակներ և տողեր։
Փակման պիտակը պարտադիր է:

○ պիտակ ՏՌ

Տարայի ներսում

……
տողերը տեղադրվում են.

Բարերը ստեղծվում են պիտակի միջոցով .
Փակման պիտակը պարտադիր է:

Ուշադրություն.առանց այս բոլոր թեգերի օգտագործման, հնարավոր չէ աղյուսակ ստեղծել:

Այժմ փորձենք օգտագործել տեսությունը և գործնականում ստեղծել աղյուսակ։

Զորավարժություններ:ստեղծեք մեկ տողի աղյուսակ, որտեղ կլինեն երեք սյունակ:

տող -1 / սյունակ 1 սյունակ 2 սյունակ 3

Զորավարժություններ:ստեղծել աղյուսակ երեք տողով և երեք սյունակով:

տող -1 / սյունակ 1 սյունակ 2 սյունակ 3
տող -2 / սյունակ 1 սյունակ 2 սյունակ 3
տող -3 / սյունակ 1 սյունակ 2 սյունակ 3

Մինչ այժմ ձեզ համար ամեն ինչ պարզ է։ Եթե ​​չես հասկանում, բարձրացրու ձեռքդ։ Այո, հասկացա, եկեք շարունակենք:

Այժմ հաշվի առեք աղյուսակի հատկանիշները:

*Հատկանիշներ

○ Աղյուսակի եզրագծերը HTML-ում

Աղյուսակը տեսանելի դարձնելու համար պիտակին

դիմել է հատկանիշ»սահման» .

Եթե ​​հատկանիշի արժեքը « սահման» «0» , եզրագիծը տեսանելի չի լինի, եթե հատկացված չէ պիտակին

հատկանիշ սահման, աղյուսակի եզրագիծը նույնպես չի երևա։

Աղյուսակի եզրագծերը HTML-ի կայքում

տող -1 / սյունակ 1 սյունակ 2 սյունակ 3


Արդյունք:

Փորձեք փոխել հատկանիշի արժեքը սահմանվրա «10» .

○Ինչպես միացնել բջիջները աղյուսակում

Հատկանիշներն օգտագործվում են աղյուսակում բջիջները միացնելու համար «կոլսպան»և «rowspan» դեպի պիտակը < տդ> .

  • colspan - բջիջների հորիզոնական միաձուլում;
  • rowspan - բջիջների միաձուլում ուղղահայաց:

Արժեքներում նշեք, թե քանի բջիջ պետք է միավորել:

տող 1 սյունակ 1
տող 2 սյունակ 1 տող 2 սյունակ 2

Արդյունք:

տող 1 սյունակ 1 տող 1 սյունակ 2
տող 2 սյունակ 1

Արդյունք:

Ավելի բարդ օրինակ.

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

տող -1 / սյունակ 1 սյունակ 2 սյունակ 3
տող -2 / սյունակ 1 սյունակ 2 սյունակ 3 սյունակ 4


Արդյունք:

○ Ինչպես մեծացնել աղյուսակի բջիջների միջև հեռավորությունը

Տեքստի և բջիջի եզրագծի միջև հեռավորությունը մեծացնելու համար գրեք հատկանիշը «բջջային լիցք»պիտակին

«cellpadding» հատկանիշի արժեքներում նշեք նահանջի հեռավորությունը

տող 1 սյունակ 1 սյունակ 2

Արդյունք:

Աղյուսակի բջիջների միջև տարածությունը մեծացնելու համար օգտագործեք հատկանիշը բջիջների տարածությունպիտակին

Հատկանիշների արժեքներում բջիջների տարածություննշեք բջիջների միջև հեռավորությունը

տող 1 սյունակ 1 սյունակ 2

Արդյունք:

○ Ինչպես պատրաստել HTML աղյուսակի ֆոն

HTML աղյուսակի ֆոն ստեղծելու համար օգտագործեք k թեգը

Եվ

այս հատկանիշները.

  • BGCOLOR - ֆոնի գույն ամբողջ աղյուսակի կամ յուրաքանչյուր բջիջի համար առանձին: Գույնը նշվում է կոդով կամ բառով:
  • ֆոն - աղյուսակի ֆոնը լցված է նկարով:
Աղյուսակներ HTML-ում - կայք
տող -1 / սյունակ 1 սյունակ 2 սյունակ 3
տող -2 / սյունակ 1 սյունակ 2 սյունակ 3 սյունակ 4


Արդյունք:

○ Ինչպես տեղադրել պատկեր HTML աղյուսակում

Պատկերը HTML աղյուսակի մեջ մտցնելու համար, թեգի միջև

տեղադրել պիտակ .
տող 1 բջիջ 1 բջիջ 2

Արդյունք:

Արժեքները նշված են պիքսելներով (px) կամ տոկոսներով (%)

○ Բովանդակության հավասարեցում HTML աղյուսակում

Բովանդակությունը HTML աղյուսակում հավասարեցնելու համար օգտագործեք to tag-ը հատկանիշ շարելԵվ «վալին» :

ՇԱՐԵԼ- աղյուսակի բովանդակության հորիզոնական հավասարեցում:
Արժեքներ:

  • ձախ - հրում բովանդակությունը դեպի ձախ (կանխադրված);
  • կենտրոն – տեղադրված է կենտրոնում;
  • ճիշտ - հրում բովանդակությունը դեպի աջ կողմ

VALIGN- աղյուսակի բովանդակության ուղղահայաց հավասարեցում:
Արժեքներ:

  • գագաթ – սեղմեք բովանդակությունը վերևում;
  • ներքեւ – սեղմեք բովանդակությունը ներքևում;
  • միջին – սահմանել բովանդակությունը մեջտեղում
տեքստը

լռելյայն բջիջ բովանդակությունը հորիզոնական հարթեցված է դեպի աջ, ուղղահայաց՝ սեղմված դեպի ներքև
հարթեցնել բովանդակությունը հորիզոնական դեպի ձախ, ուղղահայաց - սեղմել այն վերևում բովանդակությունը հորիզոնական հարթեցրեք կենտրոնում, ուղղահայաց - սեղմեք մեջտեղում

Արդյունք:

○ Ինչպես կենտրոնացնել html աղյուսակը

Սեղանը կենտրոնում հարթեցնելու համար հարկավոր է սեղանը փաթաթել պիտակով

:

Սեղանի կոդը

տող -1 / սյունակ 1 սյունակ 2 սյունակ 3

Սեղանի համար լրացուցիչ և հիմնական պիտակներ

Սեղան կայքի համար
Վերնագիր 1 Վերնագիր 2
1 2

Արդյունք:

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

Նախորդ գրառումը
Հաջորդ գրառումը

.

Աղյուսակի յուրաքանչյուր տող տեղադրված է տարրի մեջ ... .

Աղյուսակի վերնագրի բջիջը տեղադրված է տարրի մեջ ...(այս դեպքում բովանդակությունը ցուցադրվում է թավ և կենտրոնացված):

Սեղանի տվյալների յուրաքանչյուր բջիջ տեղադրվում է տարրի մեջ ... .

Աղյուսակի անվանումը, անհրաժեշտության դեպքում, տեղադրվում է տարրի ներսում ...(ընտրովի սեղանի տարր): Խնդրում ենք նկատի ունենալ, որ եթե նախատեսում եք օգտագործել տրված տարրիր աղյուսակում, ապա այն պետք է հետևի փաստաթղթի տարրին

..
.

Անցնենք աղյուսակի գործնական մասին.

Տարրերի օգտագործման օրինակ <table><span> border="1">
տարրական սեղան
Վերնագրի բջիջ 1Վերնագիր բջիջ 2Վերնագիր բջիջ 3
Տվյալների բջիջ 1 տող 2Տվյալների բջիջ 2 տող 2Տվյալների բջիջ 3 տող 2
Տվյալների բջիջ 1 տող 3Տվյալների բջիջ 2 տող 3Տվյալների բջիջ 3 տող 3


Այս աղյուսակում, պարզության համար, մենք ավելացրել ենք «1» արժեքով ատրիբուտի եզրագիծը (սահման), որը որոշում է, որ եզրագիծը պետք է ցուցադրվի աղյուսակի բջիջների շուրջ: Սահմանային հատկանիշը գրեթե երբեք չի օգտագործվում HTML-ում, այս դեպքում CSS-ի օգտագործումը նախընտրելի կլինի և ավելի ճկունություն կապահովի: Որպես մաս HTML սովորելըմենք կսովորենք, թե ինչպես ճիշտ ձևավորել աղյուսակներ, և երբ սովորում ենք CSS 3«» հոդվածում մենք կսովորենք, թե ինչպես դրանք մասնագիտորեն ոճավորել:

Մեր օրինակի արդյունքը.

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

Սյունակների միավորում տարրերում (տվյալների բջիջ) կամ (վերնագրի բջիջ) կարելի է անել՝ օգտագործելով colspan հատկանիշը (այս դեպքում բջիջը ձգվում է դեպի աջ՝ որոշակի թվով բջիջներով):

Աղյուսակներում սյունակների միացման օրինակ <span> border="1">
տարրական սեղան
Վերնագրի բջիջ 1 Վերնագիր բջիջ 2
Տվյալների բջիջ 1 տող 2Տվյալների բջիջ 2 տող 2Տվյալների բջիջ 3 տող 2
Տվյալների բջիջ 1 տող 3Տվյալների բջիջ 2 տող 3Տվյալների բջիջ 3 տող 3


Մեր օրինակի արդյունքը.

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

Տարրերի մեջ լարերի միացում կամ թույլատրվում է օգտագործել rowspan հատկանիշը (բջիջների տիրույթը դրված է վերևից ներքև և ընդգրկում է մի քանի տող. բջիջը ձգվում է ներքև):

Աղյուսակներում տողերի միացման օրինակ <span> border="1">
տարրական սեղան
Վերնագրի բջիջ 1 Վերնագիր բջիջ 2
rowspan="2">Տվյալների բջիջ 1 տող 2Տվյալների բջիջ 2 տող 2Տվյալների բջիջ 2 տող 3
Տվյալների բջիջ 2 տող 3Տվյալների բջիջ 3 տող 3


Մեր օրինակի արդյունքը.

Սյունակի հատկությունները

span հատկանիշի օգտագործման օրինակ առանձին սյունակներսեղաններ:

</span>Ոճերի կիրառում առանձին աղյուսակի սյունակներում <span> span="2" style="background-color:khaki">
Դիմում No.Ծառայությունգինը, ռուբ.Ընդամենը
31337Բարձրաձայն կարդալը 1 000 1 000


Մեր օրինակի արդյունքը.

Եթե ​​Ձեզ անհրաժեշտ է ոճավորել միայն մեկ սյունակ, ապա բավական է նշել span հատկանիշը տարրի ներսում , ոչ տարրի ներսում :

HTML թեգի span հատկանիշի օգտագործման օրինակ <colgroup><span>
Դիմում No.Ծառայությունգինը, ռուբ.հանձնաժողով, ռուբ.
31337Բարձրաձայն կարդալը 1 000 150


Մեր օրինակի արդյունքը.

Սեղանի բաժանում

Հաջորդը HTML պիտակներօգտագործվում են սեղանը մասերի բաժանելու համար.

  • Նշել օգտագործվում է աղյուսակում խմբի վերնագիր պարունակելու համար («աղյուսակի վերնագիր», մի շփոթեք վերնագրերի հետ):
  • Նշել օգտագործվում է աղյուսակի «ստորատակը» (footer) պարունակելու համար:
  • Նշել օգտագործվում է սեղանի (մարմինի) «մարմինը» պարունակելու համար։

Տարր պետք է օգտագործվի միայն մեկ անգամ մեկ աղյուսակում հետևյալ համատեքստում՝ տարրի ներսում

(որպես երեխա (ներդիր) տարր), եթե կան պիտակներ (սահմանում է աղյուսակի սյունակների խումբ) պետք է հետևել հետոայս տարրերը, բայց նախքանքան ցանկացած պիտակ , Եվ . Բացի այդ, տարրը պետք է ունենա մեկ կամ մի քանի պիտակներ ներսում (տարա ստեղծելու համար տող):

Տարրեր

, Եվ չեն ազդում աղյուսակի լռելյայն դասավորության վրա: Այնուամենայնիվ, հետ օգտագործելով CSS, դուք կարող եք ոճավորել այս տարրերը, ինչպես ցանկանում եք:

</span>Պիտակների օգտագործման օրինակ <thead><span>
(աղյուսակի անվանումը) և
style="background-color:silver"> style="background-color:coral" > style="background-color:khaki">
ԾառայությունԳին
Գումար 3 000
Բարձրաձայն կարդալը 1 000
Նվագում է պերֆորատոր 2 000


Մեր օրինակի արդյունքը.

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

Տարր

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

Տարր

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

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

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

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

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

Խմբագրի ընտրություն

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

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

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

Աղյուսակի ստեղծման ալգորիթմ

Նախ, եկեք պատրաստենք կարճ ալգորիթմ, թե ինչպես կարելի է աղյուսակ կազմել HTML-ով: Սա անհրաժեշտ է, որպեսզի հասկանաք յուրաքանչյուր քայլի հաջորդականությունը: Այնուհետև մենք ճշգրիտ կվերլուծենք, թե ինչպես պետք է կատարել կետերից յուրաքանչյուրը:

Սկսենք նախապատրաստական ​​քայլերից։

1. Թղթի վրա գծեք սեղանի սխեմատիկ պատկերը:

2. Հաշվեք տողերի և բջիջների քանակը: Եթե ​​վերջիններիս թիվը տարբեր է, հաշվում ենք յուրաքանչյուր տողի համար առանձին։

3. Որոշեք տողում վերնագրի բջիջների քանակը (օրինակ՝ «Ոչ», «Անուն» բջիջները և այլն):

4. Գրում ենք աղյուսակի հիմնական պարամետրերը՝ գույնը, բարձրությունը և լայնությունը, տեքստի հավասարեցումը, ընդհանրապես այն ամենը, ինչ ձեզ անհրաժեշտ է թվում։

1. Տեղադրեք աղյուսակի պիտակները:

2. Տեղադրեք տողերի պիտակներ՝ հիմնվելով ձեզ անհրաժեշտ թվի վրա:

3. Տողերում տեղադրում ենք բջիջների պիտակները (կանոնավոր և մեծատառեր)՝ նաև ելնելով ձեր թղթի վրա գրված թվից։

4. Սահմանեք պարամետրերը աղյուսակի համար որպես ամբողջություն:

5. Անհրաժեշտության դեպքում սահմանեք ցուցիչներ առանձին բջիջների համար:

6. Լրացրեք մեր բջիջները տեքստով:

Ստեղծեք աղյուսակ

Այսպիսով, դուք ընտրել եք խմբագիր, հիմա եկեք պարզենք, թե ինչպես ստեղծել աղյուսակ 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



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

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

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

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

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

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

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

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

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




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

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




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

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



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

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

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



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

), զուգակցված է, այսինքն՝ մեր կառուցումը սկսվում է այս հատկորոշիչով և ավարտվում է
.

Տեղադրելով աղյուսակի պիտակները, մենք անցնում ենք տողերի և բջիջների ստեղծմանը:

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

Վերնագրի բջիջների համար օգտագործեք զուգակցված տարր .

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

Ինչպե՞ս կարող է այն թվալ: Դրա նման:

  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • Թիվ p / pԱզգանունը
    1;
  		• Իվանովը
    .

Ինչպես տեսնում եք, դրանում ոչ մի բարդ բան չկա: Հիմնական բանը տողերի և բջիջների քանակի մեջ չշփոթվելն է: Հակառակ դեպքում սեղանը կարող է շեղվել:

Մենք ուսումնասիրել ենք HTML-ում աղյուսակի ստեղծումը, այժմ կարող ենք անցնել ինչպես բուն մատրիցայի, այնպես էլ նրա տողերի ու բջիջների պարամետրերին։

Սեղանի ընտրանքներ

Երբ կոդը գրված է, պետք է ուշադրություն դարձնել հետևյալ կետերին` եզրագծերի հետ հավասարեցում, ֆոն, տեքստ և այլն:

Աղյուսակի պարամետրերը դրված են պիտակի մեջ

. Դրանք ներառում են.

1. Սահման - եզրագծի լայնություն: Նշված է որպես ամբողջ թիվ: Լռելյայնորեն, ցանկացած աղյուսակի սահմանները զրո են:

2. Bordercolor - սահմանի գույն: Կարող է սահմանվել որպես hex կոդըգույնը (#00008B) և դրա անգլերեն անվանումը (DarkBlue): Լռելյայն այն միշտ մոխրագույն է:

3. Bgcolor - Սահմանված է նաև կոդով կամ անունով:

4. Align - տեքստի հավասարեցում սեղանի հետևում: Կանխադրվածը ձախից հավասարեցված է: Այս պարամետրի համար կան հետևյալ տարբերակները.

  • ձախ - փաթաթել դեպի աջ;
  • աջ - ձախ փաթաթան;
  • կենտրոն - ցուցադրեք սեղանը կենտրոնում առանց փաթաթելու:

5. Լայնություն և բարձրություն - սեղանի լայնությունը և բարձրությունը: Կարող է նշվել ինչպես պիքսելներով, այնպես էլ տոկոսով (համեմատած բրաուզերի պատուհանի չափի հետ):

Նշանակելով այս կամ այն ​​ցուցանիշը, դուք պետք է հատուկ ուշադրություն դարձնեք դիզայնին: Պարամետրին պետք է հաջորդի «հավասար» նշանը, որին հաջորդում է նշված արժեքը չակերտներում:

Ինչ վերաբերում է տեքստի գույնին, ապա այն ձևակերպված է այնպես, ինչպես սովորական տեքստը HTML ձևաչափով։

Սեղանի դասավորության օրինակ.

;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • Թիվ p / pԱզգանունը
    1;
  		• Իվանովը
    .

    Շարքի ընտրանքներ

    Այսպիսով, մենք արդեն պարզել ենք, թե ինչպես կարելի է աղյուսակ կազմել HTML-ով և սահմանել դրա հիմնական պարամետրերը: Բայց ի՞նչ, եթե մեզ անհրաժեշտ լինի ընդգծել մի գիծ: Պե՞տք է այն ձևաչափեմ այլ կերպ, քան աղյուսակի հիմնական տեքստը:

    Տողերի պարամետրերը գրված են պիտակի մեջ ճիշտ այնպես, ինչպես աղյուսակի տվյալները: Հետևյալ փոփոխականները կարող են սահմանվել տողի համար.

    1. Ձեզ արդեն հայտնի սահմանագիծ, սահմանագույն և bgcolor:

    2. Align - տեքստի հավասարեցում տողում: Կարող է վերցնել ձախ, կենտրոն և աջ արժեքները:

    3. Valign - այս թեգը տեքստը ուղղահայաց է հավասարեցնում: Վերցնում է հետևյալ արժեքները.

    • վերև - տեքստը հավասարեցված է վերին եզրագծին;
    • միջին - կենտրոնում;
    • ներքև - ներքևի եզրագծի երկայնքով:

    Գծի ձևաչափման օրինակ.

    • ;
    • Թիվ p / p;
    • Ազգանունը;
    • .

    Բջջային ընտրանքներ

    Եվ վերջին բանը, որին արժե ուշադրություն դարձնել նրանց համար, ովքեր ցանկանում են իմանալ, թե ինչպես կարելի է աղյուսակ կազմել HTML-ով, առանձին բջիջների պարամետրերն են՝ ինչպես սովորական, այնպես էլ մեծատառ: Փաստորեն, ամեն ինչ արվում է ճիշտ այնպես, ինչպես սեղանի կամ տողի համար: Միակ բանն այն է, որ ավելացվում են ևս երկու կարևոր տարրեր.

    1.Colspan- տրված պարամետրնշում է սյունակների թիվը, որը կարող է տարածվել բջիջը:

    2. Rowspan - արդեն ցույց է տալիս տողերի քանակը, որը զբաղեցնում է այս բջիջը:

    Քանի որ դիզայնը չի տարբերվում տող գրելուց, մենք օրինակ կոդ չենք տա:

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

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

    Ինչ վերաբերում է աղյուսակը HTML-ում տեղադրելուն, ապա բավական է պատճենել դրա ծածկագիրը և տեղադրել այն հենց ձեր էջի այն տեղում, որտեղ, ըստ Ձեզ, այն պետք է գտնվի։

    Մի վախեցեք փորձարկումներից, և շուտով դուք կհասցնեք կատարելության աղյուսակներ ստեղծելու տեխնիկան: Հաջողություն!

    Առաջադրանք

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

    Լուծում

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

    . Այս տարրը ծառայում է որպես բեռնարկղ այն տարրերի համար, որոնք սահմանում են աղյուսակի բովանդակությունը: Ցանկացած աղյուսակ բաղկացած է տողերից և բջիջներից, որոնք տեղադրվում են համապատասխանաբար պիտակների միջոցով Եվ
    . Աղյուսակը պետք է պարունակի առնվազն մեկ բջիջ (օրինակ 1): Թույլատրված է պիտակի փոխարեն օգտագործել պիտակը . Տեքստը բջջի մեջ՝ ոճավորված պիտակով , բրաուզերի կողմից ցուցադրվում է թավ և կենտրոնացված է բջիջում: Հակառակ դեպքում, պիտակների միջոցով ստեղծված բջիջների միջև եղած տարբերությունները Եվ Ոչ

    Օրինակ 1. Ստեղծեք աղյուսակ

    HTML5 IE Cr Op Sa Fx

    սեղանի պիտակ

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


    Բջիջների դասավորությունը և դրանց տեսքը ներկայացված է նկ. 1.

    Բրինձ. 1. Չորս բջիջներով աղյուսակ ստեղծելու արդյունքը

    Պիտակի սահմանային հատկանիշը

    թույլատրվում է ավելացնել միայն դատարկ արժեքով (
    ) կամ հավասար է 1-ի: Բոլոր մյուս արժեքները չեն վավերացվում:

    Բջիջների ներսում լուսանցքները կառավարելու համար օգտագործվում է padding style հատկությունը, որն ավելացվում է td ընտրիչին։ Բջիջների միջև հեռավորությունը փոխվում է աղյուսակի ընտրիչին ավելացված սահմանային տարածության հատկությամբ (օրինակ 2), IE-ն դա հասկանում է միայն 8.0 տարբերակից:

    Օրինակ 2. Լուսանցքներ բջիջների ներսում

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    սեղանի պիտակ

    Վերնագիր 1Վերնագիր 2
    Բջջ 3Բջջ 4


    Դաշտերի և բջիջների միջև հեռավորության աղյուսակը ներկայացված է նկ. 2. Նման արդյունքի կարելի է հասնել բջիջների շուրջ սպիտակ շրջանակով:

    Բրինձ. 2. Դաշտեր աղյուսակի բջիջներում