Եթե ​​աղյուսակի լայնությունը որպես հատկանիշ սահմանեք: Դատարկ բջիջների վարքագիծը

ստեղծում է տող և պիտակ :

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

Աղյուսակի անվանումը

1-ին շարքի 1-ին բջիջ	1-ին շարքի 2-րդ բջիջ
2-րդ շարքի 1-ին բջիջ	2-րդ շարքի 2-րդ բջիջ

Սեղանի հավասարեցում. Բջջի բովանդակության հավասարեցում

Տեգի align հատկանիշն օգտագործվում է աղյուսակը հավասարեցնելու համար:

.

Օգտագործելով align հատկանիշը, կարող եք աղյուսակը տեղադրել դիտարկիչի պատուհանի ձախ կամ աջ (align= «ձախ» և align= «աջ») մասում ( մայր տարր) կամ դրա կենտրոնում (align="center" ):

Տողերի բովանդակության հավասարեցում ( հատկորոշել

) և բջիջները ( հատկորոշել , աղյուսակի տող ստեղծելը չունի բարձրություն և լայնություն հատկանիշներ: Շարքի բարձրությունը համապատասխանում է դրանում տեղակայված բջիջների բարձրությանը։ Իսկ շարքի լայնությունը հավասար է աղյուսակի լայնությանը։

Բարձրության և լայնության արժեքները նշված են պիքսելներով կամ հարաբերական տոկոսներով ազատ տարածություն. Արժեքներ սահմանելու համար.

Նշեք դրական ամբողջ թիվ: Այս դեպքում չափը կնշվի պիքսելներով;

Նշեք դրական ամբողջ թիվ, որին հաջորդում է % նշանը:

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

) հորիզոնական և որոշելով դրա գտնվելու վայրը՝ աղյուսակի վերևում կամ ներքևում:

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

Սեղանի և բջիջների բարձրությունը և լայնությունը

Կանխադրված չափսեր ( բարձրությունը և լայնությունը) և՛ աղյուսակները, և՛ բջիջները փոխվում են՝ կախված դրանց բովանդակության չափից:

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

