Ինչպես կատարել կարկանդակ աղյուսակ Excel-ում: Կլորացված անկյուններ, որոնք ավելացնում են տողեր և սյունակներ

Այս հոդվածում ես որոշեցի պատմել, թե ինչպես կարելի է սեղան պատրաստել կլորացված անկյուններով: Համոզված եմ, որ համացանցում շրջելիս հավանաբար հանդիպել եք այսպիսի սեղանների:

Ես ձեզ հենց այդպիսի աղյուսակների մասին կասեմ։ Իհարկե, նման սեղան կարելի է պատրաստել մի քանի ձևով, այս մեթոդը, որի մասին ես ձեզ կպատմեմ, ամենապարզն է և ամենագեղեցիկը, քանի որ եթե նման աղյուսակը պատրաստում եք այլ ձևով, ապա ստիպված կլինեք սովորել JAVA-ն։ և միավորեք այն CSS-ի հետ, և այդպիսով ձեր կոդը կդառնա շատ ծանր ու բարդ:

Այս մեթոդը օգտագործում է միայն HTML, բայց մենք ստիպված կլինենք ստեղծել պատկերներ, այսինքն՝ աղյուսակի անկյունները։ Անկյունները ստեղծելու համար մեզ անհրաժեշտ կլինի Photoshop կամ ցանկացած այլ գրաֆիկական ծրագիր, որը ձեզ դուր է գալիս (նույնիսկ MS Point), բայց որպեսզի կարողանաք կառավարել այն: Այս հոդվածում ես ձեզ կասեմ, թե ինչպես դրանք պատրաստել Photoshop-ում:

Եկեք ուղղակիորեն անցնենք աղյուսակի ստեղծմանը: Աղյուսակ ստեղծելու համար բացեք Dreamweaver-ը կամ ցանկացած այլ HTML խմբագրիչ: Մենք ստեղծում ենք նոր փաստաթուղթ կամ բացում ենք արդեն ստեղծվածը և այնտեղ ստեղծում ենք աղյուսակը ինքնին 3 տողով և 2 սյունակով.

Գնացեք Photoshop, վերցրեք Rounded Rectangle Tool-ը և նկարեք կլորացված ուղղանկյուն, իսկ կլորացման շառավիղը դրեք այնպես, ինչպես ուզում ենք, որ աղյուսակը ունենա, ես դրեցի այն 30 պիքսել:

Նախ, ֆոնային շերտը և շերտը միացրեք ուղղանկյուն պատկերով, դա անելու համար շերտերի վահանակում սեղմեք և պահեք Ctrl ստեղնը, ընտրեք վերին և ներքևի շերտը և սեղմեք Ctrl + E:

Այժմ այս ուղղանկյունից մենք պետք է ինքնուրույն հանենք անկյունները, դրա համար վերցնում ենք Recatangular Marquee Tool-ը, վերևի վահանակում ընտրում ենք Style: Fixed Size Width և Height դաշտերում, գրում ենք Radius-ի արժեքները, որոնք դուք նշել եք: Քայլ 2. Սեղմեք պատկերների վրա, ձեր քառակուսու դիմաց կհայտնվի մի կետագիծ, այնպես որ կլորացված անկյունն ամբողջությամբ լինի քառակուսու մեջ:

Սեղմեք Ctrl + C (այն, ինչ կա քառակուսի ներսում, այսինքն՝ մեր անկյունը պատճենելու համար, հիմա պետք է ստեղծենք նոր պատկեր, որպեսզի այնտեղ տեղադրենք նախկինում պատճենված անկյունը, գնացեք՝ File-New...-Ok): և անմիջապես տեղադրեք մեր անկյունը Ctrl + V

Ստեղծված աղյուսակում երկրորդ շարքը պետք է միավորել մեկի մեջ, քանի որ այնտեղ պետք է գրվի տեքստ:
Այժմ մենք տեղադրում ենք մեր պատկերները (անկյունները) մեր սեղանի մեջ:

