Նահանջ css աղյուսակում

Դասի նպատակը.Սեղանի հատկությունների և CSS աղյուսակի դասավորության սկզբունքների ներածություն

Եկեք նայենք հիմնականին CSS հատկություններսեղաններ

սահման

Գույքը համարվում է մեկում և ներառում է մի քանի գույք միաժամանակ.

ՍԱՀՄԱՆ-ՈՃ
ՍԱՀՄԱՆԻ ԼԱՅՆՔ
ՍԱՀՄԱՆԻ-ԳՈՒՅՆ

Կա նաև ընդհանուր կանոն.

table.collapse( border-collapse:collapse; ) table.separate( border-collapse:separate; )

Արդյունք:

լայնությունը և բարձրությունը
(սեղանի բարձրությունը և լայնությունը)

Արժեքներ:

Օրինակ:

տեքստի հավասարեցում
(հորիզոնական հավասարեցում)

Արժեքներ:

կենտրոն (կենտրոն)
ձախ (ձախ եզրի երկայնքով)
աջ (աջ եզր)
հիմնավորել (լայնություն)

ուղղահայաց-հավասարեցնել
(ուղղահայաց հավասարեցում)

Արժեքներ:

բազային (բազային գծի երկայնքով)
ենթակետ (որպես ենթաինդեքս)
գերծանրքաշային (սուպերինդեքսի նման)
վերև (վերին եզրի երկայնքով)
միջին (մեջտեղում)
ներքև (ներքևի եզրով)
% (գծերի տարածության բարձրության)

Օրինակ:

լիցք
(ներքին նահանջները աղյուսակում)

ֆոնի գույն (ֆոն)
գույն (տեքստի գույն)

CSS աղյուսակի դասավորություն

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

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

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

Աղյուսակային դասավորությունը երկու սյունակով

Դասավորության ամենատարածված մեթոդներից մեկը երկու սյունակ է, այսինքն. Էջը բաժանված է երկու մասի.

Որպես կանոն, ձախ կողմը ընտրացանկն է և լրացուցիչ տարրերը, իսկ աջ կողմը հիմնականն է՝ հիմնական բովանդակության համար:

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

Այս դեպքում, լայնության հատկության միջոցով (100%) դուք պետք է սահմանեք ամբողջ աղյուսակի ընդհանուր լայնությունը (աղյուսակի պիտակը) տոկոսով, իսկ առաջին բջիջի համար (td tag) սահմանեք լայնությունը (նաև լայնության հատկությունը) պիքսելներով։ կամ տոկոսներով։

Օրինակ:սահմանել էջի հիմնական շրջանակը երկու սյունակից՝ առաջինը՝ ֆիքսված չափով, երկրորդը՝ բրաուզերի մնացած հատվածի համար։ Կատարեք առաջադրանքը՝ օգտագործելով CSS ոճեր ()

Կատարումը:

</գլուխ> <մարմին > <աղյուսակի id = "maket"cellpacing = "0" > <tr > <td id = «ձախ» > 1</td> <td id = «ճիշտ» > 2</td> </tr> </աղյուսակ> ...

...

Արդյունք:

Այժմ փորձենք տեսողականորեն առանձնացնել աղյուսակի երկու սյունակները միմյանցից։

Օրինակ:սահմանել տարբեր բջիջների ֆոն (երկու սյունակ միմյանցից առանձնացնելու համար) և սահմանել սյունակների միջև հեռավորությունը (բաժանիչ)

Կատարումը:
Եկեք ավելացնենք նոր ոճային հատկություններ.

/* ձախ բջիջի համար */ td#left( լայնությունը՝ 200px; ֆոն՝ #cccc; եզրագիծը՝ 1px պինդ սև; /* ժամանակավորապես նշեք սահմանները */ ) /* աջ բջիջի համար */ td#right( ֆոն: #fc3; եզրագիծ՝ 1px պինդ սև; /* ժամանակավորապես նշեք սահմանները */ ) /* բաժանարարի համար */ #razdel (լայնությունը՝ 10px; /* Սյունակների միջև հեռավորությունը */)