Նշել

) հորիզոնական կերպով կատարվում է նաև՝ օգտագործելով align հատկանիշը, իսկ ուղղահայաց՝ օգտագործելով valign հատկանիշը. align հատկանիշն ընդունում է ձախ, աջ, կենտրոն և արդարացնել արժեքները, որոնք նշում են տողերի և բջիջների բովանդակության հավասարեցումը համապատասխանաբար ձախ, աջ, կենտրոն և լայնություն; Valign հատկանիշը, որն ընդունում է վերև, ներքև և միջին արժեքները, նշում է տողերի և բջիջների բովանդակության հավասարեցումը համապատասխանաբար դրանց վերին, ներքևի և միջին եզրերի երկայնքով: align հատկանիշը նաև ծառայում է վերնագրի հավասարեցմանը ( հատկորոշել

>

Ինչպես երևում է օրինակից. նշելով սյունակի բջիջներից մեկի լայնությունը, դրանով դուք նշում եք ամբողջ սյունակի լայնությունը. իսկ անընդմեջ բջիջներից մեկի բարձրությունը նշելով, դուք նշում եք ամբողջ տողի բարձրությունը։

Սեղանի և բջիջների սահմանները

Աղյուսակը և նրա յուրաքանչյուր բջիջ ունեն իրենց սահմանները, որոնք լռելյայն տեսանելի չեն:

սահմանային պիտակի հատկանիշ

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

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

Եզրագծի հաստությունը սահմանվում է միայն սեղանի համար: Բջիջների շուրջ եզրագծի հաստությունը միշտ 1 պիքսել է ( կամ բացակայում է).

Լռելյայնորեն եզրագիծը հայտնվում է 3D էֆեկտով և սև է:

Bordercolor հատկանիշը սահմանում է եզրագծի գույնը և վերացնում է 3D էֆեկտը: Հատկանիշը կարող է օգտագործվել սեղանի եզրագծի գույնը սահմանելու համար ( հատկորոշել

), լարային ( հատկորոշել ) կամ բջիջներ ( հատկորոշել - html աղյուսակի տող
- html աղյուսակի սյունակ (բջիջ):

Հիմա եկեք փորձենք միավորել բոլոր պիտակները մեկ աղյուսակում: Դա անելու համար մենք կստեղծենք html աղյուսակ, որը բաղկացած է երկու տողից և երեք սյունակից.

Այս html աղյուսակը շատ հեշտ է պատրաստել: Նախ, դնենք հենց աղյուսակի պիտակները, որոնց ներսում տեղադրում ենք անհրաժեշտ թվով տողեր (մեր օրինակում՝ 2 տող).

). Bordercolor հատկանիշը չի աջակցվում բոլոր բրաուզերների կողմից և, հետևաբար, խորհուրդ չի տրվում: Եզրագծի գույնը սահմանելու համար ավելի լավ է օգտագործել ոճերը ( այն արդեն CSS-ում է). Սահմանային հատկանիշը նշված չէ: Հետևաբար սահմաններ չկան։ Սեղանի եզրագծի հաստությունը 3 պիքսել է: Բջիջներն ունեն 1 պիքսել սահմաններ: Եզրագծի մասնակի ցուցադրում Աղյուսակի եզրագիծը և բջիջների շուրջ եզրագիծը կարող են մասամբ ցուցադրվել: Շրջանակի պիտակի հատկանիշ նշում է, թե որտեղ պետք է գծել աղյուսակի եզրագիծը: Կանոնների հատկանիշը սահմանում է, թե ինչպես ցուցադրել բջիջների սահմանները: «500px» շրջանակ="hsides" rules="cols" > Տեղադրված է հորիզոնական սեղանի եզրագծեր ԵՎ սահմանները ցուցադրվում են սյունակների միջև Լիցքավորում բջիջների ներսում և դրսում Աղյուսակները HTML-ով ֆորմատավորելիս որոշ տեղեկատվության տեսողական ներկայացման և դրա հարմար ընկալման համար կարող է անհրաժեշտ լինել օգտակար օգտագործումըլիցքավորում բջիջների ներսում և դրսում: Ներքին լիցք - բջիջների սահմաններից մինչև դրանց պարունակությունը սահմանվում է պիտակի cellpadding հատկանիշով . Արտաքին լցոնումներ - հարակից բջիջների սահմանների միջև հեռավորությունը և բջիջների սահմաններից մինչև աղյուսակի եզրագիծը սահմանվում են պիտակի բջիջների տարածության հատկանիշով: . Ամբողջ թվերը նշվում են որպես հատկանիշի արժեքներ դրական թվեր, որը սահմանում է հեռավորությունը պիքսելներով: Հեռավորությունը բջիջների պարունակությունից նրանց սահմաններին 10 պիքսել է Բջիջների և բջիջների միջև հեռավորությունը մինչև սեղանի եզրագիծը 25 պիքսել է Բջիջների միաձուլում HTML-ով աղյուսակներ նախագծելիս և ձևաչափելու ժամանակ հաճախ անհրաժեշտ է միաձուլել հարակից բջիջները: Եվ եթե նման անհրաժեշտություն առաջանա, ապա դուք պետք է օգտագործեք պիտակի colspan և rowspan ատրիբուտները:	. Colspan հատկանիշը սահմանում է բջիջների քանակը, որոնք կմիավորվեն հորիզոնական, իսկ rowspan հատկանիշը նշում է ուղղահայաց միաձուլվող բջիջների թիվը: Երկու ատրիբուտներն էլ իմաստ ունեն, եթե աղյուսակը բաղկացած է մի քանի տողերից: 1 2 3 4 1 2 3 4 Սեղանի ֆոն. Սեղանի բջիջների ֆոն HTML-ում հնարավոր է ընդհանուր ֆոն սահմանել ինչպես ամբողջ աղյուսակի, այնպես էլ ֆոն մեկ ընտրված բջիջի համար: Ֆոնային պիտակի հատկանիշ նշում է պատկերը, որը կլինի աղյուսակի ֆոնային պատկերը: Հատկանիշի արժեքը սահմանում է պատկերի ֆայլի հասցեն՝ բացարձակ կամ հարաբերական ճանապարհ դեպի ֆայլ (): bgcolor պիտակի հատկանիշ սահմանում է աղյուսակի ֆոնի գույնը: Գույնը կարելի է սահմանել երկու եղանակով () Օգտագործելով նույն հատկանիշները, դուք կարող եք սահմանել ֆոնի պատկերը և ֆոնի գույնը ցանկացած աղյուսակի բջիջի համար ( հատկորոշել , Եվ . Դրանցից որևէ մեկը կարող է օգտագործվել աղյուսակի մեկ կամ մի քանի տողերի որոշ հատկություններ փոխելու համար. սա կրկին հավասարեցնում է բջիջների բովանդակությունը տողերում հորիզոնական և ուղղահայաց՝ օգտագործելով հավասարեցնել ատրիբուտներըև valign համապատասխանաբար; և սահմանելով բջիջների ֆոնի գույնը՝ օգտագործելով bgcolor հատկանիշը: Այս պիտակները օգտագործելիս դուք պետք է տեղյակ լինեք մի քանի նրբերանգների մասին, որոնք որոշում են դրանց միջև եղած տարբերությունները: Պիտակներ Եվ պետք է տեղադրվի պիտակի առաջ , սեղանի բացման պիտակից անմիջապես հետո ). Մուգ վարդագույնը սեղանի ֆոնի գույնն է։ Առանձին բջջի ֆոնային պատկերը երկինքն է: Հիշենք նաև թեգի cols հատկանիշի առկայությունը , որը զննարկիչին հայտնում է աղյուսակի սյունակների քանակը։ cols հատկանիշի օգտագործումը թույլ է տալիս դիտարկիչին ավելի արագ ցուցադրել աղյուսակի բովանդակությունը: Աղյուսակի խմբագրում Այս բաժնում մենք կդիտարկենք պիտակները, որոնք օգտագործվում են սեղանի մի քանի տարրեր միանգամից խմբագրելիս: Այս պիտակները կարելի է բաժանել երկու խմբի. Առաջին խումբը ներառում է պիտակներ Եվ . Դրանք գրեթե նույնական են և օգտագործվում են որոշ հատկություններ սահմանելու և աղյուսակի մեկ կամ մի քանի սյունակների բնութագրերը փոխելու համար: Այս պիտակներից մեկը տեղադրվում է պիտակից անմիջապես հետո . Ասենք սա պիտակ է . Օգտագործելով պիտակի span հատկանիշը նշեք սյունակների քանակը, որոնց վրա կկիրառվեն align, valign կամ width ատրիբուտները ( սյունակի բջիջների բովանդակությունը հորիզոնական, ուղղահայաց հարթեցում կամ սյունակների լայնության սահմանում). Եթե ​​span հատկանիշը պիտակի մեջ է բացակայում է, ապա կփոխվեն մեկի՝ աղյուսակի առաջին սյունակի բնութագրերը: Երկրորդ անգամ դուք օգտագործում եք պիտակը հատկությունները սահմանված են հետևյալի համար ( հաջորդը - եթե բացակայում է span հատկանիշը) աղյուսակի սյունակներ և այլն: «2» լայնություն=«70px» > 1 2 3 4 5 1 2 3 4 5 Թեգերի երկրորդ խումբը ներառում է նաև պիտակներ, որոնք գրեթե նույնական են միմյանց . Պիտակի մեջ տեղադրված տողեր ներկայացված են աղյուսակի վերևում, իսկ տողերը կցվում են պիտակի մեջ կտեղակայվի աղյուսակի ստորին մասում: Երկու թեգերը կարող են կիրառվել միայն մեկ անգամ նույն աղյուսակում: Նշել կարող է օգտագործվել մի քանի անգամ պիտակի մեջ . «աջ» bgcolor="#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1. Ի՞նչ են HTML աղյուսակները և ինչու են դրանք անհրաժեշտ: html աղյուսակներ- սա յուրաքանչյուր html էջի և, համապատասխանաբար, յուրաքանչյուր կայքի ամենահիմնական բաղադրիչներից մեկն է: Օրինակ, ամբողջ կայքը բաղկացած է աղյուսակներից՝ նկարներ, տեքստեր, հղումներ, գրանցման ձևեր. 2. Ի՞նչ պիտակներ ունեն html աղյուսակները: Պիտակներ, սահմանելով html աղյուսակը գրված են այսպես. Բայց քանի որ մենք գիտենք, որ բոլոր աղյուսակները բաղկացած են տողերից և սյունակներից (բջիջներից), ուստի մենք պետք է նրանց համար նույնպես պիտակներ սահմանենք.

Այնուհետև մենք յուրաքանչյուր տող բաժանում ենք բջիջների՝ օգտագործելով սյունակային պիտակներ.

- բջիջ 1.1
- բջիջ 1.2
- բջիջ 1.3


- բջիջ 2.1
- բջիջ 2.2
- բջիջ 2.3

Փաստորեն, մակագրությունների առաջին նիշը տողի համարն է, իսկ երկրորդը` բջիջի համարը (1x2 - առաջին շարք, երկրորդ բջիջ և այլն):

3. Ինչպե՞ս սահմանել html աղյուսակների ֆոնի գույնը:

Հիմա եկեք պարզենք, թե ինչպես կարելի է առանձին դնել աղյուսակի կամ յուրաքանչյուր բջիջի ֆոնը:

Այսպիսով, ֆոնը սահմանելու համար օգտագործվում է հատկանիշը bgcolor="background_color".

Օրինակ, եթե մեզ անհրաժեշտ է մեկ գույն սահմանել ամբողջ նշանի համար, ապա դա անում ենք այսպես.

bgcolor="background_color">

- բջիջ 1.1
- բջիջ 1.2
- բջիջ 1.3


- բջիջ 2.1
- բջիջ 2.2
- բջիջ 2.3

Օրինակ, եթե ձեզ անհրաժեշտ է նշան անել դեղին, ապա գրում ենք.

Անհրաժեշտության դեպքում սահմանել տողի ֆոնի գույնը html աղյուսակը, ապա հատկանիշը bgcolor="background_color"կիրառել հատկորոշման համար

Մենք պետք է սահմանենք սեղանի լայնությունը, բայց երբեմն մենք պետք է փոխենք աղյուսակի լայնությունը: Եվ մենք պետք է դա պարզենք: Ինչպե՞ս կարող եմ փոխել աղյուսակի լայնությունը: Սեղանի լայնությունը կարող է փոխվել պիքսելներով կամ տոկոսներով... Այժմ մենք կսկսենք փոխել աղյուսակի լայնությունը html-ում: Անցյալ անգամ մենք պատրաստեցինք 500 պիքսել լայնությամբ աղյուսակ, երեք սյունակով և երեք տողով (հիշեք սահմանի ==1 հատկանիշի մասին, որը պատասխանատու է եզրագծի համար) Ահա այս աղյուսակի կոդը. Այժմ, որպեսզի հասկանանք, թե ինչպես փոխել աղյուսակի կամ սյունակի լայնությունը, եկեք փոխենք և որոշ թվեր ավելացնենք մեր ծածկագրին: սեղանի լայնությունը = "500" - փոխել 599-ի: Այս էջը կառուցված է աղյուսակների վրա, և տեքստային դաշտի լայնությունը, այսինքն. որտեղ այս բառերը գտնվում են 600 պիքսել: Մենք կստանանք. Թիվ 2 սյունակի լայնությունը դարձնենք 200 պիքսել. Թիվ 3 սյունակի լայնությունը դարձնենք 299 պիքսել. Եվ մենք ստանում ենք այս կոդը. Եկեք նայենք մեր սեղանին Այժմ, եկեք փոխենք լայնության հատկանիշի արժեքը կես = 50%: Մենք նայում ենք մեր սեղանին, որը կազմում է 50%: Դա այն ամենն է, ինչ ես ուզում էի ձեզ ասել, թե ինչպես փոխել սեղանի լայնությունը: Հիմա եկեք անցնենք սեղանի բարձրությանը: տեղեկացնում է զննարկիչին, որ աղյուսակը լրացված է: Ցանկացած աղյուսակ բաղկացած է սյուներից և տողերից: Նշել
բջիջ անընդմեջ: Համապատասխանաբար, քանի բջիջ ընդգրկված է տողում, այնքան սյունակ կլինի աղյուսակում: Նշել	ստեղծում է նաև բջիջ: Դրա տարբերությունը պիտակից	այն է, որ պիտակի կողմից ստեղծված բջիջը	վերնագրի բջիջ է. դրա բովանդակությունը կենտրոնացված է, և եթե այն տեքստ է, զննարկիչը ցուցադրում է այն թավերով: Պիտակի կողմից ստեղծված բջջի բովանդակությունը	լռելյայնորեն այն գտնվում է ձախ կողմում: Նշել

bgcolor = "#FFFF00"> bgcolor = "#0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

Այս դեպքում հատկանիշը բջջային համարը հավաքածուներ սպիտակտեքստ, որը գտնվում է պիտակի ներսում:

Ճիշտ նույն կերպ նշված է յուրաքանչյուր բջիջի գույնը առանձին. Օրինակ, եթե ցանկանում եք փոխել 1.2 բջիջի գույնը կապույտ, ապա բացվող պիտակի ներսում հատկանիշ bgcolor="background_color":

4. Ինչպե՞ս սահմանել html աղյուսակի բջիջների լայնության և բարձրության չափը:

Այսպիսով, բջիջների լայնությունն ու բարձրությունը ձեռքով սահմանելու համար օգտագործեք բարձրություն և լայնություն ատրիբուտները: Դրանք կարող են սահմանվել ամբողջ աղյուսակի, մեկ տողի կամ բջիջի (սյունակի) համար: Բարձրությունը և լայնությունը կարող են սահմանվել պիքսելներով կամ տոկոսներով: Մեր դեպքում մենք սյունակների (բջիջների) լայնությունը և բարձրությունը կսահմանենք պիքսելներով:

բարձրությունը- հատկանիշ, որը սահմանում է բջիջի բարձրությունը

լայնությունը- հատկանիշ, որը նշում է բջիջի լայնությունը

Իսկ հիմա օրինակ.

Այժմ ես կբացատրեմ, թե ինչու ենք յուրաքանչյուր տողում բջիջի բարձրությունը սահմանում միայն մեկ անգամ:

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

Դուք կարող եք սահմանել բարձրությունը և լայնությունը ամբողջ սեղանի համար: Այս դեպքում բոլոր բջիջները (սյունակները) և տողերը հավասարապես կբաժանեն իրենց տրված տարածքը, եթե դուք անձամբ չսահմանեք այդ պարամետրերը (որպես աղյուսակի ընդհանուր լայնության (բարձրության) տոկոս կամ պիքսելներով):

Բացի այդ, շատ հաճախ դուք պետք է սահմանեք բարձրության բարձրությունը և լայնությունը տոկոսով:

բջիջների պարունակությունը

Եթե ​​մենք բջիջի լայնությունը սահմանենք 40 տոկոսի, ինչպես մեր օրինակում, դա նշանակում է, որ մնացած բջիջների համար դեռ մնում է 60 տոկոս, այսինքն. դրանց լայնությունների հանրագումարը չպետք է գերազանցի 60 տոկոսը։ Ամեն ինչ շատ պարզ է. ընդհանուր առմամբ մենք ունենք ընդամենը 100%: Մենք հաշվում ենք՝ 100 – 40 = 60։

5. Ինչպե՞ս հավասարեցնել տեքստը html աղյուսակի ներսում:

Հիմա եկեք պարզենք, թե ինչպես հավասարեցնել տեքստը մեր html աղյուսակում դեպի ձախ, աջ և կենտրոն:

Սա արվում է օգտագործելով հատկանիշը.

հավասարեցնել=”ձախ”- հավասարեցնում է տեքստը html աղյուսակի ներսում դեպի ձախ

align=”center”- հարթեցնում է html տեքստսեղանները կենտրոնացած

align=”ճիշտ”- հարթեցնում է տեքստը html աղյուսակի ներսում դեպի աջ

Համապատասխանաբար, align հատկանիշը կարող է վերցնել նաև աջ և ձախ արժեքները: Արդարացնել իմաստը, երբ օգտագործվում է պիտակի հետ align հատկանիշը չի կարող ընդունվել:

Օրինակ՝ html կոդըկենտրոնին հավասարեցված տեքստով աղյուսակը այսպիսի տեսք ունի.

align = "կենտրոն"> align = "ձախ"> 1x1 align = "կենտրոն">1.2 align = "աջ"> 1x3 align = "ձախ">2.1 align = "կենտրոն"> 2x2 align = "աջ">2.3

Գրանցելով հատկանիշը align = "կենտրոն"բացման մեջ

, մենք հավասարեցրինք html աղյուսակը բրաուզերի էջի կենտրոնին:

Սա այն արդյունքն է, որը դուք կստանաք բրաուզերում.

1x1	1.2	1x3
2.1	2x2	2.3

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

Ուղղահայաց հավասարեցումը նշվում է հատկանիշով.

valign = "վերև"- բովանդակությունը կգտնվի բջիջի վերևում

valign = "միջին"- բովանդակությունը տեղակայվելու է բջիջի կենտրոնում

valign = "ներքև"- բովանդակությունը կգտնվի բջիջի ներքևի մասում

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

valign = "վերև"> 1x1 1.2 valign = "վերև"> 1x3 valign = "ներքև">2.1 2x2 valign = "ներքև">2.3

Սա այն է, ինչ մենք ստանում ենք, եթե դիտարկենք ատրիբուտների արդյունքը բրաուզերում հարթեցնելԵվ valign:

1x1	1.2	1x3
2.1	2x2	2.3

6. Ինչպե՞ս համատեղել html աղյուսակի բջիջներն ու սյունակները:

Մեր հոդվածի այս մասում կխոսենք ատրիբուտների մասին colspanԵվ շարքերի բացվածքը.

colspan- որոշում է սյունակների քանակը, որոնք ծածկում են տվյալ բջիջը

շարքերի բացվածքը- որոշում է տողերի քանակը, որոնց վրա տարածվում է այս բջիջը

Արժեքներ colspanԵվ շարքերի բացվածքըկարող է արժեք վերցնել 2-ից կամ ավելիից, այսինքն. բջիջը կարող է ձգվել երկու կամ ավելի սյունակների (տողերի) վրա:

Այսպիսով, այժմ, օգտագործելով օրինակը, մենք կձգենք 1x1 բջիջը երկու սյունակի (բջիջների): Դա անելու համար մենք կօգտագործենք colspan="2" հատկանիշը՝ վերագրելով այն 1x1 բջիջին: Կոդը կունենա հետևյալ տեսքը.

Ինչպես տեսնում ենք, 1x1 բջիջը տարածվում է երկու բջիջների երկարությամբ: Համապատասխանաբար, դրա երկարությունը հավասար է այս երկու բջիջների (160 պիքսել) գումարային երկարությանը: Մենք չենք նշել լայնության հատկանիշ 1x1 բջիջի համար, բայց եթե մենք որոշենք դա անել, ապա լայնությունը կսահմանենք 160 պիքսել: Եվ նաև, խնդրում ենք նկատի ունենալ, որ մեր օրինակում չկա 1x3 բջիջ, այսինքն. առաջին շարքում ընդամենը երկու բջիջ կա, ինչու - մենք արդեն քննարկել ենք սա - 1x1 բջիջը հավասար է երկու բջիջի, colspan հատկանիշի շնորհիվ:

colspan և rowspan ատրիբուտները պետք է շատ զգույշ վարվեն: Սխալը կարող է հանգեցնել ձեր կայքի խափանման:

Եվ հիմա, երբ մենք հասկանում ենք colspan պարամետրը, եկեք նայենք rowspan պարամետրին: Գործողության սկզբունքը նույնն է.

colspan = "2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

Այսպիսով, մենք սովորեցինք, թե ինչպես համատեղել բջիջները html աղյուսակների տողերում և սյունակներում:

7. Ինչպե՞ս հեռացնել, ավելացնել կամ փոխել նահանջները և ինչպես սահմանել html աղյուսակի շրջանակ:

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

border = սահմանի լայնությունը պիքսելներով- սահմանում է շրջանակի լայնությունը

bordercolor = սահմանի գույն- սահմանում է շրջանակի գույնը

Եկեք, օրինակ, մեր html աղյուսակին տանք 1 պիքսել լայնությամբ սև շրջանակ։

Այս պիտակի համար

ավելացնել ատրիբուտներ.

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

cellpacing=«Տիեզերքի լայնությունը պիքսելներով»- բջիջների միջև տարածություն

cellpadding = «լիցքավորման լայնությունը պիքսելներով»- ներքևում բջիջի ներսում (բջջի եզրից մինչև տեքստ, պատկեր, հղում...)

Օրինակ՝ բջիջների միջև նահանջը դարձնենք 10 պիքսել, իսկ բջիջի եզրից մինչև տեքստի նահանջը հասցնենք 20 պիքսել: Սա արվում է այսպես.

cellpadding = "20"cellpacing = "10"> 1.1 1.2 2.1 2.2

Եթե ​​դիտարկենք արդյունքը բրաուզերում, մենք հստակ տեսնում ենք, որ բջիջների միջև հեռավորությունը ( բջիջների տարածություն) մեր html աղյուսակի ավելացել է մինչև 10 պիքսել, իսկ տեքստի և ներքին եզրբջիջներն ավելացել են 20 պիքսելով:

1.1		1.2
2.1	2.2

Եթե ​​Ձեզ անհրաժեշտ է ընդհանրապես հեռացնել անցքերը, ապա պարզապես դրեք cellpadding = "0"Եվ cellpacing = "0".

8. Ինչպե՞ս տեղադրել մեկ html աղյուսակ մյուսի մեջ:

Մենք մոտենում ենք html աղյուսակների ուսումնասիրության վերջին փուլին։ Այժմ մենք կսովորենք, թե ինչպես կարելի է մի աղյուսակ տեղադրել մյուսի մեջ:

Օգտվելով օրինակից՝ 1.2 բջիջի ներսում մենք կտեղադրենք նոր աղյուսակ՝ բաղկացած մեկ տողից և երկու սյունակից: Ներքին html աղյուսակում մենք կսահմանենք կարմիր եզրագիծ՝ 2 պիքսել լայնությամբ և 0 պիքսել բջիջների միջև հեռավորությամբ։ Մենք նաև կտեղադրենք ներքին աղյուսակը բջիջի վերևում:

Սա արվում է շատ պարզ.

1.1 3.1 3.2 2.1 2.2

Ահա թե ինչ եղավ մեր աղյուսակի նոր փոխակերպումների արդյունքում (կարմիր բջիջները ներքին աղյուսակ են, որը գտնվում է մեծ սեղանի ներսում).

1.1		3.1 3.2
2.1	2.2

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

CSS հստակեցումը տալիս է աղյուսակների նախագծման անսահմանափակ հնարավորություններ: Լռելյայնորեն, աղյուսակը և աղյուսակի բջիջները չունեն տեսանելի սահմաններև ֆոն, մինչդեռ աղյուսակի ներսում գտնվող բջիջները միմյանց կից չեն:

Սեղանի բջիջների լայնությունը որոշվում է դրանց բովանդակության լայնությամբ, ուստի սեղանի սյունակների լայնությունը կարող է տարբեր լինել: Անընդմեջ բոլոր բջիջների բարձրությունը նույնն է և որոշվում է ամենաբարձր բջիջի բարձրությամբ:

Ձևաչափման աղյուսակներ

1. Սեղանի եզրագծեր

Լռելյայնորեն, աղյուսակը և դրա ներսում գտնվող բջիջները ցուցադրվում են բրաուզերում առանց տեսանելի եզրագծերի: Սեղանի սահմաններՍահմանային գույքով նշված են.

Աղյուսակ ( եզրագիծ-կոլապս. ծալել; /*հեռացնել դատարկ տարածությունները բջիջների միջև*/ եզրագիծ՝ 1px ամուր մոխրագույն; /*սահմանել աղյուսակի համար արտաքին սահման մոխրագույն 1px հաստությունը*/)

Վերնագրի բջիջների սահմաններըյուրաքանչյուր սյունակ նշված է րդ տարրի համար.

Th (սահման՝ 1px ամուր մոխրագույն;)

Բջջի սահմաններԱղյուսակի մարմինները նշված են td տարրի համար.

Td (սահման՝ 1px ամուր մոխրագույն;)

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

Th, td (սահմանը՝ 1px ամուր մոխրագույն;)

Դուք կարող եք ընդգծել աղյուսակի արտաքին եզրագիծը՝ դրան տալով մեծացած լայնություն.

Աղյուսակ (սահման՝ 3px ամուր մոխրագույն;)

Սահմանները կարող են մասամբ սահմանվել.

/* սեղանի համար սահմանեք 3px արտաքին մոխրագույն եզրագիծ */ աղյուսակը (վերևի եզրագիծը՝ 3px ամուր մոխրագույն;

Դուք կարող եք կարդալ ավելին սահմանային գույքի մասին:

2. Ինչպես սահմանել սեղանի լայնությունը և բարձրությունը

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

Սեղանի և սյունակի լայնությունըսահմանվում է օգտագործելով width հատկությունը: Եթե ​​աղյուսակը (լայնությունը՝ 100%;) նշված է սեղանի համար, ապա սեղանի լայնությունը հավասար կլինի այն կոնտեյների բլոկի լայնությանը, որում այն ​​գտնվում է:

Աղյուսակի և սյունակների լայնությունը սովորաբար նշվում է px-ով կամ %-ով, օրինակ.

Աղյուսակ (լայնությունը՝ 600px;) th (լայնությունը՝ 20%;) td:առաջին երեխա (լայնությունը՝ 30%;)

Սեղանի բարձրությունըչի նշվում: Շարքի բարձրությունըաղյուսակները կարող են մանիպուլյացիայի ենթարկվել՝ տարրերին վերին և ներքևի լցոններ ավելացնելով Եվ . Բարձրության ամրագրումը բարձրության հատկության միջոցով խորհուրդ չի տրվում:

Th, td (լիցք՝ 10px 15px;)

3. Ինչպես սահմանել սեղանի ֆոնը

Կանխադրված սեղանի ֆոնիսկ բջիջները թափանցիկ են: Եթե ​​աղյուսակը պարունակող էջը կամ բլոկն ունի ֆոն, այն կցուցադրվի աղյուսակի միջով: Եթե ​​ֆոնը նշված է և՛ աղյուսակի, և՛ բջիջների համար, ապա այն վայրերում, որտեղ աղյուսակի և բջիջների ֆոնը համընկնում են, տեսանելի կլինի միայն բջիջների ֆոնը: Աղյուսակի և դրա բջիջների ֆոնը կարող է լինել.
լցնում,
,
.

4. Աղյուսակի սյունակներ

CSS աղյուսակի մոդելը հիմնականում կենտրոնացած է տողերի (տողերի) վրա, որոնք ձևավորվել են պիտակի միջոցով

. Գործնականում կան դեպքեր, երբ անհրաժեշտ է սյունակների հատուկ ձևաչափում, ինչը հնարավոր է հետևյալ եղանակներով.

օգտագործելով պիտակը

Դուք կարող եք նախապատմություն սահմանել ցանկացած թվով սյունակների համար;

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

Օգտագործելով td:nth-child աղյուսակի ընտրիչը (սյունակի ընտրության կանոն), կարող եք ոճեր սահմանել ցանկացած աղյուսակի սյունակների համար:

Դուք կարող եք ավելին կարդալ CSS ընտրիչների մասին:

5. Ինչպես ավելացնել աղյուսակի վերնագիրը

Դուք կարող եք վերնագիր ավելացնել աղյուսակին՝ օգտագործելով պիտակ , և օգտագործելով caption-side հատկությունը, այն կարող է տեղադրվել աղյուսակի դիմաց կամ ներքևում: Վերնագրի տեքստը հորիզոնական հավասարեցնելու համար օգտագործեք text-align հատկությունը: Ժառանգված.

...

Աղյուսակ թիվ 1

Ընկերություն	Q1	Q2	Q3	Q4

վերնագիր (վերնագրի կողմը՝ ներքև, տեքստի հավասարեցում՝ աջ, լիցք՝ 10px 0, տառաչափը՝ 14px; ) Բրինձ. 2. Սեղանի տակ վերնագրի ցուցադրման օրինակ

6. Ինչպես հեռացնել տարածությունը բջջային շրջանակների միջև

Լռելյայնորեն, աղյուսակի բջիջների շրջանակները բաժանված են փոքր տարածությամբ: Եթե ​​աղյուսակի համար սահմանեք «collapse»՝ «collapse», ապա բացը կհեռացվի: Գույքը ժառանգված է։

Շարահյուսություն

Աղյուսակ (սահման-փլուզում. փլուզում;)
Բրինձ. 3. Միաձուլվող և առանձին բջիջների շրջանակներով աղյուսակների օրինակ

7. Ինչպես մեծացնել բջիջների շրջանակների միջեւ տարածությունը

Օգտագործելով սահմանների տարածություն հատկությունը՝ կարող եք փոխել բջիջների շրջանակների միջև հեռավորությունը: Այս հատկությունը վերաբերում է աղյուսակին որպես ամբողջություն: Ժառանգված.

Շարահյուսություն

Աղյուսակ (սահմանի ծալում. առանձին, եզրագծերի տարածություն՝ 10px 20px;) աղյուսակ (սահմանների ծալում. առանձին, սահմանների բացում՝ 10px;)
Բրինձ. 4. Բջջային շրջանակների միջև ավելացված տարածություններով աղյուսակների օրինակ

8. Ինչպես թաքցնել սեղանի դատարկ բջիջները

դատարկ բջիջներ հատկությունը թաքցնում կամ ցույց է տալիս դատարկ բջիջները: Ազդում է միայն բովանդակություն չպարունակող բջիջների վրա: Եթե ​​բջիջը դրված է ֆոնի վրա, իսկ աղյուսակը դրված է սեղանի վրա (սահման-կոլապս՝ collapse;), ապա բջիջը չի թաքցվի: Ժառանգված.

Ընկերություն	Q1	Q2	Q3
Microsoft-ը	20.3	30.5
Google	50.2	40.63	45.23

աղյուսակ ( եզրագիծ՝ 1px պինդ #69c; եզրագծեր՝ փլուզել՝ առանձին, դատարկ բջիջներ՝ թաքցնել; ) th, td (սահման՝ 2px պինդ #69c;) Բրինձ. 5. Սեղանի դատարկ բջիջը թաքցնելու օրինակ

9. Դասավորեք աղյուսակը՝ օգտագործելով table-layout հատկությունը

Սեղանի դասավորության դասավորությունը որոշվում է երկու մոտեցումներից մեկով՝ ֆիքսված դասավորություն կամ ավտոմատ դասավորություն: Ներքին դասավորության տակ այս դեպքումվերաբերում է, թե ինչպես է աղյուսակի լայնությունը բաշխվում բջիջների լայնությունների միջև: Գույքը ժառանգված չէ։

Շարահյուսություն

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

10. Սեղանի լավագույն դասավորությունը

1. Հորիզոնական մինիմալիզմ

Հորիզոնական աղյուսակները աղյուսակներ են, որոնցում տեքստը կարդացվում է հորիզոնական: Յուրաքանչյուր սուբյեկտ առանձին տող է: Նման աղյուսակներին կարող եք մինիմալիստական ​​տեսք հաղորդել՝ վերնագրի տակ երկու պիքսել սահման դնելով:

Աշխատակից	Աշխատավարձ	Բոնուս	Վերահսկող
Սթիվեն Քոքս	$300	$50	Բոբ
Ժոզեֆին Թան	$150	-	Անի
Ջոյս Մինգ	$200	$35	Էնդի
Ջեյմս Ա. Պենտել	$175	$25	Անի

աղյուսակ ( տառատեսակ-ընտանիք՝ «Lucida Sans Unicode», «Lucida Grande», Sans-Serif; տառաչափը՝ 14px; ֆոն՝ սպիտակ; առավելագույն լայնություն՝ 70%, լայնություն՝ 70%, եզրագիծ՝ ծալել՝ ծալել; տեքստ -հավասարեցրեք՝ ձախ; գծային ) tr:hover td (գույն՝ #6699ff;)

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

Td ( եզրագիծ՝ ներքև՝ 1px կոշտ #ccc; գույն՝ #669; լիցք՝ 9px 8px; անցումը՝ .3s գծային;

tr տարրին :hover էֆեկտ ավելացնելը կդարձնի մինիմալիստական ​​ոճով նախագծված աղյուսակները ավելի հեշտ ընթեռնելի: Երբ մկնիկը տեղափոխում եք բջիջի վրա, նույն տողում մնացած բջիջները միաժամանակ ընդգծվում են, ինչը հեշտացնում է տեղեկատվության հետագծումը, եթե աղյուսակներն ունեն բազմաթիվ սյունակներ:

Th ( տառատեսակի քաշը՝ նորմալ; գույնը՝ #039; լիցք՝ 10px 15px; ) td (գույնը՝ #669; եզրագծում՝ 1px ամուր #e8edff; լիցք՝ 10px 15px; ) tr:hover td (ֆոն՝ #e8edff ;)

2. Ուղղահայաց մինիմալիզմ

Չնայած նման աղյուսակները հազվադեպ են օգտագործվում, ուղղահայաց կողմնորոշված ​​աղյուսակները օգտակար են սյունակով ներկայացված օբյեկտների նկարագրությունները դասակարգելու կամ համեմատելու համար: Դուք կարող եք դրանք ձևավորել մինիմալիստական ​​ոճով՝ ավելացնելով տարածություն սյուները բաժանելու համար:

Th ( տառատեսակի քաշը՝ նորմալ; եզրագիծ՝ ներքև՝ 2px կոշտ #6678b1; եզրագիծ՝ աջ՝ 30px կոշտ #fff; եզրագիծ՝ ձախ՝ 30px կոշտ #fff; գույնը՝ #039; լիցք՝ 8px 2px; ) td ( եզրագիծ- աջ: 30px պինդ #fff;

3. Boxed ոճ

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

Th ( տառաչափ՝ 13px; տառատեսակի քաշ՝ նորմալ; ֆոն՝ #b9c9fe; եզրագիծ՝ 4px կոշտ #aabcfe; եզրագիծ՝ ներքև՝ 1px կոշտ #fff; գույն՝ #039; լիցք՝ 8px; ) td (ֆոն #e8edff; 1px կոշտ #fff:

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

Աղյուսակ ( տառատեսակ-ընտանիք՝ «Lucida Sans Unicode», «Lucida Grande», Sans-Serif; տառատեսակի չափը՝ 14px; առավելագույն լայնությունը՝ 70%, լայնությունը՝ 70%, տեքստի հավասարեցումը՝ կենտրոն; եզրագծում՝ ծալել: 7px պինդ #9baff1; font-weight պինդ #9baff1; #039 լիցք՝ 8px;

4. Հորիզոնական զեբրա

Զեբրայի սեղանը բավականին գրավիչ և հարմարավետ տեսք ունի։ Լրացուցիչ գույնՖոնը կարող է մարդկանց համար որպես տեսողական ազդանշան ծառայել աղյուսակը կարդալիս:

Th ( տառատեսակի քաշը՝ նորմալ; գույնը՝ #039; լիցք՝ 10px 15px; ) td (գույնը՝ #669; եզրագծում՝ 1px կոշտ #e8edff; լիցք՝ 10px 15px; ) tr:nth-child(2n) ( ֆոն՝ #e8edff;)

5. Թերթի ոճը

Այսպես կոչված թերթի էֆեկտին հասնելու համար կարող եք եզրագծեր կիրառել սեղանի տարրերի վրա և խաղալ ներսում գտնվող բջիջների հետ: Թերթի թեթև, մինիմալիստական ​​ոճը կարող է այսպիսի տեսք ունենալ. խաղալ գունային սխեմայի հետ, ավելացնել եզրագծեր, լիցք, տարբեր ֆոն և սավառնող էֆեկտ, երբ սավառնում է գծի վրա:

Աղյուսակ (սահման՝ 1px կոշտ #69c;) th (տառատեսակի քաշը՝ նորմալ; գույնը՝ #039; եզրագիծը՝ ներքևում՝ 1px գծիկ #69c; լիցք՝ 12px 17px; ) td (գույնը՝ #669; լիցք՝ 7px 17px; ) tr:hover td (ֆոն՝ #ccddff;)

Աղյուսակ (սահման՝ 1px կոշտ #69c;) th ( տառատեսակի քաշը՝ նորմալ; գույնը՝ #039; լիցք՝ 10px; ) td (գույնը՝ #669; եզրագծը՝ 1px գծիկ #fff; լիցք՝ 10px; ֆոն. #ccddff ) tr:hover td (ֆոն՝ #99bcff;)

Աղյուսակ (սահմանը՝ 1px կոշտ #6cf;) th ( տառատեսակի քաշը՝ նորմալ; տառաչափը՝ 13px; գույնը՝ #039; տեքստի փոխակերպում՝ մեծատառ; եզրագիծ՝ աջ՝ 1px կոշտ #0865c2; եզրագիծ՝ վերև՝ 1px պինդ #0865c2 եզրագիծ՝ 1px կոշտ #0865c2՝ 1px պինդ #fff;

6. Սեղանի ֆոն

Եթե ​​դուք փնտրում եք արագ և յուրահատուկ միջոցսեղանի ձևավորում, ընտրեք գրավիչ պատկեր կամ լուսանկար՝ կապված սեղանի թեմայի հետ և դրեք այն որպես սեղանի ֆոն:

Png") 98% 86% առանց կրկնության;) th (տառատեսակի քաշը՝ նորմալ; տառաչափը՝ 14px; գույնը՝ #339; լիցք՝ 10px 12px; ֆոնը՝ սպիտակ; ) td (գույնը՝ #669; եզրագիծ- վերև՝ 1px պինդ ֆոն՝ rgba(51, 51, 153, .2);

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

Այնուամենայնիվ, CSS-ի առանձնահատկությունները թույլ են տալիս փոփոխել աղյուսակի չափերը HTML-ում` հստակ նշելով ձեզ անհրաժեշտ լայնությունն ու բարձրությունը: Արդարության համար պետք է նշել, որ սեղանի ատրիբուտները նույնպես թույլ են տալիս սահմանել պահանջվող չափսեր. Այնուամենայնիվ, առայժմ կխոսենք միայն CSS-ի մասին։

Պետք է ընդգծել, որ յուրաքանչյուր աղյուսակ ունի իր նվազագույն լայնությունը և նվազագույն բարձրությունը, որոնց վրա ազդում է դրա բովանդակությունը: Եվ նույնիսկ եթե լայնության և բարձրության արժեքներն էլ ավելի փոքր դնեք, ոչինչ չի ստացվի: Սեղանի կողմերը չեն գերազանցի իրենց նվազագույնը։

Աղյուսակի լայնությունը նշելու համար անհրաժեշտ է օգտագործել CSS հատկություն լայնությունը, իսկ բարձրությունը սահմանելու համար անհրաժեշտ է օգտագործել գույքը բարձրությունը.

Օրինակում այն ​​կարծես սա է.

Սեղան (լայնությունը՝ 500px; բարձրությունը՝ 100px; )

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

Ամբողջական կոդը.

Աղյուսակ՝ տրված չափերով

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

Սեղանի լայնության և բարձրության արժեքները կարող են սահմանվել հետևյալ կերպ բացարձակ արժեք(պիքսելներով) և հարաբերական - տոկոսով: Օրինակ, համապատասխանաբար 20px և 20%:

Եթե ​​աղյուսակի չափերը սահմանելու համար օգտագործեք տոկոսներ, դրանք կհաշվարկվեն՝ հիմնվելով մայր տարրի չափերի վրա: Եթե ​​խոսենք մեր օրինակի մասին, ապա մենք խոսում ենքբրաուզերի պատուհանի մասին:

Մեկ այլ իմաստ էլ կա՝ ավտո։ Եվ դա առանձնահատուկ է, քանի որ դրա օգնությամբ սեղանի լայնությունն ու բարձրությունը հաշվարկվում են ավտոմատ կերպով՝ լռելյայն։ Գործնականում այս արժեքը նշելն այսպիսի տեսք ունի.

Լայնությունը՝ ավտոմատ;

Բարձրությունը՝ ավտոմատ;

Ցանկանում ենք ձեր ուշադրությունը հրավիրել ևս մեկ բանի վրա. կարևոր կետ. Ավելի լավ է բարձրությունը տոկոսով չնշել, քանի որ, որպես կանոն, այս դեպքում դրանք չեն աշխատի։

Առանձին բջիջների և սյունակների չափերի նշում

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

Բջիջների չափափոխումը կատարվում է օգտագործելով նույն CSS հատկությունները, ինչ աղյուսակի չափերը, մասնավորապես. լայնությունըԵվ բարձրությունը.

Բջիջներում ոճեր ավելացնելու համար կարող եք օգտագործել երկու տարբերակներից մեկը.

1. Բջիջներին տվեք առանձին դասերի անուններ: Այն կունենա հետևյալ տեսքը՝ class="cell-50px"

   Եվ դրանից հետո դուք պետք է կիրառեք ոճեր այս դասերի համար:

2. Միացնել հատկանիշը ոճը, որի ներսում գրեք անհրաժեշտ CSS կոդը։

Գործնականում երկրորդ տարբերակը կունենա հետևյալ տեսքը.

...

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

Աղյուսակ՝ տրված չափերով

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

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

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

Հաճախ աղյուսակում տեքստի չափը փոխելու անհրաժեշտություն է առաջանում: Օրինակ, վերնագրի բջիջներում: Դա կարելի է անել՝ օգտագործելով CSS հատկությունը տառաչափ. Եկեք սահմանենք տարրերի տառաչափը :

Th (տառաչափը՝ 30px; )

Սա ավարտում է այս դասը: Առաջարկում եմ ուշադիր մտածել տնային առաջադրանքների մասին: Պարզապես ուշադիր ուսումնասիրեք այն և մտածեք դրա մասին: Ամենայն բարիք բոլորին:

 

---

Կարդացեք.
Բոլոր եղանակային մոդուլային տիպի շչակի բարձրախոս Շչակի նպատակը Ի՞նչ է ասում Աստվածաշունչը վատ աշխատանքի մասին: Ռուսաց լեզվի դաս «փափուկ նշան գոյականների ֆշշոցից հետո» Առատաձեռն ծառը (առակ) Ինչպես երջանիկ ավարտ ունենալ հեքիաթի առատաձեռն ծառը Զինվորական ծառայության համար պիտանիության կատեգորիաների դասակարգում