Ինչպես գունավորել տողը css աղյուսակում: Ընտրելով որոշակի տեսակի տարրեր իրենց ինդեքսով

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

Այս հոդվածում ես ձեզ կներկայացնեմ HTML աղյուսակների ոճավորման բարդությունները, և դուք կսովորեք նոր CSS հատկություններ, որոնք նախատեսված են այս նպատակներին հասնելու համար:

Հիպերտեքստի նշագրման լեզուն HTML-ը մեզ մեծ թվով հնարավորություններ է տվել՝ կապելու CSS ոճերը տասը եզակի պիտակների հետ, որոնք նախատեսված են աղյուսակների հետ աշխատելու համար, ես առաջարկում եմ դրանք կրկնել հետագա ուսումնասիրությունից առաջ.

(աղյուսակի «ստորատակը») ֆոնի գույնը – մարջան, տարրի համար («աղյուսակի վերնագիր») սահմանել ֆոնի գույնը արծաթ.

Տարրերի համար

, որոնք գտնվում են տարրի ներսում (սեղանի մարմին) սահմանել, որ ֆոնի գույնը փոխվի սավառնելիս (կեղծ դաս :hover) գ սպիտակմեկ գույնի համար խակի(ամբողջ տողը ընդգծված է):

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

Բրինձ. 153 Աղյուսակներում տողերի ոճավորման օրինակ

Հետևյալ օրինակը նայում է աղյուսակի բջիջներին (հատկություն) անկյունների կլորացման կիրառմանը:

) մենք սահմանել ենք ներքևի լիցքը 19 պիքսել: Հուսով եմ անհավասար թվերը ձեզ չեն անհանգստացնում :)

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

Բջիջների միջև տարածություն

Վերևում քննարկված օրինակից հետո դուք կարող եք նկատել, որ մենք դեռ ունենք բաց աղյուսակի բոլոր բջիջների միջև: Եկեք նայենք, թե ինչպես հեռացնել աղյուսակի բջիջների միջև տարածությունը կամ ավելացնել այն:

Հարակից բջիջների սահմանների միջև հեռավորությունը սահմանելու համար դուք պետք է օգտագործեք CSS հատկության սահմանային միջակայքը:

սահմանային տարածություն՝ 30px 10px;

1	2	3
2
3

սահմանային տարածություն՝ 0;

1	2	3
2
3

սահմանների տարածություն՝ 0,2 մ;

1	2	3
2
3

Այս օրինակում մենք.

• բոց: ձախ): Եթե ​​բաց եք թողել լողացող տարրերի թեման, ապա միշտ կարող եք վերադառնալ դրան այս ձեռնարկում - «»:
• Բացի այդ, մենք աղյուսակների համար սահմանել ենք ճիշտ լուսանցքը 30px և սահմանել աղյուսակների ուղղահայաց հավասարեցումը (տարրի վերին մասը հավասարեցված է ամենաբարձր տարրի վերին մասի հետ): Մենք կվերադառնանք այս գույքի մանրամասն քննարկմանը այս հոդվածում:

) – համարձակ ոճ։

Սեղանի բջիջների համար (վերնագիր և տվյալների բջիջներ) մենք սահմանեցինք 1px պինդ եզրագիծ #F50 վեցանկյուն գույնով և դրեցինք 19px լցոնում բոլոր կողմերից:

Դասարանի հետ առաջին սեղանի համար .առաջինմենք սահմանում ենք աղյուսակի բջիջների միջև եղած տարածությունը (սահմանների տարածության հատկություն) 30px 10px դասի հետ երկրորդ աղյուսակի համար։ .երկրորդհավասար է զրոյի, դասի հետ երրորդ աղյուսակների համար .երրորդհավասար է 0,2 մ.

Խնդրում ենք նկատի ունենալ, որ եթե սահմանների տարածության հատկության մեջ նշված է երկարության միայն մեկ արժեք, ապա այն ցույց է տալիս միջակայքերը, ինչպես հորիզոնական, այնպես էլ ուղղահայաց, և եթե նշված են երկու երկարության արժեքներ, ապա առաջինը որոշում է հորիզոնական հեռավորությունը, իսկ երկրորդը ՝ ուղղահայաց: . Հարակից բջիջների սահմանների միջև հեռավորությունը կարող է սահմանվել CSS միավորներով (px, cm, em և այլն): Բացասական արժեքներ չեն թույլատրվում.

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

Ցույց տալ եզրագծերը սեղանի բջիջների շուրջ

Դու կարող ես ասել: - Այսպիսով, մենք հեռացրինք բջիջների միջև ընկած տարածությունը՝ օգտագործելով 0 արժեք ունեցող սահմանների միջև եղած հատկությունը, բայց ինչո՞ւ են մեր բջիջների սահմանները այժմ հատվում:

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

Դա անելու համար դուք պետք է օգտագործեք border-collapse CSS հատկությունը: Բավական տարօրինակ է, սակայն, օգտագործելով border-collapse հատկությունը collapse արժեքով, բջիջների միջև տարածությունը հեռացնելու լավագույն միջոցն է՝ առանց դրանց միջև կրկնակի սահմաններ ստանալու:

Եկեք համեմատենք սահմանների վարքագիծը 0 արժեքով սահմանների տարածության հատկությունը և collapse արժեքով border-collapse հատկությունն օգտագործելիս.

սահմանային տարածություն՝ 0;

1	2	3
2
3

սահման-փլուզում` փլուզում;

1	2	3
2
3

Այս օրինակում մենք.

• Մենք մեր աղյուսակները դարձրեցինք լողացող և տեղափոխեցինք ձախ (լողացող՝ ձախ), աջ կողմում դրեցինք դրանց արտաքին լուսանցքը 30px:
• Սահմանեք աղյուսակի անունը (պիտակ

) – համարձակ ոճ։

Սեղանի բջիջների համար (վերնագիր և տվյալների բջիջներ) մենք սահմանեցինք 5px ամուր եզրագիծ #F50 վեցանկյուն գույնով և սահմանեցինք ֆիքսված լայնությունը 50px և բարձրությունը 75px:

Դասարանի հետ առաջին սեղանի համար .առաջինսեղանի բջիջների միջև տարածությունը սահմանում ենք զրոյի (սահմանների միջև հեռավորությունը՝ 0 ;), իսկ երկրորդ աղյուսակի համար՝ դասի հետ .երկրորդսահմանել սահմանի փլուզման հատկությունը collapse, որը հնարավորության դեպքում փլուզում է բջիջների սահմանները:

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

Դատարկ բջիջների վարքագիծը

Դուք կարող եք օգտագործել CSS՝ սահմանելու համար, թե արդյոք աղյուսակի դատարկ բջիջների սահմաններն ու ֆոները պետք է ցուցադրվեն, թե ոչ: Այս վարքագիծը վերահսկվում է դատարկ բջիջներ հատկությամբ, որը լռելյայնորեն, ինչպես դուք կարող եք նկատել նախորդ օրինակներից, ցուցադրում է դատարկ բջիջներ:

Անցնենք օրինակին.

դատարկ բջիջներ. ցույց տալ;

1	2	3
2		☺
3	☺

դատարկ բջիջներ. թաքցնել;

1	2	3
2		☺
3	☺

Հասկանալ, թե ինչպես է աշխատում դատարկ բջիջների հատկությունը այս օրինակից, շատ պարզ է, եթե այն սահմանված է hide-ի համար, ապա դատարկ բջիջները և դրանցում ֆոնը կթաքցվեն, եթե դրված է ցույց տալ (կանխադրված), ապա դրանք կցուցադրվեն:

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

Դիտարկենք սեղանների ձևավորման մեկ այլ պարզ հատկություն՝ caption-side , որը սահմանում է աղյուսակի վերնագրի դիրքը (աղյուսակի վերևում կամ ներքևում): Լռելյայնորեն, caption-side հատկությունը դրված է վերևում, որը տեղադրում է ենթագիրը աղյուսակի վերևում: Աղյուսակի տակ վերնագիր տեղադրելու համար անհրաժեշտ է օգտագործել գույքը, որի արժեքը ներքևում է:

Եկեք նայենք այս հատկության օգտագործման օրինակին.

Վերնագիր աղյուսակի վերևում

Անուն	Գին
Ձուկ	350 ռուբլի
Միս	250 ռուբլի

Գնացեք աղյուսակից ներքև

Անուն	Գին
Ձուկ	350 ռուբլի
Միս	250 ռուբլի

Այս օրինակում մենք ստեղծել ենք երկու դաս, որոնք վերահսկում են աղյուսակի վերնագրի դիրքը: Առաջին դասարան ( .վերնագիր) դնում է աղյուսակի վերնագիրը դրա վերևում, մենք այն կիրառել ենք առաջին աղյուսակի վրա, իսկ երկրորդ դասը ( .bottomCaption) տեղադրում է աղյուսակի վերնագիրը դրա տակ, մենք այն կիրառում ենք երկրորդ աղյուսակի վրա։ Դասարան .վերնագիրունի վերնագրի կողմի լռելյայն հատկության արժեքը և ստեղծվել է ցուցադրական նպատակներով:

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

Հորիզոնական և ուղղահայաց հավասարեցում

Շատ դեպքերում, երբ աշխատում եք աղյուսակների հետ, ձեզ հարկավոր է կարգավորել բովանդակության հավասարեցումը վերնագրի և տվյալների բջիջներում: Text-align հատկությունը օգտագործվում է հորիզոնական հավասարեցման համար, ինչպես ցանկացած տեքստային տեղեկատվության: Մենք քննարկել ենք այս հատկության օգտագործումը տեքստի համար ավելի վաղ «» հոդվածում:

Բջիջներում բովանդակության հավասարեցումը սահմանելու համար դուք պետք է օգտագործեք հատուկ հիմնաբառեր՝ text-align հատկությամբ: Եկեք նայենք այս հատկության համար հիմնաբառերի օգտագործմանը հետևյալ օրինակում։

Իմաստը	Նկարագրություն
ձախ	Հավասարեցնում է բջջային տեքստը դեպի ձախ: Սա լռելյայն արժեքն է (եթե տեքստի ուղղությունը ձախից աջ է):
ճիշտ	Հավասարեցնում է բջջային տեքստը դեպի աջ: Սա լռելյայն արժեքն է (եթե տեքստի ուղղությունը աջից ձախ է):
կենտրոն	Հավասարեցնում է բջջի տեքստը կենտրոնին:
արդարացնել	Ձգում է տողերը այնպես, որ յուրաքանչյուր տող ունենա նույն լայնությունը (ձգում է բջջի տեքստը, որպեսզի համապատասխանի դրա լայնությանը):

Այս օրինակում մենք ստեղծել ենք չորս դաս, որոնք սահմանում են տարբեր հորիզոնական հավասարեցումներ բջիջներում և կիրառում դրանք ըստ աղյուսակի տողերի։ Բջջի արժեքը համապատասխանում է text-align հատկության արժեքին

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

Բացի հորիզոնական հավասարեցումից, դուք կարող եք նաև սահմանել ուղղահայաց հավասարեցում աղյուսակի բջիջներում՝ օգտագործելով ուղղահայաց հավասարեցում հատկությունը:

Խնդրում ենք նկատի ունենալ, որ աղյուսակի բջիջների հետ աշխատելիս կիրառվում են այս հատկության միայն հետևյալ արժեքները.

* - Աղյուսակային բջիջի վրա կիրառվող ենթաբաժին, սուպեր, տեքստի վերև, տեքստի ներքևի, երկարության և % արժեքները կվարվեն այնպես, ասես օգտագործում են բազային արժեքը:

Դիտարկենք օգտագործման օրինակ.

Իմաստը	Նկարագրություն
բազային	Հավասարեցնում է բջջի բազային գիծը ծնողի բազային: Սա լռելյայն արժեքն է:
գագաթ	Հավասարեցնում է բջիջի բովանդակությունը ուղղահայաց վերին եզրին:
միջին	Հավասարեցնում է բջիջի պարունակությունը ուղղահայաց մեջտեղում:
ներքեւ	Հավասարեցնում է բջիջի պարունակությունը ներքևի եզրով ուղղահայաց:

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

Բրաուզերում աղյուսակի դասավորությունը տեղադրելու ալգորիթմ

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

Բրաուզերի աղյուսակի դասավորությունը փոխելու համար տիպը ավտոմատվրա ամրագրված, դուք պետք է օգտագործեք CSS հատկության աղյուսակ-դասավորությունը ֆիքսված արժեքով:

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

Եկեք նայենք այս հատկության օգտագործմանը՝ օգտագործելով հետևյալ օրինակը.

սեղանի դասավորությունը՝ ավտոմատ;

Անուն	2009	2010	2011	2012	2013	2014	2015	2016
Ցորեն	125	215	2540	33287	695878	1222222	125840000	125

սեղանի դասավորությունը՝ ֆիքսված;

Անուն	2009	2010	2011	2012	2013	2014	2015	2016
Ցորեն	125	215	2540	33287	695878	1222222	125840000	125

Այս օրինակում մենք.

Սեղանի տողերի և սյուների ոճավորում

«Հոդվածում մենք արդեն մասամբ անդրադարձել ենք աղյուսակի տողերի և սյունակների ձևավորման մեթոդներին: Այս հոդվածում մենք դիտարկեցինք խմբային կեղծ դասի օգտագործումը, որը թույլ է տալիս փոխել տողերի ոճերը աղյուսակներում՝ օգտագործելով արժեքներ։ նույնիսկ (ազնիվ) Եվ տարօրինակ (տարօրինակ), կամ տարրական մաթեմատիկական բանաձեւ.

Եկեք վերանայենք այն տեխնիկան, որը մենք անդրադարձել ենք ավելի վաղ և ուսումնասիրենք աղյուսակներում տողերի և սյունակների ոճավորման նոր ուղիներ: Անցնենք օրինակներին։

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

Այս օրինակում մենք.

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

Եկեք անցնենք հաջորդ օրինակին, որտեղ մենք կդիտարկենք սեղանի տողերի ոճավորման տարբերակները:

Ծառայություն	Գին
Գումար	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

Այս օրինակում մենք.

• Մենք աղյուսակի լայնությունը սահմանել ենք մայր տարրի լայնության 100%-ի չափով, իսկ վերնագրի և տվյալների բջիջների համար սահմանել ենք 1px լայնությամբ ամուր եզրագիծ:
• Սահմանել տարրի համար

Նշել	Նկարագրություն
. Սահմանում է աղյուսակի բովանդակությունը: Սահմանում է աղյուսակի անվանումը: Սահմանում է աղյուսակի վերնագրի բջիջը: Սահմանում է աղյուսակի տող: Սահմանում է աղյուսակի տվյալների բջիջ: Օգտագործվում է աղյուսակում խմբի վերնագիրը պարունակելու համար (աղյուսակի վերնագիր): Օգտագործվում է սեղանի «մարմինը» պարունակելու համար։ Օգտագործվում է աղյուսակի «ստորատակը» պարունակելու համար: Սահմանում է նշված սյունակի հատկությունները պիտակի մեջ յուրաքանչյուր սյունակի համար Սահմանում է աղյուսակի սյունակների խումբ: Աշխատեք աղյուսակի հետքերով Սեղանի նահանջ 1 2 3 4 2 3 4 Այս օրինակում մենք. Մենք աղյուսակը տեղադրեցինք կենտրոնում՝ օգտագործելով արտաքին անցքերով հորիզոնական կենտրոնացման տեխնիկան (լուսանցք՝ 0 ավտոմատ): Սեղանի անվան համար (պիտակ

1	2	3	4	5

Այս օրինակում մենք.

• Մենք աղյուսակը կենտրոնացրել ենք արտաքին լուսանցքներով, վերնագրի բջիջների լայնությունն ու բարձրությունը սահմանել ենք 50px և նշել. թափանցիկեզրագիծ 5 պիքսել:
• Մենք պարզեցինք, որ վերնագրի բջիջի վրա սավառնելիս (կեղծ դասի :hover) այն ստանում է ֆոն Կապույտգույները, նարնջագույնտեքստի գույնը, եզրագիծը նարնջագույնգույները 5 պիքսել և կլորացման շառավիղը 100%:
• թափանցիկ սահմանանհրաժեշտ է սահմանի համար տարածք պահելու համար, որը կցուցադրվի սավառնելիս, եթե դա չկատարվի, աղյուսակը «կցատկի».

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

Հետևյալ օրինակը ներառում է HTML տարրերի օգտագործումը Եվ և դրանց ոճավորումը։

Դիմում No.	Ծառայություն	գինը, ռուբ.	Ընդամենը
1	Երգում	6 000	6 000
2	լվացումը	2 000	2 000
3	Մաքրում	1 000	1 000
4	Նեղություն	1 500	1 500
5	Ընթերցանություն	3 000	3 000

Այս օրինակում մենք.

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

Դե, վերջնական օրինակը, որը բավականին դժվար է հասկանալ և պահանջում է առաջադեմ գիտելիքներ CSS-ում, քանի որ այն շոշափում է այս դասընթացի մանրամասն ուսումնասիրության համար նախատեսված ապագա թեմաները:

Նախորդ օրինակում մենք հասկացանք, որ HTML տարրը Դուք կարող եք կիրառել միայն մեկ CSS հատկություն՝ ֆոնի գույնը (ֆոնային գույն), բայց դուք չեք կարող ուղղակիորեն սահմանել ֆոնի գույնը, երբ սավառնում եք այս տարրի վրա (:hover կեղծ դասը): Այս օրինակում մենք կանդրադառնանք, թե ինչպես կարելի է ընդգծել աղյուսակի սյունակը, օգտագործելով միայն CSS-ը:

Դիմում No.	Ծառայություն	գինը, ռուբ.	Ընդամենը
1	Երգում	6 000	6 000
2	լվացումը	2 000	2 000
3	Մաքրում	1 000	1 000
4	Նեղություն	1 500	1 500
5	Ընթերցանություն	3 000	3 000

Այս օրինակում մենք.

• Մենք սահմանել ենք, որ մեր աղյուսակը զբաղեցնի մայր տարրի 100%-ը, աղյուսակի բջիջները՝ զբաղեցնեն մայր տարրի 25%-ը և ունենան պիքսել 1 պիքսել կանաչ եզրագիծ, վերնագրի և տվյալների բջիջների բարձրությունը 45px է: Մենք հեռացրել ենք բջիջների միջև եղած տարածությունը՝ օգտագործելով սահման-կոլապս հատկությունը արժեքով .
• Եվ այսպես, օգտագործելով կեղծ տարրը ::after, երբ մենք յուրաքանչյուր տարրից հետո ավելացնում ենք բովանդակություն սավառնելիս: ::after կեղծ տարրը պահանջվում է օգտագործել բովանդակության հատկության հետ միասին, ինչի շնորհիվ մենք տեղադրում ենք բլոկի տարր, որն ունի ֆոնի գույն: անտառայինև ունի բացարձակ դիրքավորում.
• Բացարձակ դիրքավորումն այստեղ անհրաժեշտ է տարրը իր նախահայրի նշված եզրին համեմատելու համար, և նախահայրը պետք է ունենա դիրքի արժեք, բացի լռելյայնից՝ ստատիկ, հակառակ դեպքում հաշվարկը հարաբերական կլինի դիտարկիչի պատուհանի նշված եզրին, դրա համար։ պատճառը, որ մենք սեղան ենք դնում հարաբերական դիրքավորում(հարաբերական):
• Մենք սահմանում ենք վերին հատկությունը մեր ստեղծած բլոկի համար, որը սահմանում է այն ուղղությունը, որով տեղակայված տարրը շեղվում է վերևի եզրից, և ներքևի հատկությունը, որը սահմանում է այն ուղղությունը, որով տեղակայված տարրը շեղվում է ներքևի եզրից: Երկու հատկությունների համար էլ նշված էր 0 արժեքը, ուստի բլոկը ամբողջությամբ կզբաղեցնի տարրը աղյուսակի ներքևից և վերևից, այս բլոկի լայնությունը սահմանվեց 25%, այս արժեքը համապատասխանում է բջջի լայնությանը:
• Եվ վերջնական հատկությունը, որը մենք սահմանել ենք այս բլոկի համար՝ z-index՝ «-1» արժեքով, այն որոշում է դիրքավորված տարրերի կարգը՝ ըստ. Z առանցք. Այս հատկությունը անհրաժեշտ է, որպեսզի տեքստը լինի այս բլոկի դիմաց, և ոչ թե դրա հետևում, եթե զրոյից փոքր արժեք չսահմանեք, բլոկը կծածկի տեքստը։

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

Եթե ​​ձեր ուսումնասիրության այս փուլում դուք չեք հասկանում դիրքավորման տարրերի գործընթացը, ապա մի հուսահատվեք, որ սա դժվար հասկանալի թեմա է, որը մենք նույնպես չենք քննարկել, բայց մենք անպայման կքննարկենք այն հոդվածի հաջորդ հոդվածում դասագիրք «Դիրքավորման տարրերը CSS-ում».

Հարցեր և առաջադրանքներ թեմայի վերաբերյալ

Նախքան հաջորդ թեմային անցնելը, կատարեք գործնական առաջադրանքը.

Եթե ​​դուք դժվարանում եք կատարել գործնական առաջադրանքը, միշտ կարող եք բացել օրինակը առանձին պատուհանում և ստուգել էջը՝ հասկանալու համար, թե ինչ CSS կոդը է օգտագործվել:

2016-2019 Դենիս Բոլշակով, կայքում կարող եք մեկնաբանություններ և առաջարկություններ ուղարկել [email protected] էլ.

Վլադ Մերժևիչ

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

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

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

Օրինակ 1. Սեղանի տողերի բաժանում տողերով

	2004	2005	2006
Ռուբիններ	43	51	79
Զմրուխտներ	28	34	48
Շափյուղաներ	29	57	36

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

Գույնի օգտագործումը ընդլայնում է սեղանի տեսքը փոխելու հնարավորությունները։ Օրինակ, զույգ և կենտ տողերի ֆոնի գույնը կարող է տարբեր լինել, ինչպես ցույց է տրված Նկ. 2.

Պահանջվող տողերի ֆոնի գույնը փոխելու համար մենք կներկայացնենք լրացուցիչ դաս, այն կանվանենք զույգ և կսկսենք ավելացնել աղյուսակի զույգ տողերին, մասնավորապես պիտակին: . Նկատի ունեցեք, որ TR ընտրիչը կարող է սահմանել ֆոնի գույնը միայն ֆոնային հատկության միջոցով: Ցանկացած տող, որը սահմանված է TR ընտրիչի համար, չի ցուցադրվի: Հետևաբար, մենք բջիջի վրա գծում ենք ստորին եզրագիծ՝ կիրառելով border-bottom հատկությունը TD ընտրիչի վրա (օրինակ 2):

Կենտ տողերի ֆոնի գույնը որոշվում է ամբողջ աղյուսակի գույնը փոխելով: Բայց քանի որ առանձին գույնը սահմանված է ընտրովի տողերի համար (որոնց համար ավելացված է class=«ven» պարամետրը), այն «համընկնում է» աղյուսակի ֆոնի գույնի հետ։ Դրա շնորհիվ ստացվում են փոփոխական գունավոր գծեր։

Օրինակ 2. Սեղանի տողերի ընդգծում գույնով

	2004	2005	2006
Ռուբիններ	43	51	79
Զմրուխտներ	28	34	48
Շափյուղաներ	29	57	36
Ամեթիստներ	23	64	97

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

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

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

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

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

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

Ստոբեթս 1	Ստոբեթս 2
Տեքստը առաջին բջիջում	Տեքստը երկրորդ բջիջում

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

Աղյուսակների նպատակը html-ում

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

html աղյուսակների հատկությունները և պարամետրերը.

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

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

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

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

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

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

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

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

Եկեք նայենք կոդի օրինակին

Ստոբեթս 1	Ստոբեթս 2

Արդյունք

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

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

Ստոբեթս 1	Ստոբեթս 2
Տեքստը առաջին սյունակի առաջին բջիջում	Տեքստը երկրորդ սյունակի երկրորդ բջիջում

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

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

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

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

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

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

Ստոբեթս 1	Ստոբեթս 2
Տեքստը առաջին սյունակի առաջին բջիջում	Տեքստը երկրորդ սյունակի երկրորդ բջիջում
Ստոբեթս 1	Ստոբեթս 2

Արդյունք

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

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

Հեղինակից. CSS-ն ունի ընտրիչներ՝ փաստաթղթի ծառում իրենց դիրքի հիման վրա տարրեր գտնելու համար: Դրանք կոչվում են ինդեքսային կեղծ դասեր, քանի որ նրանք նայում են տարրի դիրքին, այլ ոչ թե նրա տեսակին, ատրիբուտներին կամ ID-ին: Ընդհանուր առմամբ դրանք հինգն են։

:first-child եւ :last-child

Ինչպես կարող եք կռահել անունից, :first-child և :last-child կեղծ դասերը ընտրում են հանգույցի (տարրի) առաջին և վերջին երեխային: Ինչպես մյուս կեղծ դասերի դեպքում, :first-child-ը և :last-child-ն ունենում են նվազագույն կողմնակի ազդեցություններ, երբ օգտագործում են պարզ ընտրիչներ:

Դիտարկենք ստորև բերված HTML-ը և CSS-ը.

Մրգերի ցանկ

• Խնձորներ
• Բանան
• Հապալաս
• Նարինջներ
• Ելակ

Ստոբեթս 1	Ստոբեթս 2
Տեքստը առաջին սյունակի առաջին բջիջում	Տեքստը երկրորդ սյունակի երկրորդ բջիջում

< ! DOCTYPE html > < html lang = "en-US" > < head > < meta charset = "utf-8" > < title >Առաջին երեխա և վերջին երեխա< / title > < / head > < body > < h2 >Մրգերի ցանկ< / h2 > < ul > < li >Խնձորներ< / li > < li >Բանան< / li > < li >Հապալաս< / li > < li >Նարինջներ< / li > < li >Ելակ< / li > < / ul > < / body > < / html >

Ստորև ներկայացված սքրինշոթը ցույց է տալիս արդյունքը:

h2 վերնագիրը և առաջին li-ը վարդագույն են, քանի որ: first-child կապված չէ կոնկրետ տարրերի հետ: h2 պիտակը մարմնի պիտակի առաջին զավակն է, իսկ li-ն ul տարրի առաջին զավակն է։ Բայց ինչու են մնացած li տարրերը կանաչ: Որովհետև՝ վերջին երեխան նույնպես կապված չէ կոնկրետ տարրի հետ, իսկ ul-ը մարմնի պիտակի վերջին երեխայի տարրն է: Փաստորեն, վերը նշված ոճերում գրել ենք *:first-child և *:last-child:

Պարզ ընտրիչ ավելացնելը :first-child-ին և :last-child-ին ավելի կոնկրետացնում է դրանք: Եկեք սահմանափակենք մեր ընտրությունը միայն ցանկի տարրերով: :first-child-ը փոխարինիր li:first-child-ով և :last-child-ը li:last-child-ով: Ստորև ներկայացված սքրինշոթը ցույց է տալիս արդյունքը:

:nth-child() և :nth-last-child()

Վատ գաղափար չէ, եթե կարողանաք ընտրել փաստաթղթի առաջին և վերջին զավակների տարրերը: Իսկ եթե Ձեզ անհրաժեշտ է ընտրել զույգ կամ կենտ տարրեր: Միգուցե մենք պետք է ընտրենք ծառի վեցերորդ տարրը կամ կիրառենք ոճեր յուրաքանչյուր երրորդ երեխայի տարրի վրա: Այստեղ մեզ կօգնեն կեղծ դասեր:nth-child() և:nth-last-child():

Ինչպես :not-ը, :nth-child()-ը և :nth-last-child()-ը նույնպես ֆունկցիոնալ կեղծ դասեր են: Նրանք վերցնում են մեկ փաստարկ, որը պետք է լինի.

հիմնաբառ կենտ;

հիմնաբառ նույնիսկ;

2 կամ 8 տիպի ամբողջ արժեք;

արգումենտ An+B ձևով, որտեղ A-ն քայլն է, B-ն՝ օֆսեթը, իսկ n-ը դրական ամբողջ թիվ է:

Վերջին փաստարկը մի փոքր ավելի բարդ է, քան մյուսները։ Մենք դրան կանդրադառնանք մի փոքր ուշ:

Ո՞րն է տարբերությունը :nth-child()-ի և :nth-last-child()-ի միջև: Նրանք տարբերվում են ելակետով. :nth-child() հաշվում է առաջ, իսկ :nth-last-child() հաշվում է հետ։ CSS ինդեքսներն օգտագործում են բնական թվեր և սկսվում են 1-ից, ոչ թե 0-ից:

Օգտագործելով կեղծ դասեր:nth-child() և:nth-last-child() հարմար է ստեղծել փոփոխվող օրինաչափություններ: Գծավոր սեղանը կատարյալ օգտագործման դեպք է: Ստորև բերված CSS-ը աղյուսակի հավասար տողերին տալիս է բաց կապտավուն մոխրագույն ֆոն, արդյունքը կարելի է տեսնել ստորև ներկայացված սքրինշոթում.

tr:nth-child(nive) (ֆոն՝ rgba(96, 125, 139, 0.1); )

tr: n-րդ - երեխա (նույնիսկ) ( ֆոն՝ rgba (96, 125, 139, 0.1);

Եթե ​​դուք անցնում եք:nth-child-ից:nth-last-child-ի, գծերը շրջված են, քանի որ հաշվարկը սկսվում է ներքևից: Տես ստորև ներկայացված սքրինշոթը:

Ցանկանում եք ինչ-որ ավելի բարդ բան, ավելի բարդ փաստարկներով: Եկեք ստեղծենք փաստաթուղթ 20 տարրերով, ինչպես ցույց է տրված ստորև:

Օգտագործելով :nth-child() և :nth-last-child() կարող եք ընտրել մեկ կոնկրետ տարր: Դուք կարող եք ընտրել բոլոր մանկական տարրերը տվյալ դիրքից հետո, կամ կարող եք ընտրել օֆսեթ բազմապատիկ ունեցող տարրեր: Եկեք փոխենք վեցերորդ տարրի նախապատմությունը.

Նյութ:nth-child(6) (ֆոն՝ #e91e63; )

Կրկին Ա-ն քայլ է: Սա գործակից է n-ի համար, որը սկսվում է 1-ից: Այսինքն, եթե A = 3, ապա 3n-ը կընտրի երրորդ, վեցերորդ և իններորդ տարրերը և այլն: Սա հենց այն է, ինչ կարելի է տեսնել ստորև ներկայացված սքրինշոթում:

Այստեղ ամեն ինչ մի փոքր ավելի հետաքրքիր է։ Օգտագործելով :nth-child() և :nth-last-child() կարող եք ընտրել բոլոր տարրերը տվյալ կետից հետո: Եկեք ընտրենք բոլոր տարրերը, բացառությամբ առաջին յոթի.

Տարր՝nth-child(n+8) (ֆոն՝ #e91e63; )

Նյութ՝ n-րդ - երեխա (n + 8 ) ( ֆոն՝ #e91e63;

Այստեղ ոչ մի քայլ նշված չէ։ Արդյունքում n+8-ն ընտրում է n-ի բոլոր տարրերը՝ սկսած ութերորդից։ Տես ստորև ներկայացված սքրինշոթը:

Նշում. բացասական փոխհատուցում

Բացասական արժեքները և միջակայքերը նույնպես վավեր են: nth-child(-n+8) նման գրառումը հակադարձում է ընտրությունը և ընտրում առաջին ութ տարրերը:

Օֆսեթ և քայլ օգտագործելով՝ կարող եք ընտրել յուրաքանչյուր երրորդ տարրը՝ սկսած հինգերորդից.

Տարր՝ nth-child(3n+5) (ֆոն՝ #e91e63; )

Նյութ՝ n-րդ - երեխա (3n + 5) ( ֆոն՝ #e91e63;

Արդյունք.

միակ երեխա

Միակ երեխա կեղծ-դասարանը ընտրում է տարր միայն այն դեպքում, եթե այն միակ երեխա տարրն է: Ստորև բերված են երկու կետերով ցուցակներ: Առաջինն ունի մեկ տարր, երկրորդը՝ երեք.

• Apple

• Նարնջագույն
• Բանան
• Ազնվամորու

< ul > < li >Apple< / li > < / ul > < ul > < li >Նարնջագույն< / li > < li >Բանան< / li > < li >Ազնվամորու< / li > < / ul >

Li:only-child(գույնը՝ #9c27b0;) ընտրիչը կընտրի

Apple

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

:դատարկ

Դուք կարող եք օգտագործել :empty կեղծ-դասը՝ երեխաներ չունեցող տարրեր ընտրելու համար։ Կեղծ դասակարգ:empty-ն ինքնին խոսում է (դատարկ անգլերենից «դատարկ»): «empty» ընտրության մեջ ընդգրկվելու համար տարրը պետք է ամբողջությամբ դատարկ լինի, նույնիսկ բացատներ չլինեն: Այսինքն, այն մտնում է նմուշի մեջ, բայց չի մտնում:

Երբեմն WYSIWYG խմբագիրները ձեր բովանդակության մեջ տեղադրում են դատարկ p պիտակներ: Դուք կարող եք օգտագործել :empty և :not՝ այս տարրերի վրա ոճերի կիրառումը կանխելու համար: Օրինակ՝ p:not(:empty):

Ընտրելով որոշակի տեսակի տարրեր իրենց ինդեքսով

Նախորդ բաժնում նկարագրված կեղծ դասերը ընտրում են տարրեր, եթե դրանք որոշակի դիրք են զբաղեցնում փաստաթղթի ծառում: Օրինակ, p:nth-last-child(2)-ը կընտրի բոլոր p թեգերը ծնող բլոկի ներսում գտնվող վերջինից առաջ:

Այս բաժնում մենք կխոսենք տպագրված ինդեքսային կեղծ դասերի մասին: Այս կեղծ դասերը նույնպես ընտրում են տարրեր ըստ ինդեքսի արժեքի, սակայն ընտրությունը սահմանափակվում է որոշակի տեսակիով: Օրինակ, դուք պետք է ընտրեք հինգերորդ p թեգը կամ նույնիսկ h2 թեգերը:

Կան հինգ նման կեղծ դասեր, որոնց անունները ճիշտ հակառակն են իրենց անտիպ նմաններին.

nth-last-of-type()

Նրանց և երեխաների ինդեքսային կեղծ դասերի միջև բարակ սահման կա: P:nth-child(5) մուտքը գտնում է միայն հինգերորդ պիտակը p, մինչդեռ p:nth-of-type(5) մուտքը գտնում է բոլոր պիտակները p և ընտրում հինգերորդը:

Եկեք ստեղծենք մեկ այլ փաստաթուղթ: Այն ունի նաև 20 տարր, միայն մի քանիսն են p պիտակներ, իսկ մյուսները՝ div: p պիտակները կլորացված անկյուններով, տես ստորև ներկայացված սքրինշոթը:

Չե՞ք կարծում, որ սև ու սպիտակ սեղանը մի փոքր ձանձրալի է թվում: Դա այն է, ինչ մենք նույնպես մտածում ենք: Հետևաբար, այս ձեռնարկում մենք կխոսենք այն մասին, թե ինչպես փոխել աղյուսակի գույնը HTML-ում: Գույն ավելացնելու երեք տարբերակ կա, որոնցից յուրաքանչյուրն ունի իր սեփականությունը:

1. Բջիջների ֆոնի գույնի նշում: Դա արվում է՝ օգտագործելով սեփականությունը Ֆոնի գույնը.
2. Բջիջներում տեքստի գույնի նշում: Դա արվում է՝ օգտագործելով սեփականությունը գույն.
3. Նշում է բջիջների եզրագծերի գույնը: Դա արվում է՝ օգտագործելով սեփականությունը եզրագույն.

Նախկինում գույնը փոխելու համար օգտագործվում էր շրջանակը նկարագրելու ավելի հակիրճ ձև: Նա այսպիսի տեսք ուներ.

Եզրագիծ՝ 1px պինդ բաց մոխրագույն

Եվ վերջին մասը պատասխանատու էր այստեղ գույնի համար. լույսերգեյ.

Գույների իմաստը սահմանելու տարբեր եղանակներ կան CSS. Մենք ձեզ ցույց կտանք, թե ինչպես է գույնը նկարագրվում՝ օգտագործելով ատրիբուտները:

Ինչպես փոխել բջջային գույնը

Տեսնենք, թե ինչ տեսք ունի կոդը CSS, որը նշում է բջջի գույնը:

Td (ֆոնի գույնը. ֆոնի գույնը;)

Իհարկե, կարող եք նաև փոխել գույները սեղան, և տդ, և րդ. Փորձենք մեր բազմապատկման աղյուսակին ավելի ամուր տեսք տալ։

Եկեք պիտակով ավելացնենք ոճեր վերնագրի բջիջների համար րդ, ինչպես նաև թվերի քառակուսի պարունակող անկյունագծային բջիջների համար.

Բազմապատկման աղյուսակ

*	2	3
2	4	6
3	6	9

Արդյունքը դիտարկիչում.

Ինչպես փոխել եզրագծի գույնը աղյուսակում

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

1. գծի տեսակը, մեր դեպքում ամուր (պինդ)
2. գծի հաստությունը, մեր դեպքում 1px
3. գծի գույնը, մեր դեպքում կապույտ

Եկեք ևս մեկ անգամ հիշենք, թե ինչ տեսք ունի բջիջի սահմանի գույնը սահմանելը.

Td ( եզրագիծը՝ 1px ամուր կապույտ; )

Ինչպես փոխել աղյուսակում տողի գույնը

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

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

RowGreen (ֆոնի գույնը: կանաչ;)

Եվ այս դասի օգտագործմամբ որոշակի գծերի գույնը փոխելու համար անհրաժեշտ է անել հետևյալը.

Սեղան՝ տողերով փոփոխվող գույներով

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Եվ արդյունքը բրաուզերում.

Ինչպես փոխել տեքստի գույնը աղյուսակում

Աղյուսակում տեքստի գույնը փոխելու համար օգտագործեք հատկությունը գույն. Դուք կարող եք այն կիրառել տարբեր տարրերի վրա՝ աղյուսակ, tr, th, td: Կախված դրանից, ընտրված տարրի գույնը կփոխվի: Օրինակ, ամբողջ աղյուսակի համար մենք տառատեսակի գույնը կդնենք կանաչ.

Սեղան (գույնը՝ կանաչ;...)

Նմանապես, դուք կարող եք փոխել գույնը առանձին բջիջների համար: Եվ սա ավարտում է այս դասը, մի մոռացեք կատարել ձեր տնային աշխատանքը: Ցտեսություն բոլորին: