Դուք կարող եք ֆոն սահմանել ցանկացած քանակությամբ սյունակների համար.
օգտագործելով սեղան td: առաջին երեխա, սեղան td: վերջին երեխայի ընտրիչ, կարող եք ձևավորել սեղանի առաջին կամ վերջին սյունակը (բացառությամբ սեղանի վերնագրի առաջին բջիջի);
օգտագործելով աղյուսակը td: nth-child selector (սյունակի ընտրության կանոն), կարող եք ոճավորել աղյուսակի ցանկացած սյունակ:
, և օգտագործելով մակագրության կողմի հատկությունը, այն կարող է տեղադրվել սեղանի դիմաց կամ ներքևում: Տեքստի հավասարեցման հատկությունը օգտագործվում է վերնագրի տեքստը հորիզոնական հարթեցնելու համար: Ժառանգվել է:
Աղյուսակ թիվ 1
| Ընկերությունը |
Q1 |
Q2 |
Q3 |
Q4 |
...
մակագրություն (caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px;) 
Բրինձ 2. Վերնագիրը սեղանի տակ ցուցադրելու օրինակ 6. Ինչպես հեռացնել բջիջների շրջանակների միջեւ բացը
Լռելյայն, սեղանի բջիջների սահմանները բաժանված են փոքր տարածությամբ: Եթե սահմանեք սահման-փլուզում. Փլուզում սեղանի համար, ապա այդ բացը կհեռացվի: Գույքը ժառանգվում է:
Շարահյուսություն
Աղյուսակ (սահման-փլուզում. Փլուզում;)
Բրինձ 3. Բջիջների միաձուլման և պառակտման եզրերով աղյուսակների օրինակ
7. Ինչպես մեծացնել տարածությունը բջիջների սահմանների միջեւ
Օգտագործելով սահմանների տարածման հատկությունը, կարող եք փոխել բջիջների սահմանների միջև հեռավորությունը: Այս հատկությունը վերաբերում է սեղանին ամբողջությամբ: Ժառանգվել է:
Շարահյուսություն
Աղյուսակ (սահման-փլուզում ՝ առանձին; սահմանագծում ՝ 10 պեքս 20 պիքս;)
Բրինձ 4. Բջջային շրջանակների միջև ավելացած բացերով աղյուսակների օրինակ
8. Ինչպես թաքցնել սեղանի դատարկ բջիջները
Դատարկ բջիջների հատկությունը թաքցնում կամ ցուցադրում է դատարկ բջիջները: Ազդում է միայն այն բջիջների վրա, որոնք ոչ մի բովանդակություն չեն պարունակում: Եթե բջիջի համար նշվում է ֆոն, իսկ սեղանի համար `սեղան (սահման-փլուզում.), Ապա բջիջը չի թաքնվի: Ժառանգվել է:
| Ընկերությունը |
Q1 |
Q2 |
Q3 |
| Microsoft |
20.3 |
30.5 |
|
| Google |
50.2 |
40.63 |
45.23 |
սեղան (եզրագիծ ՝ 1 պիքս պինդ # 69c; սահման-փլուզում ՝ առանձին; դատարկ բջիջներ ՝ թաքցնել;) th, td (սահման ՝ 2px պինդ # 69c;) 
Բրինձ 5. Սեղանի դատարկ բջիջը թաքցնելու օրինակ 9. Աղյուսակի դասավորությունը `օգտագործելով սեղան-դասավորության հատկությունը
Սեղանի դասավորության դասավորությունը որոշվում է երկու մոտեցումներից մեկով `ֆիքսված դասավորությամբ կամ ավտոմատ դասավորությամբ: Այս դեպքում դասավորությունը նշանակում է, թե ինչպես է սեղանի լայնությունը բաշխված բջիջների լայնության միջև: Գույքը ժառանգված չէ:
Շարահյուսություն
Աղյուսակ (սեղանի դասավորությունը. Ֆիքսված;)
10. Սեղանի լավագույն դասավորությունը
1. Հորիզոնական մինիմալիզմ
Հորիզոնական աղյուսակները աղյուսակներ են, որոնցում տեքստը կարդացվում է հորիզոնական: Յուրաքանչյուր կազմակերպություն առանձին տող է: Այսպիսի սեղաններ կարող եք ձևավորել մինիմալիստական ոճով ՝ երկրորդ վերնագրի տակ տեղադրելով երկու պիքսելանոց եզրագիծ:
| Աշխատող | Աշխատավարձ | Բոնուս | Վերահսկիչ |
|---|
| Ստիվեն Ս. Քոքս | $300 | $50 | Բոբ |
| Josephոզեֆին թանը | $150 | - | Էննի |
| Oyոյս մեինգ | $200 | $35 | Էնդի |
| James A. Pentel | $175 | $25 | Էննի |
սեղան (տառատեսակ-ընտանիք ՝ «Lucida Sans Unicode», «Lucida Grande», Sans-Serif; տառատեսակի չափը ՝ 14px; ֆոն ՝ սպիտակ; առավելագույն լայնությունը ՝ 70%; լայնությունը ՝ 70%; եզրագիծ ՝ փլուզում; տեքստ -հավասարեցնել ՝ ձախ;) th (տառատեսակը-քաշը ՝ նորմալ; գույնը ՝ # 039; եզրագիծը ՝ ներքև ՝ 2px պինդ # 6678b1; լիցքավորումը ՝ 10px 8px;) td (գույնը ՝ # 669; լիցքավորումը ՝ 9px 8px; անցումը ՝ .3s գծային;) tr: սավառնել td (գույնը ՝ # 6699ff;)Մեծ թվով տողերով, սեղանների այս դիզայնը դժվարացնում է դրանք կարդալը: Այս խնդիրը լուծելու համար td բոլոր տարրերի տակ կարող եք ավելացնել մեկ պիքսել սահման:
Td (եզրագիծ-ներքև ՝ 1px պինդ #ccc; գույնը ՝ # 669; լցոնում ՝ 9px 8px; անցում ՝ .3s գծային;) / * մնացած ծածկագիրը, ինչպես վերևում նշված օրինակն է * /
Tr տարրին ավելացնելով: Երբ մկնիկը սավառնում եք բջիջի վրա, միևնույն շարքի մնացած բջիջները միաժամանակ նշվում են, ինչը հեշտացնում է տեղեկատվության հետևման գործընթացը, եթե աղյուսակներն ունեն բազմաթիվ սյուներ:
Th (տառատեսակը-քաշը ՝ նորմալ; գույնը ՝ # 039; լիցքավորումը ՝ 10px 15px;) td (գույնը ՝ # 669; եզրագիծը ՝ 1px պինդ # e8edff; բարձիկը ՝ 10px 15px;) tr: սավառնել td (ֆոն ՝ # e8edff ;)
2. Ուղղահայաց մինիմալիզմ
Չնայած նման աղյուսակները հազվադեպ են օգտագործվում, ուղղահայաց կողմնորոշված աղյուսակները օգտակար են սյունակով ներկայացված օբյեկտների նկարագրությունները դասակարգելու կամ համեմատելու համար: Դուք կարող եք դրանք ոճավորել մինիմալիստական ոճով ՝ ավելացնելով սյուները բաժանող տարածք:
Th (տառ-քաշը ՝ նորմալ; եզր-ներքև ՝ 2px պինդ # 6678b1; եզրագիծ ՝ աջ ՝ 30px պինդ #fff; եզր-ձախ ՝ 30px պինդ #fff; գույն ՝ # 039; բարձիկ ՝ 8px 2px;) td (եզրագիծ- աջ ՝ 30px պինդ #fff; եզր-ձախ ՝ 30px պինդ #fff; գույն ՝ #669; բարձիկ ՝ 12px 2px;)
3. «Տուփ» ոճ
Բոլոր տեսակի սեղաններ զարդարելու ամենահուսալի ոճը այսպես կոչված «տուփ» ոճն է: Բավական է ընտրել լավ գունային սխեման, այնուհետև ֆոնի գույնը սահմանել բոլոր բջիջների համար: Հիշեք, որ ընդգծեք գծերի միջև եղած տարբերությունը `սահմանները սահմանելով որպես տարանջատիչներ:
Th (տառատեսակի չափը ՝ 13px; տառատեսակը ՝ քաշը ՝ նորմալ; ֆոնը ՝ # b9c9fe; եզրագիծը ՝ 4px պինդ #aabcfe; եզրագիծը ՝ ներքևը ՝ 1px պինդ #fff; գույնը ՝ # 039; բարձիկը ՝ 8px;) td (ֆոն ՝ # e8edff; եզր-ներքև ՝ 1px պինդ #fff; գույն ՝ # 669; եզրագիծ ՝ վերև ՝ 1px պինդ թափանցիկ; լիցքավորում ՝ 8px;) tr: սավառնել td (ֆոն ՝ #ccddff;)
Ամենադժվարը գունային սխեման գտնելն է, որը ներդաշնակորեն կհամապատասխանի ձեր կայքին: Եթե կայքը բեռնված է գրաֆիկայով և դիզայնով, ապա ձեզ համար բավականին դժվար կլինի օգտագործել այս ոճը:
Աղյուսակ (տառատեսակ-ընտանիք ՝ «Lucida Sans Unicode», «Lucida Grande», Sans-Serif; տառատեսակի չափը ՝ 14px; առավելագույն լայնությունը ՝ 70%; լայնությունը ՝ 70%; տեքստի հավասարեցում ՝ կենտրոն, եզրագիծ ՝ փլուզում ; սահման-վերև ՝ 7px պինդ # 9baff1; եզրագիծ ՝ ներքև ՝ 7px պինդ # 9baff1;) th (տառատեսակի չափը ՝ 13px; տառաչափը ՝ նորմալ; ֆոն ՝ # e8edff; եզրագիծ ՝ աջ ՝ 1px պինդ # 9baff1; եզրագիծ- ձախ ՝ 1px պինդ # 9baff1; գույնը ՝ # 039; լիցքավորումը ՝ 8px;) td (ֆոն ՝ # e8edff; եզրագիծ-աջ ՝ 1px պինդ #aabcfe; եզր-ձախ ՝ 1px պինդ #aabcfe; գույնը ՝ # 669; բարձիկ ՝ 8px ;)
4. Հորիզոնական զեբրա
Ebեբրա սեղանը բավականին գրավիչ և հարմար տեսք ունի: Լրացուցիչ ֆոնի գույնը կարող է ծառայել որպես սեղան կարդալու մարդկանց տեսողական ազդանշան:
Th (տառատեսակը-քաշը ՝ նորմալ; գույնը ՝ # 039; լիցքավորումը ՝ 10px 15px;) td (գույնը ՝ # 669; եզրագիծը ՝ 1px պինդ # e8edff; բարձիկը ՝ 10px 15px;) tr: nth-child (2n) ( ֆոն ՝ # e8edff;)
5. Թերթի ոճը
Այսպես կոչված թերթի էֆեկտին հասնելու համար դուք կարող եք սահմաններ կիրառել սեղանի տարրերի վրա և խաղալ ներսում գտնվող բջիջների հետ: Թեթև, նվազագույն թերթի ոճը կարող է այսպիսին լինել.
Աղյուսակ (եզրագիծ ՝ 1 պիքս պինդ # 69c;) th (տառատեսակը-քաշը ՝ նորմալ; գույնը ՝ # 039; եզրագիծը ՝ ներքևում ՝ 1px գծված # 69c; բարձիկը ՝ 12px 17px;) td (գույնը ՝ # 669; բարձիկը ՝ 7px 17px; ) tr: սավառնել td (ֆոն ՝ #ccddff;)
Աղյուսակ (եզրագիծ ՝ 1px պինդ # 69c;) th (տառատեսակի քաշը ՝ նորմալ; գույնը ՝ # 039; լիցքավորումը ՝ 10px;) td (գույնը ՝ # 669; եզրագիծը ՝ 1px գծված #fff; լիցքավորումը ՝ 10px; ֆոն ՝ #ccddff;) tr: սավառնել td (ֆոն ՝ # 99bcff;)
Աղյուսակ (եզրագիծ ՝ 1px պինդ # 6cf;) th # 0865c2; եզրագիծ-ձախ `1px պինդ # 0865c2; եզրագիծ` ներքևում `1px պինդ #fff; լիցքավորում` 20px;) td (գույնը ` # 669; եզրագիծ` աջ `1px գծված # 6cf; բարձիկ` 10px 20px;)
6. Սեղանի ֆոն
Եթե դուք փնտրում եք ձեր սեղանը ոճավորելու արագ և յուրահատուկ միջոց, ընտրեք սեղանի թեմայի հետ կապված գրավիչ պատկեր կամ լուսանկար և դրեք այն որպես սեղանի ֆոն:
Png ") 98% 86% առանց կրկնելու;) th (տառատեսակի քաշը` նորմալ; տառատեսակի չափը `14px; գույնը` # 339; լիցքավորումը `10px 12px; ֆոնը` սպիտակ;) td (գույնը ` # 669; եզրագիծ- վերև ՝ 1px ամուր սպիտակ; լիցք ՝ 10px 12px; ֆոն ՝ rgba (51, 51, 153, .2); անցում ՝ .3s;) tr: սավառնել td (ֆոն ՝ rgba (51, 51, 153, .1); )
Ողջույն բոլորին! Այսպիսով, այժմ դուք գիտեք, թե ինչպես ստեղծել տարրական աղյուսակներ, որոնք բաղկացած են այնքան տողերից և սյուներից, որքան անհրաժեշտ են: Վատ չէ, վատ չէ: Այժմ եկեք խոսենք այս սեղանների ձևավորման մասին:
Վերջին դասին աղյուսակները ցուցադրվեցին առանց սահմանների: Եվ, տեսնում եք, այն կարծես այդպես է, նույնիսկ նշան չեք կարող անվանել: HTML- ում սեղանի եզրեր պատրաստելու համար ավելացրեք պիտակին
հատկանիշ սահմանդրան զրոյից այլ արժեք տալով:
Այսպիսով, եկեք սեղանի համար սահմաններ պատրաստենք: Օրինակ, այն մեկի համար, որն արդեն ունենք.
| Վերին ձախ բջիջ | Վերին աջ բջիջ |
| Ստորին ձախ բջիջը | Ստորին աջ բջիջ |
Արդյունքը դիտարկիչում.
Ինչպես հեռացնել սեղանի սահմանները
Իր հերթին, HTML աղյուսակի սահմանները հեռացնելու համար, կամ կարող եք նաև ասել, որ դրանք անտեսանելի լինեն, ձեզ անհրաժեշտ է հատկանիշը սահմանսահմանել արժեքը 0
... Այս պարզ գործողություններից հետո շրջանակը կհեռացվի:
Հատկանիշը թույլ է տալիս ստեղծել, բայց չկառավարել սահմաններ: Դա թույլ է տալիս միայն փոխել դրանց հաստությունը:
Հետեւաբար, հիմա մենք կխոսենք դրա մասին CSSորի հատկությունները դա հնարավոր են դարձնում սահմանստեղծել տարբեր սահմաններ ՝ ինչպես յուրաքանչյուր բջիջի ներսում, այնպես էլ դրսում, որպես ամբողջություն սեղանի շուրջ:
Եկեք նայենք, թե ինչպես կիրառել CSS- ը ՝ սեղանի արտաքին և ներքին սահմանները ստեղծելու համար:
Դա անելու համար հեռացրեք սահմանային հատկանիշը մեր աղյուսակից և ավելացրեք ոճեր.
Օրինակ սեղան
| Վերին ձախ բջիջ |
Վերին աջ բջիջ |
| Ստորին ձախ բջիջը |
Ստորին աջ բջիջ |
Արդյունքը դիտարկիչում.
Այժմ եկեք սահմաններ ավելացնենք նաև յուրաքանչյուր բջիջի համար: Դա անելու համար պարզապես ավելացրեք ոճերը.
Արդյունքը դիտարկիչում.
Ինչպես հեռացնել HTML աղյուսակում բջիջների միջև եղած լցոնումը
Համաձայնեք, որ CSS- ով սահմանված սահմանը չունի նույն տեսքը, ինչ կցանկանայիք: Անկասկած, գեղագիտական տեսանկյունից անելիքներ կան: Theննարկչի էջում կարող եք տեսնել, որ լռելյայն այն առանձին ցուցադրում է աղյուսակների և բջիջների սահմանները: Օրինակն ակնհայտորեն ցույց է տալիս դա:
Այնուամենայնիվ, միանգամայն հնարավոր է ազատվել նման սահմաններից, որոնք կրկնակի են կոչվում, եթե օգտագործենք սահմանը փլուզող CSS հատկությունը: Գործնականում դա հետևյալն է.
Աղյուսակ (եզրագիծ ՝ ամուր 1px կապույտ; եզրագիծ-փլուզում ՝ փլուզում;) ...
Արդյունքում, բջիջների միջև հեռավորությունը հանվում է.
Եզրագծային հատկանիշին վերագրված փլուզման արժեքը հեռացնում է երկակի սահմանները: Ինչպես տեսնում եք, արդյունքը հարակից բջիջների սահմանների, ինչպես նաև բջիջների և սեղանի արտաքին սահմանների «փլուզումն» է: Ինչ վերաբերում է վերջինիս, ապա այն կարելի է ընդհանրապես հեռացնել: Եվ եթե դրա ցուցադրման կարիք կա, ապա պետք է մեծացնել դրա լայնությունը: Այսպիսով, մենք ազատվեցինք աղյուսակի բաժանարարներից: Եվ հաջորդ դասին մենք կխոսենք այն մասին, թե ինչպես կարող եք ուղղահայաց և հորիզոնական եզրեր սահմանել: Հաջողություն բոլորին:
Աղյուսակային տվյալներ- տեղեկատվություն, որը կարող է ցուցադրվել աղյուսակի տեսքով և տրամաբանորեն բաժանվել սյուների և տողերի: HTML պիտակը օգտագործվում է վեբ էջերում աղյուսակային տվյալների ցուցադրման համար
, որը սեղանի պարունակությամբ տարա է: HTML աղյուսակի բովանդակությունը նկարագրվում է տող առ տող, յուրաքանչյուր տող սկսվում է բացման պիտակով և ավարտվում է փակման պիտակով
.
Պիտակի ներսում
սեղանի բջիջները գտնվում են ՝ ներկայացված պիտակներով | կամ | ... Այն բջիջներն են, որոնք պարունակում են վեբ էջում ցուցադրված աղյուսակի ամբողջ բովանդակությունը:
Սեղանի շրջանակ
Լռելյայնորեն, վեբ էջի HTML աղյուսակը մատուցվում է առանց եզրագծի. Աղյուսակին եզր ավելացնելու համար, ինչպես մյուս բոլոր տարրերին, օգտագործվում է եզրագծի CSS հատկությունը: Բայց հարկ է նշել, որ եթե միայն տարրին սահման ավելացնենք , ապա այն կցուցադրվի ամբողջ սեղանի շուրջ: Որպեսզի սեղանի բջիջները նույնպես ունենան եզրագիծ, դուք պետք է տարրերի համար սահմանեք սահմանային հատկություն | եւ | . Աղյուսակ, th, td (եզրագիծ ՝ 1px ամուր սև;) Փորձեք » Այժմ և՛ աղյուսակը, և՛ բջիջները սահմաններ ունեն, մինչդեռ յուրաքանչյուր բջիջ և սեղան ունի իր սահմանները: Արդյունքում, շրջանակների միջև հայտնվեց դատարկ տարածք, սահմանների միջև ընկած հատկությունը թույլ է տալիս վերահսկել այս տարածքի չափը, որը սահմանված է ամբողջ սեղանի համար: Այլ կերպ ասած, դուք չեք կարող անհատապես վերահսկել տարբեր բջիջների միջև եղած բացերը:
Նույնիսկ եթե դուք հեռացնեք բջիջների միջև եղած բացերը ՝ օգտագործելով սահմանը բացող հատկության 0 արժեքը, այնուհետև բջիջների սահմանները կպչեն միմյանց ՝ կրկնապատկվելով: Սահման-փլուզման հատկությունը օգտագործվում է բջիջների սահմանները միացնելու համար: Այն կարող է վերցնել երկու արժեք.
- առանձին: կանխադրված է: Բջիջները ցուցադրվում են միմյանցից կարճ հեռավորության վրա, յուրաքանչյուր բջիջ ունի իր սահմանը:
- փլուզում. հարակից շրջանակները միացնում է մեկին, բջիջների, ինչպես նաև բջիջների և սեղանի շրջանակների միջև եղած բոլոր բացերը անտեսվում են:
Փաստաթղթի անունը
| Անուն | Ազգանունը |
|---|
| Հոմերոս | Սիմփսոնը |
| Մարգ | Սիմփսոնը |
| Անուն | Ազգանունը |
|---|
| Հոմերոս | Սիմփսոնը |
| Մարգ | Սիմփսոնը |
Փորձիր " Սեղանի չափը
Սեղանի բջիջներին շրջանակներ ավելացնելուց հետո նկատելի դարձավ, որ բջիջների բովանդակությունը չափազանց մոտ է եզրերին: Դուք կարող եք օգտագործել լիցքավորման հատկությունը ՝ բջիջների եզրերի և դրանց բովանդակության միջև սպիտակ տարածք ավելացնելու համար. Th, td (լիցքավորումը ՝ 7px;) Փորձեք » Սեղանի չափը կախված է դրա բովանդակությունից, բայց հաճախ իրավիճակներ են առաջանում, երբ սեղանը չափազանց նեղ է և անհրաժեշտ է դառնում այն ձգվել: Սեղանի լայնությունը և բարձրությունը կարող են փոխվել ՝ օգտագործելով լայնության և բարձրության հատկությունները ՝ ցանկալի չափերը սահմանելով կամ սեղանի կամ բջիջների համար. Աղյուսակ (լայնությունը ՝ 70%;) տ (բարձրությունը ՝ 50 պիքսել;) Փորձեք այն » Տեքստի հավասարեցում
Լռելյայնորեն, աղյուսակի վերնագրի բջիջների տեքստը կենտրոնացված է, իսկ սովորական բջիջներում տեքստը `ձախից, տեքստի հավասարեցման հատկության միջոցով կարող եք վերահսկել տեքստի հորիզոնական հավասարեցումը:
Ուղղահայաց հավասարեցման CSS հատկությունը թույլ է տալիս վերահսկել տեքստի բովանդակության ուղղահայաց հավասարեցումը: Լռելյայն, տեքստը ուղղահայաց հավասարեցված է բջիջների կենտրոնին: Ուղղահայաց հավասարեցումը կարող է անտեսվել ուղղահայաց հավասարեցման հատկության արժեքներից մեկով.
- վերև. տեքստը հավասարեցված է բջիջի վերևին
- միջին: տեքստը հավասարեցնում է կենտրոնին (կանխադրված)
- ներքև. տեքստը հավասարեցված է բջիջի ներքևին
Փաստաթղթի անունը
| Անուն | Ազգանունը |
|---|
| Հոմերոս | Սիմփսոնը |
| Մարգ | Սիմփսոնը |
Փորձիր " Աղյուսակի տողերի ֆոնի գույնի փոփոխություն
Երբ դիտում եք բազմաթիվ աղյուսակներ, որոնք պարունակում են բազմաթիվ տեղեկատվություն, կարող է դժվար լինել հետևել, թե որ տվյալներն են պատկանում որոշակի տողի: Օգտագործողներին նավարկելու համար կարող եք փոխարինել երկու տարբեր ֆոնի գույներ: Նկարագրված էֆեկտը ստեղծելու համար կարող եք օգտագործել դասի ընտրիչը ՝ այն ավելացնելով աղյուսակի յուրաքանչյուր երկրորդ տողին.
Փաստաթղթի անունը
| Անուն | Ազգանունը | Դիրք |
|---|
| Հոմերոս | Սիմփսոնը | հայր |
| Մարգ | Սիմփսոնը | մայրիկ |
| Բարտ | Սիմփսոնը | որդի |
| Լիզա | Սիմփսոնը | դուստր |
Փորձիր "Յուրաքանչյուր երկրորդ տողին դասի հատկանիշ ավելացնելը հոգնեցուցիչ խնդիր է: CSS3- ում ավելացվել է ՝ nth երեխայի կեղծ դասը ՝ այս հարցը այլընտրանքային եղանակով լուծելու համար: Այժմ միջթողման ազդեցությանը կարելի է հասնել բացառապես CSS- ի միջոցով ՝ առանց դիմելու փաստաթղթի HTML նշագրումը փոխելու: Կեղծ դասով ՝ nth-child, դուք կարող եք ընտրել աղյուսակի բոլոր կենտ կամ զույգ տողերը ՝ օգտագործելով զույգ (զույգ) կամ կենտ (կենտ) հիմնաբառերից մեկը: Tr: nth-child (կենտ) (ֆոնի գույնը ՝ # EAF2D3;) Փորձեք » Փոխել գծի ֆոնը սավառնելի վրա
Աղյուսակային տվյալների ընթեռնելիությունը բարելավելու մեկ այլ եղանակ է տողի ֆոնի գույնը փոխել, երբ սավառնել եք դրա վրա: Սա կօգնի ընդգծել սեղանի ցանկալի բովանդակությունը և բարելավել տվյալների տեսողական ընկալումը:
Այս էֆեկտի իրականացումը շատ պարզ է, դրա համար անհրաժեշտ է ավելացնել. Hover կեղծ դասը սեղանի տողերի ընտրիչին և սահմանել ֆոնի ցանկալի գույնը. Tr: սավառնել (ֆոնի գույնը ՝ # E0E0FF;) Փորձիր » Աղյուսակի կենտրոնական հավասարեցում
HTML աղյուսակը կենտրոնին հավասարեցնել հնարավոր է միայն այն դեպքում, եթե սեղանի լայնությունը փոքր լինի իր մայր տարրի լայնությունից: Կենտրոնում սեղանը հավասարեցնելու համար հարկավոր է օգտագործել լուսանցքի հատկությունը `սահմանելով այն առնվազն երկու արժեք. Առաջին արժեքը պատասխանատու կլինի վերևի և ներքևի սեղանի արտաքին լուսանցքի համար, իսկ երկրորդը` կենտրոնական ավտոմատ հավասարեցման համար : Աղյուսակ (լուսանցք ՝ 10px ավտոմատ;) Փորձեք » Եթե Ձեզ անհրաժեշտ են տարբեր լուսանցքներ սեղանի վերևում և ներքևում, կարող եք սահմանել լուսանցքի հատկությունը երեք արժեքի. Առաջինը պատասխանատու կլինի վերին լուսանցքի համար, երկրորդը `հորիզոնական հավասարեցման, իսկ երրորդը` ներքևի լուսանցքի համար. Աղյուսակ (լուսանցք ՝ 10px auto 30px;)
Մենք դիտարկել ենք էջում տարրերի ձևավորման բազմաթիվ մեթոդներ, ինչպիսիք են տեքստային տեղեկատվությունը, հղումները, պատկերները, վերնագրերը, բայց այս ամենը դեռ բավարար չէ: Իմ հոդվածներում ես հաճախ օգտագործում եմ HTML տարրեր, ինչպիսիք են աղյուսակները, քանի որ շատ դեպքերում դրանք են օգնել կազմակերպել կարևոր տեղեկատվություն և դյուրին ներկայացնել այն:
Այս հոդվածում ես ձեզ կներկայացնեմ HTML աղյուսակների ձևավորման բարդությունները, և դուք կսովորեք CSS- ի նոր հատկություններ, որոնք նախատեսված են այդ նպատակներին հասնելու համար:
Հիպերտեքստային նշման լեզուն HTML- ը մեզ մեծ հնարավորություններ է ընձեռել `CSS- ի ոճերը կապելու տասը եզակի պիտակների հետ, որոնք նախատեսված են սեղանների հետ աշխատելու համար, ես առաջարկում եմ դրանք կրկնել հետագա ուսումնասիրությունից առաջ.
| Պիտակ | Նկարագրություն |
|---|
| Սահմանում է աղյուսակի բովանդակությունը: |
|
| Նշում է աղյուսակի անունը: |
|
| Սահմանում է աղյուսակի վերնագրի բջիջը: |
|---|
|
| Աղյուսակում սահմանում է տող: |
|
| Սահմանում է աղյուսակի տվյալների բջիջը: |
| Օգտագործվում է աղյուսակում խմբի վերնագիրը պարունակելու համար (աղյուսակի վերնագիր): |
| |
Օգտագործվում է սեղանի «մարմինը» պարունակելու համար: |
|
Օգտագործվում է սեղանի «ստորագիր» (ստորագիր) պարունակելու համար: |
|
| Սահմանում է սյունակի նշված հատկությունները պիտակի ներսում յուրաքանչյուր սյունակի համար .
|
|
| Սահմանում է աղյուսակի սյունակների խումբ: |
Աշխատեք սեղանի նահանջների հետ
Սեղանի մեջ լցոնման օգտագործումը
Աղյուսակի ներդիրներ
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
Այս օրինակում մենք.
- Տեղադրեք սեղանը կենտրոնում ՝ օգտագործելով արտաքին եզրերով կենտրոնացման հորիզոնական տեխնիկան (լուսանցքը ՝ 0 ավտոմատ):
- Աղյուսակի անվան համար (պիտակ ) մենք ներքևի բարձիկը դնում ենք 19 պիքսել: Հուսով եմ, որ ձեզ չեն շփոթում անհավասար թվերը :)
Մեր օրինակի արդյունքը.
Բջիջների միջև տարածություն
Վերոնշյալ օրինակից հետո, հավանաբար, նկատել եք, որ մենք աղյուսակի բոլոր բջիջների միջև բաց ունենք: Եկեք նայենք, թե ինչպես հեռացնել սեղանի բջիջների միջև եղած բացը, կամ այն մեծացնել:
Հարակից բջիջների սահմանների միջև հեռավորությունը սահմանելու համար դուք պետք է օգտագործեք CSS հատկությունը `սահման -տարածություն:
Փոխեք սեղանների միջև եղած տարածությունը
սահմանային տարածություն `30px 10px;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
սահմանային տարածություն `0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
սահմանային տարածություն `0.2 մ;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
Այս օրինակում մենք.
- բոց: ձախ): Եթե բաց եք թողել լողացող տարրերի թեման, ապա այս ձեռնարկում միշտ կարող եք վերադառնալ դրան - "":
- Բացի այդ, մենք սեղանի բարձիկը դնում ենք աջից 30px և սահմանում ենք սեղանների ուղղահայաց հավասարեցում (տարրի վերևը հավասարեցված է ամենաբարձր տարրի գագաթին): Այս հոդվածին մանրամասնորեն կվերադառնանք այս սեփականությանը:
- ) - համարձակ:
- Աղյուսակի բջիջների համար (վերնագիր և տվյալների բջիջներ) մենք սահմանում ենք 1 պիքսել պինդ եզրագիծ # F50 տասնվեցերորդով և լցնում ենք 19 պիքսել բոլոր կողմերի համար:
- Դասարանով առաջին սեղանի համար .առաջինսեղանի բջիջների միջև սահմանը սահմանում ենք 30px 10px, դասի հետ երկրորդ աղյուսակի համար . երկրորդհավասար է զրոյի, դասարան ունեցող երրորդ աղյուսակի համար .երորդհավասար է 0.2em
Ձեր ուշադրությունը հրավիրում եմ այն փաստի վրա, որ եթե սահմանագծման հատկության մեջ նշված է միայն մեկ երկարության արժեք, ապա այն ցույց է տալիս տարածությունը ՝ ինչպես հորիզոնական, այնպես էլ ուղղահայաց, և եթե երկարության երկու արժեք է նշված, ապա առաջինը որոշում է հորիզոնական հեռավորությունը , իսկ երկրորդը `ուղղահայաց: Հարակից բջիջների սահմանների միջև հեռավորությունը կարող է որոշվել CSS միավորներով (px, cm, em և այլն): Բացասական արժեքներն անթույլատրելի են:
Մեր օրինակի արդյունքը.
Displayուցադրել աղյուսակի բջիջների շուրջ սահմանները
Դու կարող ես ասել: - ուրեմն, մենք հեռացրել ենք բջիջների միջև եղած տարածությունը ՝ օգտագործելով 0-ի սահմանագծի միջակայքի հատկությունը, բայց ինչու՞ ենք այժմ բջիջների սահմանները հատվում:
Կրկնակի սահմանները ձևավորվում են այն բանի շնորհիվ, որ մեկ բջիջի ստորին սահմանը ավելացվում է բջիջի վերևի սահմանին, որը գտնվում է ներքևում, նման իրավիճակ է առաջանում բջիջների կողմերում, և դա տրամաբանական է ցուցադրման տեսանկյունից սեղանը, բայց, բարեբախտաբար, կա մի տարբերակ ՝ դիտարկիչին ասելու, որ մենք չենք, չենք ուզում տեսնել բջիջների սահմանների նման անառակ վարքագիծը:
Դա անելու համար հարկավոր է օգտագործել CSS սահմանը փլուզելու հատկությունը: Odարմանալի է, սակայն, որ փլուզման արժեքով սահման-փլուզման հատկությունը բջիջների միջև եղած բացը հեռացնելու լավագույն միջոցն է ՝ առանց դրանց միջև կրկնակի սահմաններ ստանալու:
Մտածեք սահմանի վարքի համեմատության մասին, երբ օգտագործվում է սահմանագոտի 0 արժեք ունեցող հատկությունը և սահմանը փլուզման հատկություն `փլուզման արժեքով.
Աղյուսակի բջիջների շուրջ սահմանների ցուցադրման օրինակ
սահմանային տարածություն `0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
սահման-փլուզում. փլուզում;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
Այս օրինակում մենք.
- Մեր սեղանները դարձրին լողացող և ձախով հավասարեցված (բոց ՝ ձախ), դրանց աջ ծածկույթը դարձրեք 30 պիքս:
- Սահմանել սեղանի անվան համար (պիտակ ) - համարձակ:
- Աղյուսակի բջիջների համար (վերնագիր և տվյալների բջիջներ) մենք սահմանում ենք 5px պինդ եզրագիծ # F50 hex- ով և սահմանում ենք 50px ֆիքսված լայնություն և 75px բարձրություն:
- Դասարանով առաջին սեղանի համար .առաջինսեղանի բջիջների միջև տարածությունը սահմանում ենք զրոյի (սահման-տարածություն `0;), իսկ երկրորդ աղյուսակի համար` դասի հետ . երկրորդսահմանել փլուզման սահմանը, որը հնարավորության դեպքում միավորում է բջիջների սահմանները մեկին:
Մեր օրինակի արդյունքը.
Դատարկ բջիջների պահվածքը
CSS- ի միջոցով կարող եք սահմանել ՝ աղյուսակում ցուցադրել դատարկ բջիջների սահմաններն ու ֆոնը, թե ոչ: Այս վարքի համար պատասխանատու է դատարկ բջիջների հատկությունը, որը լռելյայն, ինչպես կարող եք նկատել նախորդ օրինակներից, ցուցադրում է դատարկ բջիջներ:
Անցնենք օրինակին.
Աղյուսակի դատարկ բջիջները ցուցադրելու օրինակ
դատարկ բջիջներ. ցույց տալ;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
դատարկ բջիջներ `թաքցնել;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
Այս օրինակից դատարկ բջիջների հատկությունը հասկանալու համար շատ պարզ է, եթե այն դրված է թաքցնելու, ապա դատարկ բջիջները և դրանցում գտնվող ֆոնը թաքնված կլինեն, եթե ցուցադրված է (կանխադրված), ապա դրանք կցուցադրվեն:
Աղյուսակի վերնագրի գտնվելու վայրը
Եկեք նայենք սեղանների ձևավորման մեկ այլ պարզ հատկության `caption -side, որը սահմանում է սեղանի վերնագրի դիրքը (սեղանի վերևից կամ ներքևից): Լռելյայն, մակագրության կողմի հատկությունը դրված է վերևում, որը մակագրությունը տեղադրում է սեղանից վերև: Վերնագիրը սեղանի տակ տեղադրելու համար հարկավոր է օգտագործել ստորին արժեք ունեցող հատկությունը:
Եկեք նայենք այս հատկության օգտագործման օրինակին.
Վերնագրի կողքի հատկության օգտագործման օրինակ
Գլուխ սեղանի վերևում
| Անուն | Գինը |
| Ձուկ | 350 ռուբլի |
| Միս | 250 ռուբլի |
Աղյուսակի տակ գտնվող վերնագիրը
| Անուն | Գինը |
| Ձուկ | 350 ռուբլի |
| Միս | 250 ռուբլի |
Այս օրինակում մենք ստեղծել ենք երկու դասարանորոնք վերահսկում են սեղանի վերնագրի դիրքը: Առաջին դասարան ( .ավերնագիր) սեղանի վերնագիրը դնում է դրա վերևում, մենք այն կիրառում ենք առաջին սեղանին, իսկ երկրորդ դասին ( .bottomCaption) սեղանի վերնագիրը տեղադրում է դրա տակ, այն կիրառեցինք երկրորդ սեղանին: Դասարան .ավերնագիրունի կանխադրված մակագրության կողմի հատկություն և ստեղծվել է ցուցադրական նպատակների համար:
Մեր օրինակի արդյունքը.
Հորիզոնական և ուղղահայաց հավասարեցում
Շատ դեպքերում, աղյուսակների հետ աշխատելիս, պետք է կարգավորեք բովանդակության հավասարեցումը վերնագրի և տվյալների բջիջների ներսում: Տեքստի հավասարեցման հատկությունը օգտագործվում է ցանկացած տեքստային տեղեկատվության նման հորիզոնական հավասարեցման համար: Այս գույքի տեքստի օգտագործման մասին մենք քննարկել ենք ավելի վաղ «» հոդվածում:
Բջիջների բովանդակության հավասարեցում սահմանելու համար հարկավոր է օգտագործել հատուկ հիմնաբառեր ՝ տեքստի հավասարեցման հատկությամբ: Եկեք այս հատկության հիմնաբառերի կիրառումը դիտարկենք հետևյալ օրինակում:
Աղյուսակում հորիզոնական հավասարեցման օրինակ
|
Իմաստը | Նկարագրություն |
|
ձախ | Հավասարեցնում է բջիջի տեքստը ձախ: Սա կանխադրված է (եթե տեքստի ուղղությունը ձախից աջ է): |
|
ճիշտ | Հավասարեցնում է բջիջի տեքստը դեպի աջ: Սա կանխադրված է (եթե տեքստի ուղղությունը աջից ձախ է): |
|
կենտրոն | Բջջային տեքստը հավասարեցնում է կենտրոնին: |
|
արդարացնել | Ձգվում է տողերը այնպես, որ յուրաքանչյուր տող ունենա նույն լայնությունը (ձգում է բջիջի տեքստը `համապատասխանելով լայնությանը): |
Այս օրինակում մենք ստեղծել ենք չորս դասարան, որը բջիջներում սահմանեց տարբեր հորիզոնական հավասարեցում և դրանք կիրառեց աղյուսակի տողերին համապատասխան: Բջիջի արժեքը համապատասխանում է տեքստի հավասարեցման հատկության արժեքին
Մեր օրինակի արդյունքը.
Հորիզոնական հավասարեցումից բացի, դուք կարող եք նաև սահմանել ուղղահայաց հավասարեցում աղյուսակի բջիջներում `օգտագործելով ուղղահայաց հավասարեցման հատկությունը:
Խնդրում ենք նկատի ունենալ, որ սեղանի բջիջների հետ աշխատելիս օգտագործվում են այս հատկության միայն հետևյալ արժեքները*.
*
-Աղյուսակի բջիջի վրա կիրառվող ենթաօրենսդրական, գերծանրքաշային, տեքստային վերևի, տեքստային ներքևի, երկարության և% արժեքները կպահեն այնպես, կարծես օգտագործում են ելակետային արժեքը:
Եկեք նայենք օգտագործման օրինակին.
Աղյուսակում ուղղահայաց հավասարեցման օրինակ
|
Իմաստը | Նկարագրություն |
|
ելակետային | Բջիջի ելակետը հավասարեցնում է ծնողի ելակետին: Սա կանխադրված է: |
|
գագաթ | Բջջի բովանդակությունը ուղղահայացորեն հավասարեցնում է վերևին: |
|
միջին | Ուղղահայաց հավասարեցնում է բջջի բովանդակությունը մեջտեղում: |
|
ներքև | Բջջի բովանդակությունը ուղղահայացորեն հավասարեցնում է ներքևին: |
Այս օրինակում մենք ստեղծել ենք չորս դասարան, որը բջիջներում սահմանեց տարբեր ուղղահայաց հավասարեցում և դրանք կիրառեց աղյուսակի տողերին համապատասխան: Բջիջի արժեքը համապատասխանում է ուղղահայաց հավասարեցման հատկության արժեքին, որը կիրառվել է այդ տողի վրա:
Աղյուսակի դասավորությունը զննարկչի կողմից տեղադրելու ալգորիթմ
CSS- ը լռելյայն օգտագործում է զննարկչի սեղանների դասավորության ավտոմատ ալգորիթմը: Այս դեպքում սյունակի լայնությունը սահմանվում է բջիջի ամենալայն չկոտրվող բովանդակությամբ... Այս ալգորիթմը որոշ դեպքերում կարող է դանդաղ լինել, քանի որ դիտարկիչը պետք է կարդա աղյուսակի բոլոր բովանդակությունը ՝ նախքան դրա վերջնական դասավորությունը որոշելը:
Theննարկչի կողմից սեղանի դասավորության տեսակը փոխելու համար ավտոմատվրա ֆիքսված, դուք պետք է օգտագործեք սեղանի դասավորության CSS հատկությունը `ֆիքսված արժեքով:
Այս դեպքում հորիզոնական տեղադրումը կախված է միայն դրանից սեղանի լայնությունից և սյուների լայնությունից, և ոչ թե բջիջների բովանդակությունից: Theննարկիչը սկսում է ցուցադրել աղյուսակը առաջին տող ստանալուց անմիջապես հետո: Արդյունքում, ֆիքսված ալգորիթմը թույլ է տալիս ավելի արագ ստեղծել նման սեղանի դասավորությունը, քան ավտոմատ տարբերակի օգտագործումը: Մեծ սեղանների հետ աշխատելիս կարող եք օգտագործել ֆիքսված ալգորիթմ `կատարողականությունը բարելավելու համար:
Եկեք նայենք այս հատկության կիրառմանը հետևյալ օրինակով.
Աղյուսակ-դասավորության հատկության օգտագործման օրինակ
սեղանի դասավորություն. ավտոմատ;
| Անուն |
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 |
Այս օրինակում մենք.
Սեղանի տողերի և սյուների ձևավորում
Մենք արդեն մասամբ անդրադարձել ենք «» հոդվածում աղյուսակի տողերի և սյուների ձևավորման մեթոդներին: Այս հոդվածում մենք դիտեցինք խմբի կեղծ դասի օգտագործումը, որը թույլ է տալիս աղյուսակներում տողերի ոճեր փոխարինել `օգտագործելով արժեքներ նույնիսկ (ազնիվ) և տարօրինակ (տարօրինակ), կամ տարրական մաթեմատիկական բանաձև.
Եկեք վերանայենք նախորդ տեխնիկան և ուսումնասիրենք աղյուսակներում տողեր և սյուներ ոճավորելու նոր եղանակներ: Անցնենք օրինակներին:
Աղյուսակներով ՝ n-child կեղծ դասի օգտագործման օրինակ
|
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% -ով, վերնագիրն ու տվյալների բջիջները սահմանեք 1 պիքս պինդ եզրագծով:
- Տեղադրված է ապրանքի համար (Սեղանի «ստորագիր») ֆոնի գույնը - մարջան, տարրի համար (Աղյուսակի «Վերնագիր») սահմանեք ֆոնի գույնը արծաթ.
- Նյութերի համար
որոնք գտնվում են տարրի ներսում (սեղանի մարմին) սահմանել սահնակի վրա ֆոնի գույնի փոփոխություն (կեղծ դաս. սավառնել) գ սպիտակմեկ գույնի համար խակի(ամբողջ տողն ընդգծված է):
Մեր օրինակի արդյունքը. Բրինձ 153 Աղյուսակներում տողերի ձևավորման օրինակ Հետևյալ օրինակը ցույց է տալիս, թե ինչպես կիրառել անկյունների կլորացումը սեղանի բջիջներին (հատկություն):
Բջջի անկյունները կլորացնելու օրինակ
Այս օրինակում մենք.
- Կենտրոնացրեք աղյուսակը ծածկոցներով, սահմանեք վերնագրի բջիջների լայնությունն ու բարձրությունը 50px, նշված թափանցիկեզրագիծը 5 պիքսել:
- Պարզվել է, որ վերնագրի բջիջի վրա սավառնելիս (կեղծ դաս. Սավառնել) այն ստանում է հետին պլան Կապույտգույներ, Նարնջագույնտեքստի գույնը, եզրագիծը նարնջագույնգունավորում է 5 պիքսել և 100%շառավղով:
- Թափանցիկ սահմանանհրաժեշտ է սահմանի համար տարածք պահելու համար, որը կցուցադրվի սավառնելիս, եթե դա չկատարվի, սեղանը «ցատկելու» է:
Մեր օրինակի արդյունքը.
Հետևյալ օրինակը շոշափում է HTML տարրերի օգտագործումը եւ և դրանց ոճավորումը:
Աղյուսակի սյուների ընդգծման օրինակ
|
Դիմումի համարը | Ծառայություն | գին, ռուբլի | Ընդհանուր |
|
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 հատկություն ՝ ֆոնի գույնը, բայց չեք կարող ուղղակիորեն ֆոնի գույնը սահմանել սահողում (the: hover կեղծ դաս) այս տարրի վրա: Այս օրինակում մենք կանդրադառնանք, թե ինչպես ընդգծել աղյուսակի սյունակը ՝ օգտագործելով միայն CSS- ը:
Սավառնելի վրա սեղանի սյուներն ու տողերն ընդգծելու օրինակ
|
Դիմումի համարը | Ծառայություն | գին, ռուբլի | Ընդհանուր |
|
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 բարձրություն ունեն: Մենք հեռացրեցինք բջիջների միջև եղած բացը ՝ օգտագործելով արժեքի սահման-փլուզման հատկությունը
.
- Եվ այսպես, օգտագործելով կեղծ տարրից հետո ::, յուրաքանչյուր տարրից հետո ավելացրեք բովանդակություն:
սավառնելիս Pseudo- տարրը :: պարտադիր կերպով օգտագործվում է բովանդակության հատկության հետ միասին, որի շնորհիվ մենք տեղադրում ենք բլոկի տարր, որն ունի ֆոնի գույն անտառային կանաչև ունի բացարձակ դիրքավորում.
- Այստեղ բացարձակ դիրքավորումը անհրաժեշտ է տարրը փոխհատուցելու համար իր նախնու նշված եզրին, մինչդեռ նախահայրը պետք է ունենա այլ դիրքորոշման արժեք, քան կանխադրված ստատիկն է, հակառակ դեպքում հաշվարկը հարաբերական կլինի դիտարկիչի պատուհանի նշված եզրին, այդ պատճառով մենք դրել ենք սեղանին հարաբերական դիրքավորում(հարաբերական):
- Մեր ստեղծած բլոկի համար մենք սահմանում ենք վերին հատկությունը, որը ցույց է տալիս տեղադրված տարրի վերին եզրից փոխադրման ուղղությունը և ներքևի հատկությունը, որը ցույց է տալիս տեղադրված տարրի փոխադրման ուղղությունը ներքևի եզրից: Երկու հատկությունների համար էլ 0 արժեքը նշված էր, այնպես որ բլոկն ամբողջությամբ կզբաղեցնի տարրը սեղանի ներքևից և վերևից, այս բլոկի լայնությունը սահմանվել է 25%, այս արժեքը համապատասխանում է հենց բջիջի լայնությանը:
- Եվ վերջնական հատկությունը, որը մենք սահմանել ենք այս բլոկի համար. Z-index «-1» արժեքով այն որոշում է տեղակայված տարրերի կարգը ըստ Z առանցք... Այս հատկությունը անհրաժեշտ է, որպեսզի տեքստը գտնվում է այս բլոկի դիմաց, և ոչ թե դրա հետևում, եթե զրոյից պակաս արժեք չեք սահմանում, ապա բլոկը կփակի տեքստը:
Մեր օրինակի արդյունքը.
Եթե ուսումնասիրության այս փուլում դուք չեք հասկանում տարրերի դիրքավորման գործընթացը, ապա մի հուսահատվեք, սա դժվար հասկանալի թեմա է, որը մենք նույնպես չենք դիտարկել, բայց դա անպայման կդիտարկենք հաջորդ հոդվածում «CSS- ում տարրերի դիրքավորումը» ձեռնարկը:
Թեմայի վերաբերյալ հարցեր և առաջադրանքներ
Լրացրեք Գործնական գործունեությունը ՝ մինչև հաջորդ թեմային անցնելը.
 Եթե դժվարանում եք պրակտիկան ավարտել, միշտ կարող եք բացել օրինակը առանձին պատուհանում և զննել էջը ՝ տեսնելու, թե ինչ CSS է օգտագործվել:
2016-2020 Դենիս Բոլշակով, դուք կարող եք ուղարկել կայքի աշխատանքի վերաբերյալ ձեր մեկնաբանություններն ու առաջարկությունները [email protected] հասցեին
| |
|
| |