Միասին:

</գլուխ> <մարմին > <աղյուսակի id = "maket"cellpacing = "0" > <tr > <td id = «ձախ» > 1</td> <td id = «razdel» > <td id = «ճիշտ» > 2</td> </tr> </աղյուսակ>

Նոր բջիջ է ավելացվել բաժանարարի համար:
Արդյունք:

Սյունակների միջև բաժանարարը կարող է նաև ավելի քիչ ընդգծված լինել: Դա անելու համար մենք կօգտագործենք եզրային ոճերը:

Օրինակ:աղյուսակի սյունակների միջև բաժանարար պատրաստեք՝ օգտագործելով կետավոր գիծհարակից բջիջների սահմանները

Կատարումը:
Եկեք ավելացնենք նոր սահմանային հատկություններ բջիջների համար.

/* ձախ բջիջի համար */ td#left( լայնությունը:200px; ֆոն՝ #cccc; /* Ձախ սյունակի ֆոնի գույնը */ /* նոր */ եզրագիծ-աջ՝ 1px գծիկ #000; /* Աջ գծիկ եզրագծի ընտրանքներ * /)

Միասին:

</գլուխ> <մարմին > <աղյուսակի id = "maket"cellpacing = "0" > <tr > <td id = «ձախ» > 1</td> <td id = «ճիշտ» > 2</td> </tr> </աղյուսակ>

Արդյունք:

Սեղանի դասավորությունը երեք սյունակով

Կա ֆիքսված կամ «հեղուկ» դասավորության հայեցակարգ:

Հաստատված CSS դասավորություն

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

Օրինակ:ստեղծել երեք սյունակ էջի ձևանմուշ: Օգտագործեք ֆիքսված աղյուսակի դասավորություն.

ձախ սյունակ - 150 պիքսել;
միջին սյունակ - 400 պիքսել;

Կատարումը:

</գլուխ> <մարմին > <աղյուսակի id = "maket"cellpacing = "0" > <tr > <td id = «ձախ» > 1</td> <td id = «կենտրոնական» > 2</td> <td id = «ճիշտ» > 3</td> </tr> </աղյուսակ>

Արդյունք:

Ռետինե մակետ

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

Կարևոր է.Բոլոր սյունակների լայնությունների գումարը պետք է լինի 100%, անկախ աղյուսակի լայնությունից:

Օրինակ:

ձախ սյունակ - 20%;
միջին սյունակ - 40%;
աջ սյունակ - 40%;

Սահմանեք սյունակների ֆոն և տեսողականորեն առանձնացրեք սյունակները եզրագծով:

Կատարումը:

Արդյունք:

Դիտարկենք երկրորդ տարբերակը, երբ բրաուզերի կողմից ավտոմատ ընտրվում է կենտրոնական սյունակի լայնությունը. Օրինակը հետևյալ պատկերն է.

Օրինակ:ստեղծել երեք սյունակ էջի ձևանմուշ: Օգտագործեք հեղուկ սեղանի դասավորությունը.

ձախ սյունակ - 150 պիքսել;
միջին սյունակ - 40%;
աջ սյունակ - 200 պիքսել;

Սահմանեք սյունակների ֆոն և տեսողականորեն առանձնացրեք սյունակները եզրագծով:

Կատարումը:

Արդյունք:
Արդյունքը կլինի մոտավորապես նույնը, միայն «ձգումը» տեղի կունենա կենտրոնական սյունակի շնորհիվ:

Ներդրված սեղանի օգտագործումը հեղուկ դասավորության մեջ