Տեղադրված նկարները (ներքևից աջ և աջ վերևով) պետք է հավասարեցվեն աջ կողմում:
Այժմ վերջին քայլը. հարկավոր է սեղանին տալ ֆոնի գույն, ինչպես անկյունները:

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

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

Աղյուսակում 1-ը ցույց է տալիս արժեքների տարբեր քանակություն և բլոկի տեսակը, որը ստացվում է այս դեպքում:

Կոդ	Նկարագրություն	Դիտել
div (սահմանային շառավիղ՝ 10px;)	Կլորացման շառավիղը միանգամից բոլոր անկյունների համար:
div (սահմանային շառավիղ՝ 0 10px;)	Առաջին արժեքը սահմանում է վերևի ձախ և ներքևի աջ անկյունների շառավիղը, երկրորդ արժեքը սահմանում է վերևի աջ և ներքևի ձախ անկյունների շառավիղը:
div (սահմանային շառավիղ՝ 20px 10px 0;)	Առաջին արժեքը սահմանում է վերին ձախ անկյունի շառավիղը, երկրորդը և՛ վերին աջը, և՛ ստորին ձախը, իսկ երրորդ արժեքը՝ ստորին աջը:
div (սահմանային շառավիղ՝ 20px 10px 5px 0;)	Հերթականորեն սահմանում է վերին ձախ, վերին աջ, ստորին աջ և ստորին ձախ անկյունների շառավիղը:

Օրինակ 1-ը ցույց է տալիս, թե ինչպես կարելի է բլոկ ստեղծել կլորացված անկյուններով:

Օրինակ 1. Բլոկի անկյուններ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Բրինձ. 1. Բլոկ կլորացված անկյուններով

Հետաքրքիր էֆեկտ կարելի է ստանալ, եթե կլորացման շառավիղը սահմանեք տարրի բարձրության և լայնության կեսից ավելին: Այս դեպքում դուք կստանաք շրջանակ: Օրինակ 2-ը ցույց է տալիս, թե ինչպես կարելի է նկարով շրջանաձև կոճակ ստեղծել:

Օրինակ 2. Կլոր կոճակ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Բրինձ. 2. Կլոր կոճակ

Opera բրաուզերում, կլորացվում է դեպի սխալ է կիրառվում, եթե սահմանային հատկության միջոցով սահմանագիծը նշված չէ:

Border-radius հատկությունը կարող է զուգակցվել այլ հատկությունների հետ, օրինակ՝ ստվեր ավելացնելով տարրի վրա։ Օրինակ 3-ում կազմված է շրջանակների մի շարք, որոնցից մեկն ընդգծված է տուփ-ստվերի միջոցով: Այս հավաքածուն կարող է օգտագործվել էջերի կամ լուսանկարների միջով նավարկելու համար:

Օրինակ 3. Փայլ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Բրինձ. 3. Շողալ շրջանի շուրջ

Օգտագործելով սահմանային շառավիղը, դուք կարող եք ստեղծել ոչ միայն շրջան, այլև էլիպս, ինչպես նաև բլոկի էլիպսաձև կլորացում: Դա անելու համար հարկավոր է գրել ոչ թե մեկ արժեք, այլ երկու՝ իրարից անջատված կտրվածքով: 20px/10px գրելը նշանակում է, որ ֆիլեի հորիզոնական շառավիղը կլինի 20 պիքսել, իսկ ուղղահայացը՝ 10 պիքսել։ Օրինակ 4-ը ցույց է տալիս, թե ինչպես կարելի է ստեղծել էլիպսաձև անկյուններ՝ լուսանկարին զավեշտական ​​գրքի ոճով մակագրություն ավելացնելու համար:

Օրինակ 4. Էլիպսներ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Դուք ինքներդ ձեր ուսուցիչն եք

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

Բրինձ. 4. Էլիպսաձեւ անկյունների օգտագործումը

Կարող եք նաև փոխել անկյունների տեսքը պատկերների վրա՝ ավելացնելով border-radius հատկությունը img ընտրիչին, ինչպես ցույց է տրված Օրինակ 5-ում:

Օրինակ 5. Պատկերներ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Նախքան աղյուսակ ստեղծելը, դուք պետք է որոշեք տողերի և սյունակների քանակը: Հաջորդը, ընտրեք համապատասխան էջի կողմնորոշումը: Լայն սեղանի համար նախընտրելի է ընտրել լանդշաֆտ, նեղ սեղանի համար՝ դիմանկար։

Տեղադրեք աղյուսակը տվյալ քանակի բջիջներով ձեզ համար հարմար ձևով: Աղյուսակների տեղադրման մեթոդների մասին.

Սեղանի ճշգրիտ չափի սահմանում

Հաջորդ քայլը թույլ կտա մեզ սահմանել սեղանի խիստ արտաքին չափսերը:

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

Ճշգրիտ չափերը նշելու համար անցեք գործիքի սնուցում:

Բացվող պատուհանում, ներդիրում ԱղյուսակՆշեք վանդակը (նշված է սլաքով) և գրեք ցանկալի աղյուսակի լայնությունը: Սեղմեք OK:

Եթե ​​դուք չեք կարող փոխել սյունակների լայնությունը ցանկալի չափի, իսկ մեկի լայնությունը փոխելիս փոխվում է մյուսի լայնությունը, ապա վանդակը հանելը կվերացնի այս անհարմարությունը:

Այժմ սեղանի արտաքին չափերը կսահմանափակվեն։ Դուք կկարողանաք ազդել միայն աղյուսակի ներսում գտնվող սյունակների լայնության վրա:

Գծի բարձրության սահմանում

Ամբողջ աղյուսակում տողերի բարձրությունը նույնը սահմանելու համար ընտրեք այն: Հաջորդը, գործիքագոտում ընտրեք Սեղանների հետ աշխատանք – Դասավորություն – Հատկություններ.

Երկխոսության վանդակում անցեք ներդիր Գիծնշեք բարձրության վանդակում և նշեք տողի պահանջվող բարձրությունը և ռեժիմը (նշված կարմիր շրջանակով): Նվազագույնը– կսահմանի նվազագույն արժեքը բոլոր տողերի համար: Առավելագույն բարձրությունը կսահմանափակվի միայն բջիջների պարունակությամբ: Հետևաբար, աղյուսակում տողերի բարձրությունը տարբեր կլինի, քանի որ դա կախված է տեղեկատվության բովանդակությունից: Եթե ​​ցանկանում եք խստորեն սահմանափակել տողի բարձրությունը, ապա սահմանեք ռեժիմը Հենց այդպես.

Մեկ տողի չափերը սահմանելու համար պարզապես աջ սեղմեք դրա վրա՝ համատեքստի ընտրացանկը բացելու համար: Որից ընտրել թիմ Սեղանի հատկություններըսահմանված տողի պարամետրերը սահմանելու համար:

Սյունակների լայնության սահմանում

Սյունակի չափը նշելու համար աջ սեղմեք դրա ցանկացած բջիջի վրա և կանչեք աղյուսակի հատկությունները: Գնացեք ներդիր Սյունակ, սահմանեք պահանջվող լայնության չափը և սեղմեք կոճակը Հաջորդ սյունակկամ Նախորդ սյունակ,անցեք աղյուսակի մյուս սյունակների չափերը նշելուն: Այնուհետեւ սեղմեք OK:

Այժմ ձեր աղյուսակը խստորեն կհամապատասխանի նշված չափերին:

P.S.Բլոգի ընթերցող Սերգեյ Յակովլևիչ Գրեբենյուկի խնդրանքով ես Microsoft Word-ով շախմատի տախտակ պատրաստեցի սեղանի միջոցով, իսկ խաղաքարերը՝ ավտոմատ ձևերով: Սա անհրաժեշտ էր տարբեր շաշկի դիրքերի պատկերներ ստեղծելու համար։ Ահա Word փաստաթղթի հղումը https://yadi.sk/i/O2SmHvyF3PvujrԴիտեք տեսանյութը՝ տեսնելու, թե ինչպես կարող եք դասավորել կտորները և նկարել դիրքի սքրինշոթը՝ օգտագործելով , որը ներառված է Windows օպերացիոն համակարգի 7 և ավելի բարձր տարբերակում:

Word-ի հնարավորությունները աներևակայելի հզոր են: Երբեմն ես ինքս զարմանում եմ, թե ինչ չի լինում:

Հարգելի ընթերցող. Դուք հոդվածը դիտել եք մինչև վերջ։
Ձեր հարցի պատասխանը ստացե՞լ եք։Մի քանի բառ գրեք մեկնաբանություններում։
Եթե ​​չես գտել պատասխանը, նշեք, թե ինչ էիք փնտրում.

Ենթադրենք, դուք ունեք տվյալներ աշխատողների մասին՝ գործարքների քանակը և եկամուտը: Դուք պետք է ցուցադրեք տվյալները տեսողական ձևով, օրինակ՝ կարկանդակ գծապատկերով:

Այս դեպքում շրջանակը կնշանակի բոլոր գործարքների կամ բոլոր եկամուտների հանրագումարը, այսինքն՝ 100%

Կարկանդակ գծապատկեր կառուցելիս Excel-ը ավտոմատ կերպով կհաշվի մասնաբաժինը և այն կներկայացնի գեղեցիկ և տեսողական պատկերի տեսքով։

Հրահանգներ, թե ինչպես կազմել կարկանդակ գծապատկեր Excel 2007 կամ 2010 թվականներին

1. Գործարքների տվյալների հիման վրա կարկանդակ գծապատկեր կառուցելու համար անհրաժեշտ է ընտրել արժեքների պահանջվող միջակայքը B3:C8(սյունակ լրիվ անվանումով և սյունակ՝ գործարքներով) ինչպես նկարում: Մի մոռացեք բռնել սեղանի վերնագիրը:
2. Հաջորդը, անցեք բաժին Տեղադրել | Դիագրամներ
3. Դիագրամներ բաժնում ընտրեք կարկանդակ գծապատկեր
4. Դուք պետք է ընտրեք ցանկալի կարկանդակ գծապատկերի տեսակը բացվող ցանկից:

Վերջ. կարկանդակ աղյուսակը պատրաստ է:

Կարկանդակ գծապատկերի վրա արժեքները ցուցադրելու համար աջ սեղմեք շրջանագծի վրա ցանկացած վայրում և ընտրեք « Ավելացնել տվյալների ստորագրություններ”

Եթե ​​Ձեզ անհրաժեշտ է մեկ այլ սյունակի համար կարկանդակ գծապատկեր կազմել, մեր օրինակում դա եկամուտ է, ապա նախ պետք է նաև ընտրել մեզ հետաքրքրող սյունակները: Դա անելու համար դուք պետք է ընտրեք այս միջակայքերը՝ սեղմած պահելով ստեղնը Ctrlստեղնաշարի վրա

Անհրաժեշտության դեպքում տեղադրում ենք նաև տվյալների ստորագրություններ։

Ինտերնետում կան բազմաթիվ օրինակներ և ձեռնարկներ՝ բլոկի կամ սեղանի անկյունները կլորացնելու համար, սակայն, որպես կանոն, այդ ձեռնարկները հիմնված են պատկերների օգտագործման կամ լրացուցիչ բլոկների օգտագործման վրա:

Այսօրվա ձեռնարկում ես ձեզ ցույց կտամ, թե ինչպես կարող եք կլոր սեղանի անկյունները՝ օգտագործելով միայն CSS.

Ուղղակի նշում (երկրորդ աղյուսակը տարբերվում է վերին շարքի բջիջների դասավորությունից).

Curabitur a ultricies urna	Phasellus mollis
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero auctor vestibulum.	0

Նուլլա ծանրաբեռնվածություն.	Ուրնա օուգ.	Nunc iaculis bibendum.
		Vestibulum tempor	Laoreet eros semper ut.
Vivamus quis nisi lacus.	Cras id felis eu purus tempor dictum in at lorem.	facilisis iaculis magna diam id quam. էլիֆենդ.	Pellentesque cursus, nunc ut facilisis hendrerit

1. Կլորացրեք անկյունները անմիջապես սեղանի մոտ (սեղանի պիտակ):

BCcontentTables (սահման՝ 1px կոշտ #CCCCCC; լայնություն՝ 100%, moz-border-radius՝ 10px; /* Firefox */ -webkit-border-radius՝ 10px; /* Safari, Google Chrome */ -khtml-border-radius 10px: /* KHTML */ -o-border-radius: 10px /* Opera */ -ms-border-radius մարժա: 0.7em auto ;

2. Հեռացրեք ցանկացած ֆոն առաջին տողից:

Tr.bCTable_Header (ֆոն՝ ոչ մեկը;)

3. Օգտագործելով pseudo-class:first-child և combinator > ընտրեք աղյուսակի առաջին բջիջը: Կլորացրեք առաջին բջիջի վերին ձախ անկյունը: Առաջին շարքի ֆոնը բաղկացած է այս շարքի բջիջների ֆոնից:

Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- border-radius:10px 0 0 0;o-border-radius:10px 0 0 0 -khtml-border-radius: ֆոնի գույնը:#00843C;)

4. Օգտագործելով կեղծ դասը՝ վերջին երեխա և կոմբինատոր > ընտրեք առաջին տողի վերջին բջիջը: Դրա համար մենք կլորացնում ենք վերին աջ անկյունը:

Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- սահման-շառավիղ:0 10px 0 0 -o-border-radius:0 10px 0 0 -khtml-border-radius: 0 10px 0;

5. Կլորացրեք վերջին տողի ստորին անկյունները: Մի մոռացեք հեռացնել ֆոնը վերջին տողից; Շարքի ֆոնը սահմանվում է վերջին տողի բջիջների ֆոնի վրա:

BCcontentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius. 10px -o-border-radius:0 0 10px 10px -khtml-border-radius: 0 0 10px 10px;

6. Այնուհետև 3-4 կետերի անալոգիայով վերջին տողում կլորացնում ենք առաջին և արտաքին բջիջների անկյունները։

BCcontentTables tr:last-child td(background-color:#F1F1F2;) .bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 px0; -moz-border-radius:0 0 0 10px -ms-border-radius:0 0 0 10px -o-border-radius:0 0 0 -khtml-border-radius: bContentTables tr:last-child td:last-child (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- շառավիղ: 0 10px 0 -o-border-radius:0 0 10px 0 -khtml-border-radius: 0 0 10px 0;

Բրաուզերի աջակցություն

 

Կարող է օգտակար լինել կարդալ.

• Մաքրում է հավելվածի ֆայլերը;
• Լուսանկարների խորը ակնարկ Mac-ի համար. այն ամենը, ինչ դուք պետք է իմանաք iPhoto-ի և Aperture-ի փոխարինման մասին;
• CD չեյնջերի էմուլյատոր. կարո՞ղ եք դա ինքներդ պատրաստել:;
• Ինչպե՞ս կարող եմ փոխել իմ ազգանունը կոնտակտում:;
• ՄՏՍ-ից «Հեշտ վճարում» ծառայության անջատում;
• Հարցումների ստեղծում Telegram-ում Ինչպես հավանել Telegram-ում;
• Sony Xperia-ի տեսախցիկի առաջատար ինժեներ բջջային լուսանկարչության, Sony տեխնոլոգիաների և ապագայի զարգացման համար;
• Ինչպե՞ս տեղափոխել բջջային խաղերի պահումները այլ սարքի:;