Եթե երկու սյունակների լայնությունը սահմանված է տոկոսներով, իսկ երրորդը՝ պիքսելներով, դուք չեք կարողանա հաղթահարել միայն մեկ աղյուսակը: Այսպիսով, եթե ամբողջ աղյուսակի լայնությունը 100 տոկոս է, առաջին սյունակը 200 պիքսել է, իսկ մնացած սյունակները՝ 20 տոկոս, ապա պարզ հաշվարկը ցույց է տալիս, որ առաջին սյունակի չափը 60 տոկոս է։ Այս դեպքում պիքսելներով նշված արժեքը չի ընդունվի բրաուզերի կողմից, իսկ չափը կսահմանվի որպես տոկոս:

Բնօրինակ աղյուսակը ստեղծվել է երկու բջիջներով: Սեղանի լայնությունը սահմանվում է որպես տոկոս.
Ձախ բջիջի համար(առաջին սյունակի) լայնությունը սահմանված է պիքսելներով.
Աջ բջիջի լայնությունը(այլ սյունակների հիմքը) նշված չէ. Երկրորդ աղյուսակը, որը նույնպես բաղկացած է երկու բջիջից, տեղադրվում է այս բջիջի ներսում:
Սեղանի մեջ տեղադրված բջիջների լայնությունը սահմանվում է որպես տոկոս.
Ներքին սեղանի լայնությունը պետք է սահմանվի 100 տոկոսովայնպես, որ այս աղյուսակը վերցնի արտաքին աղյուսակի ողջ ազատ տարածքը:
Կենտրոնի և աջ սյունակների լայնությունը հաշվարկվում է ոչ թե արտաքին աղյուսակի, այլ բջջի լայնության համեմատ:

Օրինակ:ստեղծել երեք սյունակ էջի ձևանմուշ: Օգտագործեք հեղուկի դասավորությունը տեղադրված աղյուսակով.

ձախ սյունակ - 150 պիքսել;
միջին սյունակ - 60%;
աջ սյունակ - 40%;

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

Կատարումը:

Այստեղ անհրաժեշտ են cellpadding և cellpacing պիտակները՝ ապահովելու համար, որ աղյուսակների միջև «բաց» չկա:
Արդյունք:

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

Տարբերությունները բլոկի մոդելի հետ

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

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

սահմանային հատկություն

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

Կարևոր կետԱմբողջ աղյուսակի համար անհրաժեշտ է սահմանել սահմանների տարածություն:Այսինքն՝ այսպես.

Աղյուսակ (
Սահմանային տարածություն՝ 0;
}

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

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

Բջիջների լուսանցքները սահմանելու հնացած եղանակ

Նախկինում այս պիտակի համար

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

Բանն այն է, որ նահանջը վերաբերում է տեսքըտարրը, իսկ html-ը լիովին անպիտան է այս նպատակով: Ստանդարտները միանշանակ նշում են, որ CSS-ը պետք է պատասխանատու լինի դրա համար։

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

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

սահման-կոլապս. առանձին - յուրաքանչյուր բջիջ ունի իր սահմանը (կանխադրված)

border-collapse: collapse - ընդհանուր սահման

border-collapse: ժառանգել - արժեքը վերցված է մայր տարրից

Օրինակ, եկեք ստեղծենք աղյուսակ և սահմանենք շրջանակ բոլոր աղյուսակների բջիջների համար, որոնք կլինեն էջում: Եկեք սկզբում ոչինչ չփոխենք՝ տեսնելու, թե աղյուսակը ինչպիսի տեսք կունենա.

Ոճը:

1
2
3
4
5
6

Էջ

1	2
3	4

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

Բրինձ. 1. Կիրառելով սահմանների տարածության պարամետրը

Նշում

Եթե նշեք

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

Սեղաններ

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

table-layout-ը սահմանում է, թե ինչպես պետք է դիտարկիչը հաշվարկի աղյուսակի բջիջների բարձրությունն ու լայնությունը՝ ելնելով դրա բովանդակությունից:

Սահմանային տարածությունը սահմանում է աղյուսակի բջիջների սահմանների միջև հեռավորությունը: Border-spacing հատկանիշը չի աշխատում, երբ աղյուսակում սահմանազատման պարամետրը դրված է ծալման համար: