Աղյուսակը բջիջների ցանց է, որոնք կազմում են տողեր և սյուներ: Աղյուսակների օրինակները ներառում են տարբեր ֆինանսական հաշվետվություններ, մարզական արդյունքներ, օրացույցներ, ժամանակացույցեր և այլն: Individualանցի առանձին բլոկը կոչվում է սեղանի բջիջ: Աղյուսակի բջիջները կարող են պարունակել բազմազան տեղեկատվություն, ներառյալ թվեր, տեքստ և նույնիսկ վիդեո և աուդիո առարկաներ: Օգտագործելով HTML լեզուն ՝ աղյուսակները գրվում են տող առ տող:
Տարր
ծառայում է որպես տարա տարրերի համար, որոնք սահմանում են աղյուսակի բովանդակությունը: Սեղանի տող ստեղծելու համար հարկավոր է ավելացնել տարրի ներսում
զուգավորված արգելափակման պիտակ
(անգլերենից կրճատված «taye row» - սեղանի տող): Քանի պիտակ
Դուք ավելացնում եք, աղյուսակում այնքան տողեր և կլինեն: Բացման պիտակը
նշանակում է աղյուսակի նոր տողի սկիզբ: Դրանից հետո տեղադրվում են տարրերը |
(անգլերենից կրճատված «taye data» - աղյուսակի տվյալներ), որոնցից յուրաքանչյուրը նշում է այս շարքի առանձին բջիջ: Ներքին տարր |
դուք ձեր բովանդակությունը (տեքստ, թվեր, պատկերներ և այլն) տեղադրում եք այդ բջիջում: Տողի վերջը նշվում է ավարտի պիտակով |
.
Տարր
(կրճատ անգլերեն «taYe վերնագիր» - աղյուսակի վերնագիր) - սեղանի ընտրովի տարր, որն օգտագործվում է նույն կերպ, ինչպես տարրը |
սակայն, դրա նպատակը տողի կամ սյունակի վերնագրի ստեղծումն է: Սովորաբար տարրը |
տեղադրված է սեղանի առաջին շարքում: Brննարկիչները տեքստ են ցուցադրում տարրի մեջ |
համարձակ և կենտրոնացրեք այն բջիջի համեմատ: Կոդում տարր օգտագործելը |
օգնում է այն մարդկանց, ովքեր օգտագործում են էկրանի ընթերցողներ, ինչպես նաև բարելավում է որոնիչների ինդեքսավորման աղյուսակների աշխատանքը:
Դիտարկենք մի պարզ աղյուսակ, որն ունի երեք տող և երեք սյունակ, իսկ առաջին տողում գտնվող բջիջները համապատասխան սյունակների վերնագրերն են: Լռելյայն, սեղանները սովորաբար ցուցադրվում են առանց եզրագծի.
Օրինակ ՝ պարզ HTML աղյուսակ
| Վերնագիր 1 | Վերնագիր 2 | Վերնագիր 3 |
|---|
| Բջիջ 2x1 | Բջիջ 2x2 | Բջիջ 2x3 |
| Բջիջ 3x1 | Բջիջ 3x2 | Բջիջ 3x3 |
Սեղանի եզրագիծ
Մենք արդեն գիտենք, որ լռելյայնորեն աղյուսակները ցուցադրվում են առանց եզրագծի: Սեղանի շուրջ եզրագիծ ավելացնելու համար դուք պետք է որոշ պարզ ոճի կանոններ նշեք ձեր փաստաթղթում: Սեփականություն սահմանվերահսկում է սեղանի ցանցի գծերի ցուցադրումը, ինչպես նաև սահմանում է սեղանի շուրջ եզրագծի լայնությունը պիքսելներով: Սեղանի շուրջ և բջիջների միջև հայտնվում է սահման: Ավելացրեք մեկ պիքսել լայն շրջանակ արդեն ստեղծված սեղանին `հատկությունը սահմանելով սահմանսեղանի բոլոր տարրերի համար, օրինակ ՝ այսպես.
Օրինակ. Գույքի կիրառում սահման
Շրջանակ սեղանի շուրջ
| Վերնագիր 1 | Վերնագիր 2 | Վերնագիր 3 |
|---|
| Բջիջ 2x1 | Բջիջ 2x2 | Բջիջ 2x3 |
| Բջիջ 3x1 | Բջիջ 3x2 | Բջիջ 3x3 |
Մեկ սեղանի շրջանակ
Լռելյայն, հարակից սեղանի բջիջները կունենան իրենց սահմանը: Սա հանգեցնում է մի տեսակ «կրկնակի սահմանի», ինչպես երևում է վերը նշված օրինակում: «Կրկնակի սահմանից» ազատվելու համար ավելացրեք CSS հատկությունը սահման-փլուզումձեր ոճաթերթին ՝
Օրինակ. Գույքի կիրառում սահման-փլուզում
Շրջանակ սեղանի շուրջ
| Վերնագիր 1 | Վերնագիր 2 | Վերնագիր 3 |
|---|
| Բջիջ 2x1 | Բջիջ 2x2 | Բջիջ 2x3 |
| Բջիջ 3x1 | Բջիջ 3x2 | Բջիջ 3x3 |
Սեղանի դաշտերը և տարածությունը
Լռելյայն, սեղանի բջիջները չափված են իրենց բովանդակությանը համապատասխանելու համար, բայց երբեմն անհրաժեշտ է սեղանի տվյալների շուրջ մի փոքր լիցք թողնել: Քանի որ տարածությունը և լուսանցքները կապված են տվյալների ներկայացման տարրերի հետ, այս տարածքը կարող է հարմարեցվել ՝ օգտագործելով CSS ոճի թերթեր: Բջջային դաշտ ( լիցք) Արդյո՞ք բջջի բովանդակության և դրա եզրագծի միջև հեռավորությունն է: Այն ավելացնելու համար օգտագործեք գույքը լիցքտարերքի տալ |
կամ |
... Բջիջների տարածություն ( սահման-տարածություն) Արդյո՞ք նրանց միջև հեռավորությունը ( |
կամ |
): Նախ նշանակեք արժեքը առանձինսեփականություն սահման-փլուզումտարր
և այնուհետև սահմանեք բջիջների միջև հեռավորությունը ՝ փոխելով պարամետրի արժեքը սահման-տարածություն... Նախկինում ատրիբուտները պատասխանատու էին դաշտերի և բջիջների տարածության համար: բջջային ծածկոցեւ բջիջների տարածությունտարր
բայց դրանք հնացած էին HTML5 ճշգրտման մեջ:
Օգտագործման օրինակ լիցքեւ սահման-տարածություն:
Օրինակ ՝ հատկությունների կիրառում լիցքեւ սահման-տարածություն
երեսպատում և սահմանագծում
Աղյուսակի լայնությունը
Theննարկչի պատուհանի աղյուսակի զբաղեցրած լայնությունը կարող է որոշվել ՝ օգտագործելով հատկությունը լայնությունը CSS ՝ պիքսելներով կամ տոկոսներով: Աղյուսակի լայնությունը պիքսելներով նշելը թույլ է տալիս որոշել դրա ճշգրիտ լայնությունը: Տոկոսադրույքը թույլ է տալիս սեղանը դարձնել ճկուն, այսինքն. այն «կձգվի» կամ «կծկվի» ՝ կախված այն բանից, թե էջում ինչ այլ տարրեր կան և որքան մեծ է դիտարկիչի պատուհանը:
Ահա սեփականության օգտագործման օրինակ լայնությունը: Աղյուսակ (լայնությունը `100%;) Օրինակ. Գույքի կիրառում լայնությունը
լայնությունը `100%
Միացնող բջիջներ (սև և շարանի երկարություն)
Աղյուսակի կառուցվածքի հիմնական առանձնահատկություններից մեկը բջիջների միացումն է, որը ենթադրում է բջիջի ձգում ՝ մի քանի տողերի կամ սյուների բացման միջոցով: Սա թույլ է տալիս ստեղծել սեղանի բարդ կառուցվածքներ `վերնագրեր
կամ բջիջներ |
համակցվում են հատկանիշներ ավելացնելով colspanկամ շարքերի երկարություն... Հատկանիշ colspanորոշում է բջիջների թիվը, որոնցով տվյալ բջիջը տարածվում է հորիզոնական, և շարքերի երկարություն- ուղղահայաց:
Միացրեք սյունակները
Սյունակի համակցումը ձեռք է բերվում հատկանիշի միջոցով colspanտարրերի մեջ |
կամ |
- բջիջը ձգվում է աջ ՝ հաջորդ սյուները ծածկելու համար: Հետևյալ օրինակում հատկանիշի արժեքը colspanհավասար է 2 -ի, ինչը նշանակում է, որ բջիջը պետք է պարունակի երկու սյունակ:
Օրինակ ՝ հատկանիշի կիրառում colspan
Colspan հատկանիշը
| colspan= "2"> Երկու սյունակ ունեցող բջիջ |
|---|
| Բջջ 1 | Բջիջ 2 |
| Բջիջ 3 | Բջիջ 4 |
Միացնող տողեր
Տողերը միավորված են հատկանիշի միջոցով շարքերի երկարություն, իրենց պահում են միաձուլված սյուների նման, միակ տարբերությամբ, որ բջիջների շրջանակը վերևից ներքև է և ընդգրկում է բազմաթիվ տողեր:
Այս օրինակը սեղանի առաջին բջիջը ձգում է երկու տող ներքև.
Օրինակ ՝ հատկանիշի կիրառում շարքերի երկարություն
| Բջջը երկու տողի վրա |
Բջջ 1 | Բջիջ 2 |
|---|
| Բջիջ 3 | Բջիջ 4 |
Rowspan հատկանիշը
| շարքերի երկարություն= "2"> Բջջ երկու տողի վրա |
Բջջ 1 | Բջիջ 2 |
|---|
| Բջիջ 3 | Բջիջ 4 |
Աղյուսակի վերնագիր
Pairույգ պիտակը օգտագործվում է աղյուսակի վերնագիր կամ մակագրություն ստեղծելու համար
(անգլերեն մակագրությունից `ստորագրություն): Տարր
սեղանի վերնագիրը կազմակերպելու համար է: Գտնվում է պիտակից անմիջապես հետո
բայց տողի կամ վանդակի նկարագրությունից դուրս:
Օրինակ ՝ Պիտակի օգտագործումը
Վերնագրի տարր
Սա սեղանի վերնագիրն է
| Բջջը երկու տողի վրա |
Բջջ 1 | Բջիջ 2 |
|---|
| Բջիջ 3 | Բջիջ 4 |
Սեղանի տարրերի պիտակների խմբավորում
Աղյուսակի տարրերը խմբավորելու համար օգտագործեք պիտակները
,
եւ
... Ինչպես վեբ էջը կարող է պարունակել վերնագիր, տեքստ և ստորագիր էջ, այնպես էլ սեղանը կարող է պարունակել գլուխ, տեքստ և ստորոտ: Աղյուսակի վերևում տողերը տրամաբանորեն խմբավորելու համար (այսինքն ՝ աղյուսակի վերին գլուխը ստեղծելու համար) օգտագործեք պիտակը
... Աղյուսակի վերնագրերը պետք է տեղադրվեն տարրի մեջ
, օրինակ:
| Վերնագիր 1 | Վերնագիր 2< /th> |
|---|
Աղյուսակի հիմնական բովանդակությունը (մարմինը) պետք է լինի տարրի ներսում
(աղյուսակում կարող են լինել մի քանի այդպիսի բլոկներ): Աղյուսակի ներքևի տողերը տրամաբանորեն խմբավորելու համար (այսինքն ՝ աղյուսակի «ստորագիր» ստեղծելու համար) օգտագործեք պիտակը
(մեկ աղյուսակում թույլատրվում է ոչ ավելի, քան մեկ պիտակ
): Աղբյուրի կոդը ՝ պիտակը
տեղադրված է պիտակի առաջ
... Բացի տրամաբանական խմբավորումից, տարրերի օգտագործման պատճառներից մեկը
եւ
եթե ձեր սեղանը չափազանց երկար է ՝ էկրանին միաժամանակ ցուցադրվելու համար (կամ տպվելու համար), ապա դիտարկիչը կցուցադրի վերնագիրը (
) և վերջին տողը (
), երբ օգտվողը ոլորում է ձեր սեղանի միջով:
Օրինակ ՝ Պիտակներ
,
եւ
Thead, tbody և tfoot պիտակներ
| Սա սեղանի վերնագիրն է |
|---|
| Սա սեղանի ստորոգյալն է |
| Բջջ 1 | Բջիջ 2 | Բջիջ 3 | Բջիջ 4 |
Չնայած այն հանգամանքին, որ մենք առջևում ենք
ավելացվել է
, այն, այնուամենայնիվ, հայտնվում է աղյուսակի վերջում: Սա գալիս է նրանից, որ
կարող է պարունակել բազմաթիվ տողեր: Բայց զննարկիչը պետք է աղյուսակի ստորին հատվածը տա, նախքան տվյալների բոլոր (պոտենցիալ բազմաթիվ) տողերը ստանալը: Ահա թե ինչու
ծածկագրում գրված է տարրից առաջ
.
Առաջադրանքներ
Հեռացրեք սեղանի կրկնակի եզրագիծը
Լռելյայն, սեղանի եզրագիծը ունի երկակի սահմանի ազդեցություն, փոխեք կոդը, որպեսզի այս եզրագծի բոլոր տողերը դառնան մեկ:
Աղյուսակները ամենակարևոր և միևնույն ժամանակ բարդ տարրերից են, որոնք պետք է առկա լինեն վեբ էջերում: Նրանց օգնությամբ հարմար է բավականին հակիրճ ձևով ներկայացնել կարևոր և օգտակար տեղեկատվություն: Իհարկե, տարբեր շարժիչներով աշխատող կաղապարների խմբագիրների մեծամասնությունը թույլ է տալիս ավտոմատ կերպով աղյուսակ տեղադրել կայքի էջում կամ առանձին հրապարակման մեջ, բայց ի՞նչ կլինի, եթե վեբ ռեսուրսի դիզայնը, դրա էջերը ստեղծվեն զրոյից: Այնուհետև սկսնակ կախարդը կարող է բախվել մի խնդրի. Ինչպես դա անել: Եկեք պարզենք, թե ինչպես ճիշտ և արագ ստեղծել այս տարրը: Խմբագրի ընտրությունԱռաջին հերթին, սկսելով ստեղծել աղյուսակ, դուք պետք է որոշեք այն խմբագրի մասին, որում աշխատելու եք: Իհարկե, ամենահեշտ ձևն այն ծրագիրն ընտրելն է, որում ստեղծում եք կայքի հիմնական ծածկագիրը: Բայց այս նպատակների համար ավելի լավ է օգտագործել լավ հին նոթատետր: Դուք կարող եք հարցնել, թե ինչու՞ բարդացնել ձեր կյանքը, քանի որ եթե ամեն ինչ միանգամից անում եք խմբագրում, ապա արդյունքը նույնպես կարելի է տեսնել անմիջապես, և կարող եք նաև օգտագործել ծրագրի հուշումները: Այո, սա ճիշտ է, բայց զրոյից աղյուսակ ստեղծելով ՝ դուք ոչ միայն կկարողանաք մանրակրկիտ ուսումնասիրել դրա ստեղծման սկզբունքը, այլև կանխել հիմնական կոդի տհաճ տառասխալներն ու սխալները: Երբեմն պատահում է, որ կուրսորը պատահաբար ներքև է շարժվում, և սխալ գրելու ընթացքում սխալը սողում է ծածկագրի մեջ, ինչը երբեմն դժվար է գտնել: Նոթատետրում սեղան ստեղծելուց հետո կարող եք պատճենել դրա ծածկագիրը և տեղադրել այն այնտեղ, որտեղ ցանկանում եք: Աղյուսակ ստեղծելու ալգորիթմՆախ, եկեք միասին կազմենք կարճ ալգորիթմ, թե ինչպես կարելի է աղյուսակ կազմել HTML- ում: Սա այնպես է, որ դուք հասկանաք յուրաքանչյուր քայլի հաջորդականությունը: Այնուհետև մենք ճշգրիտ կվերլուծենք, թե ինչպես կատարել կետերից յուրաքանչյուրը: 
Սկսենք նախապատրաստական քայլերից: 1. Թղթի թերթիկի վրա գծեք սեղանի սխեմատիկ պատկերը: 2. Մենք հաշվում ենք տողերի եւ բջիջների թիվը: Եթե վերջիններիս թիվը տարբեր է, ապա յուրաքանչյուր տողի համար հաշվում ենք առանձին: 3. Որոշեք տողի վերնագրի բջիջների քանակը (օրինակ ՝ «Ոչ», «Անուն» և այլն բջիջները): 4. Գրեք աղյուսակի հիմնական պարամետրերը `գույնը, բարձրությունը և լայնությունը, տեքստի հավասարեցումը` ընդհանրապես, ինչ որ անհրաժեշտ եք համարում: 1. Տեղադրեք աղյուսակի պիտակները: 2. Տեղադրեք տողի պիտակներ ՝ հիմնվելով ձեզ անհրաժեշտ թվի վրա: 3. Տողերում տեղադրեք բջիջների պիտակները (կանոնավոր և մեծատառ) ՝ նույնպես հիմնվելով թղթի վրա ձեր գրած թվի վրա: 4. Սահմանեք աղյուսակի պարամետրերը որպես ամբողջություն: 5. Անհրաժեշտության դեպքում առանձին բջիջների համար սահմանեք ցուցանիշներ: 6. Մենք մեր բջիջները լցնում ենք տեքստով: 
Ստեղծեք սեղանԱյսպիսով, դուք ընտրել եք խմբագիր, այժմ եկեք պարզենք, թե ինչպես ստեղծել աղյուսակ HTML- ում: Պիտակը, որով սեղանը տեղադրվում է էջի կոդի մեջ ( ), զուգավորված է, այսինքն ՝ մեր շինարարությունը սկսվում է այս պիտակով և ավարտվում հետևյալով .Աղյուսակի պիտակները տեղադրելով ՝ մենք շարունակում ենք տողեր և բջիջներ ստեղծել: Անմիջապես մենք նշում ենք, որ այս տարրերը նույնպես զուգակցված են: Պիտակ սահմանում է տողեր, և | - բջիջներ: Վերնագրի բջիջների համար օգտագործեք զուգավորված տարրը | . Ինչպես արդեն նշվեց, առաջին քայլը տողերը կազմելն է, այնուհետև դրանցում բջիջների գրումը: Չշփոթվելու համար խորհուրդ ենք տալիս կամ ներդնել յուրաքանչյուր բլոկի միջև մեկ կամ երկու տողերում, կամ գրել տարրերի նոր բլոկ `օգտագործելով« ներդիր »ստեղնը: Ինչպե՞ս կարող է այն նման լինել: Դրա նման: ;;| P / p No. | ;| Ազգանունը | ; ;;| 1 | ;| Իվանովը | ; | ; .
Ինչպես տեսնում եք, դրանում ոչ մի բարդ բան չկա: Հիմնական բանը չպետք է շփոթվել տողերի և բջիջների քանակի մեջ: Հակառակ դեպքում սեղանը կարող է շեղվել: Մենք քննարկել ենք HTML- ում աղյուսակի ստեղծումը, այժմ կարող ենք անցնել ինչպես բուն մատրիցայի, այնպես էլ նրա տողերի և բջիջների պարամետրերին: 
Աղյուսակի պարամետրերԵրբ ծածկագիրը գրվում է, պետք է ուշադրություն դարձնել հետևյալ կետերին ՝ սահմանների հավասարեցում, ֆոն, տեքստ և այլն: Աղյուսակի պարամետրերը դրված են պիտակում ... Դրանք ներառում են.1. Սահման - սահմանների լայնությունը: Սահմանել որպես ամբողջ թիվ: Լռելյայն, ցանկացած աղյուսակի սահմանները զրո են: 2. Bordercolor - եզրագծի գույն: Այն կարող է սահմանվել որպես տասնվեցերորդ գույնի կոդ (# 00008B), իսկ դրա անունը անգլերենով (DarkBlue): Լռելյայն միշտ մոխրագույն է: 3. Bgcolor - Նաև սահմանվում է ծածկագրով կամ անունով: 4. Հավասարեցում - տեքստի հավասարեցում սեղանի հետևում: Կանխադրվածը ձախից հավասարեցված է: Այս պարամետրի համար կան հետևյալ ընտրանքները. - ձախ - փաթեթավորեք դեպի աջ;
- աջ -ձախից փաթաթում;
- կենտրոն - ցուցադրում է սեղանը կենտրոնում ՝ առանց փաթաթելու:
5. Լայնություն և բարձրություն - սեղանի լայնություն և բարձրություն: Այն կարող է սահմանվել ինչպես պիքսելներով, այնպես էլ տոկոսային հարաբերությամբ (բրաուզերի պատուհանի չափի համեմատ): Այս կամ այն ցուցանիշը նշանակելով ՝ պետք է հատուկ ուշադրություն դարձնել դիզայնին: Պարամետրին պետք է հաջորդի «հավասար» նշանը, որին հաջորդում է չակերտների մեջ նշված արժեքը: Ինչ վերաբերում է տեքստի գույնին, այն ոճավորված է այնպես, ինչպես սովորական տեքստը ՝ HTML ձևաչափով: Սեղանի ձևավորման օրինակ. ;;| P / p No. | ;| Ազգանունը | ; ;;| 1 | ;| Իվանովը | ; | ; .
Լարային պարամետրերԱյսպիսով, մենք արդեն պարզել ենք, թե ինչպես կարելի է աղյուսակ կազմել HTML- ում և գրանցել դրա հիմնական պարամետրերը: Բայց ինչ անել, եթե մենք պետք է ընդգծենք տողը: Արդյո՞ք այն պետք է այլ կերպ ձևավորված լինի սեղանի հիմնական տեքստից: Լարի պարամետրերը գրված են պիտակում ճիշտ նույնը, ինչ աղյուսակի տվյալները: Հետևյալ փոփոխականները կարող են սահմանվել տողի համար.1. Ձեզ արդեն հայտնի եզրագիծ, սահմանային գույն և բգգույն: 2. Հարթեցում - տեքստի հավասարեցում տողում: Այն կարող է լինել ձախ, կենտրոն և աջ: 3. Valign - այս պիտակը ուղղում է տեքստը ուղղահայաց: Այն տանում է հետևյալ արժեքներին. - վերև - տեքստը հավասարեցված է վերին եզրագծին.
- միջին - կենտրոնում;
- ներքև - ստորին եզրագծի երկայնքով:
Տողի ձևավորման օրինակ. Բջջի պարամետրերԵվ վերջին բանը, որին արժե ուշադրություն դարձնել նրանց համար, ովքեր ցանկանում են իմանալ, թե ինչպես պատրաստել սեղան HTML- ում, առանձին բջիջների պարամետրերն են ՝ կանոնավոր և մեծատառերով: Փաստորեն, ամեն ինչ արվում է այնպես, ինչպես սեղանի կամ տողի համար: Միակ բանը այն է, որ ավելացվում է ևս երկու կարևոր տարր. 1. Colspan - այս պարամետրը սահմանում է սյունակների քանակը, որոնցով կարող է անցնել բջիջը: 2. Rowspan - արդեն ցույց է տալիս այս բջիջի զբաղեցրած տողերի քանակը: Քանի որ դիզայնը չի տարբերվում տող գրելուց, մենք կոդի օրինակ չենք տա: 
եզրակացություններՍեղան պատրաստելը այնքան էլ դժվար չէ, որքան կարող էր թվալ առաջին հայացքից: Նրա ծածկագիրը գրելիս գլխավորը համառությունն ու ուշադրությունն են: Ինչ վերաբերում է HTML- ում աղյուսակի տեղադրման եղանակին, ապա պարզապես անհրաժեշտ է պատճենել և տեղադրել դրա ծածկագիրը ձեր էջի ճշգրիտ տեղում, որտեղ, ձեր կարծիքով, այն պետք է տեղակայված լինի: Ազատորեն փորձարկեք, և շուտով դուք կյուրացնեք կատարելության հասնելու սեղաններ ստեղծելու տեխնիկան: Հաջողություն!
HTML աղյուսակները այնքան ֆունկցիոնալ են, որ դրանք կարող եք օգտագործել ամբողջ կայքերը տպելու համար (կարդալ): Այժմ մենք կխոսենք վեբ էջի մեջ պարզ HTML աղյուսակներ տեղադրելու, միայն նշագրումը վերլուծելու, բայց դիզայնին չդիպչելու մասին, քանի որ ավելի լավ է սեղանները զարդարել CSS ոճերով:
Աղյուսակի պիտակներ և հատկանիշներ
Ահա աղյուսակներ ստեղծելու համար անհրաժեշտ հիմնական տարրերը.
- կոնտեյները, որի ներսում գտնվում է սեղանը (նույնը, ինչ պիտակավորված կամ
համարակալված ցուցակների համար):
- սահման- հատկանիշ, որը որոշում է շրջանակների հաստությունը: Դրա փոխարեն ավելի լավ է օգտագործել սահմանային CSS հատկությունը:
-
սահմանում է սեղանի ստորագրությունը: Անհրաժեշտ չէ օգտագործել տարան, բայց եթե դեռ որոշեք վերնագրել սեղանը, ապա դրեք այն պիտակից անմիջապես հետո
, բջիջներից և գծերից դուրս:
- սեղանի տող պարունակող զույգ պիտակ (նույն մակարդակի հորիզոնական տեղակայված բջիջներ):
|
- պիտակը, որը ստեղծում է սեղանի վերնագրի բջիջ: Արտաքին, դրա բովանդակությունը տարբերվում է այլ բջիջների բովանդակությունից `սովորաբար տեքստը ներսում |
դիտարկիչը համարձակ է և կենտրոնացված:
- կոնտեյներ, որի միջոցով ստեղծվում է պարզ բջիջ: Քանի՞ նման պիտակ կպարունակի տողը (պիտակ
, դրանում կլինեն այնքան բջիջ ՝ մեկ պիտակ - մեկ բջիջ:
-
թույլ է տալիս խմբավորել սյունակներ ՝ արագ և առանց կոդերը շաղ տալով ՝ դրանք բնութագրելու համար ընդհանուր բնութագրերը: Օգտագործելով կոնտեյներ, կարող եք սեղանի տրամաբանական մասերը միմյանցից առանձնացնել: Գտնվում է պիտակից հետո
, եթե ոչ, ապա հետո
.
-
օգտագործվում է նույն նպատակով, ինչ
.
կարող է պարունակել
բայց ոչ հակառակը:
- տարածություն- հատկանիշ, որը սահմանում է սյունակների քանակը, որոնց վրա կիրառվում են կոնտեյների հատկությունները
.
-
,
եւ
- բեռնարկղեր, որոնք թույլ են տալիս սեղանը համապատասխանաբար բաժանել վերին (վերնագրերի), հիմնական (մարմնի) և ստորին (վերջնական) մասերի: HTML աղյուսակում այս պիտակների հաջորդականությունը նույնն է, ինչ տարաների հաջորդականությունը
,
եւ HTML փաստաթղթում:
- colspanանհրաժեշտ է անընդմեջ բջիջները համատեղելու համար: Հատկանիշի արժեքը պարունակում է մի շարք, որը սահմանում է միավորվող բջիջների քանակը:
- շարքերի երկարությունբջիջները միավորում է սյուների մեջ:
Աղյուսակ ստեղծելու օրինակ
Ստեղծեք HTML փաստաթուղթ և պատճենեք դրա մեջ հետևյալ կոդը.
Օրինակ աղյուսակ
Վեբ կայքի ստեղծման գործիքներ
| Նշանակումը | Գործիք |
| Նշում | Html | XHTML |
| Գրանցում | CSS |
| Զարգացումը | PHP | Պիթոն |
Բրաուզերում փաստաթուղթն այսպիսի տեսք կունենա. Եկեք վերլուծենք, թե ծածկագրի որ տողերն են ինչի համար պատասխանատու:
- բացեց սեղանը `սահմանելով շրջանակների հաստությունը:
-
Վեբ կայքի ստեղծման գործիքներ
- վերնագրված է:
- գիծ բացեց:
|
Նշանակումը |
- ստեղծեց վերնագրի դիզայնով բջիջ:|
Գործիք |
- շարքում ստեղծեց երկրորդ վերնագրի բջիջ: Colspan պարամետրը ցույց տվեց, որ այս բջիջը պետք է զբաղեցնի երկուսը հորիզոնական:
- փակեց գիծը: Մնացած տողերը ստեղծվել են նույն կերպ: |
Նշում |
Html |
XHTML |
- ավելացրեց աղյուսակի երկրորդ շարքը սովորական, ոչ վերնագրով բջիջներով: Հետագա տողերն ու բջիջները տեղադրվեցին նմանապես:
- փակեց սեղանը:
սեղանի մարմինն է: Մարմինը կազմված է շարքերից և սյուներից: Աղյուսակը լրացվում է տող առ տող:
Յուրաքանչյուր պիտակ ստեղծում է նոր գիծ: Հետագայում `բնադրված ստեղծվում են սյուներ: Կարող են ստեղծվել բազմաթիվ սյուներ: Այս դեպքում դուք պետք է վերահսկեք յուրաքանչյուր տողի սյունակների քանակը: Օրինակ, եթե առաջին տողում կար 5 սյունակ, ապա հաջորդ տողերում նույնպես պետք է լինի 5 սյունակ: Հակառակ դեպքում սեղանը լողալու է: Հնարավոր է համատեղել բջիջները:
Ինչպես պատրաստել սեղան html- ում
Եկեք օրինակ բերենք, html կոդ.
| Օրինակ աղյուսակ |
| Սյունակ 1 |
Սյունակ 2 |
Ուշադրություն դարձրեք բջիջին | ... Մենք օգտագործում ենք հատուկ colspan հատկանիշը `բջիջները հորիզոնականորեն համատեղելու համար: Նրա թվային արժեքը ցույց է տալիս սյունակների քանակը, որոնք պետք է համատեղել: Կա նաև այս հատկանիշի անալոգը `պիտակը | (աղյուսակի վերնագիր), որտեղ նույնպես պետք է գրել colspan: Արդյունքը կլինի նույնը: Բայց սովորական td- ն հաճախ օգտագործվում է:
Այժմ եկեք ավելի սերտ նայենք պիտակի բոլոր հատկանիշներին:
.
Պիտակի հատկանիշներ և հատկություններ
Դեպի բացման պիտակը կարող եք գրել տարբեր հատկանիշներ:
1. Property align = "պարամետր" - սահմանում է աղյուսակի հավասարեցումը: Այն կարող է վերցնել հետևյալ արժեքները.
Վերոնշյալ օրինակում մենք աղյուսակը հավասարեցրել ենք կենտրոնի հավասարեցում = "կենտրոն":
Այս հատկանիշը կարող է կիրառվել ոչ միայն սեղանի, այլև սեղանի առանձին բջիջների նկատմամբ: կամ տողեր | ... Այսպիսով, հավասարեցումը տարբեր բջիջներում տարբեր կլինի:
Օրինակ
| ... |
| ... |
...
2. Գույքի ֆոն = "URL" - սահմանում է ֆոնի պատկերը: URL- ի փոխարեն պետք է գրել ֆոնային պատկերի հասցեն:
Օրինակ
| Օրինակ աղյուսակ |
| Սյունակ 1 |
Սյունակ 2 |
Էջում փոխակերպված է հետևյալի.
Վերոնշյալ օրինակում մեր ֆոնային պատկերը գտնվում է img թղթապանակում (որը գտնվում է html էջի նույն գրացուցակում), և պատկերը կոչվում է fon.gif: Նշենք, որ պիտակի մեջ մենք ավելացրել ենք style = "color: white;" ... Քանի որ ֆոնը գրեթե սև է, այնպես որ տեքստը չի միաձուլվում ֆոնին, մենք տեքստը դարձրինք սպիտակ:
3. Property bgcolor = "գույն" - սահմանում է սեղանի ֆոնի գույնը: Որպես գույն, դուք կարող եք ընտրել ամբողջ ներկապնակից որևէ մեկը (տես html գույների ծածկագրերն ու անունները)
4. Գույքի սահման = "համար" - սահմանում է սեղանի եզրագծի հաստությունը: Նախորդ օրինակներում մենք սահմանեցինք սահման = "1", ինչը նշանակում է, որ եզրագծի լայնությունը 1 պիքսել է:
5. Հատկություն bordercolor = "գույն" - սահմանում է եզրագծի գույնը: Եթե եզրագիծ = "0", ապա սահման չի լինի, և եզրագծի գույնը իմաստ չի ունենա:
6. Property cellpadding = "number" - շրջանակից դեպի բջիջի բովանդակություն պիքսելներով ներխուժում:
7. Property cellpacing = "number" - հեռավորությունը պիքսելներով բջիջների միջև:
8. Property cols = "number" - սյունակների քանակը: Եթե այն չնշեք, դիտարկիչն ինքնուրույն կորոշի սյունակների քանակը: Միակ տարբերությունն այն է, որ այս պարամետրը նշելը, ամենայն հավանականությամբ, կարագացնի սեղանի բեռնումը:
9. Հատկության շրջանակ = "պարամետր" - ինչպես ցուցադրել սահմանները սեղանի շուրջ: Այն կարող է վերցնել հետևյալ արժեքները.
- դատարկ - մի գծեք սահմաններ
- սահման - սեղանի շուրջ սահմանը
- վերև - սահմանը սեղանի վերևում
- ներքևում - սահմանը սեղանի ներքևում
- hsides - ավելացնել միայն հորիզոնական եզրեր (աղյուսակի վերև և ներքև)
- vsides - գծեք միայն ուղղահայաց եզրեր (սեղանի ձախ և աջ)
- rhs - սահմանեք միայն սեղանի աջ կողմում
- lhs - սահմանեք միայն սեղանի ձախ կողմում
10. Գույքի բարձրություն = "համար" - սահմանում է սեղանի բարձրությունը `կամ պիքսելներով կամ տոկոսներով:
11. Սեփականության կանոններ = "պարամետր" - որտեղ ցուցադրել բջիջների միջև սահմանները: Այն կարող է վերցնել հետևյալ արժեքները.
- բոլորը - յուրաքանչյուր սեղանի բջիջի շուրջ գիծ է գծված
- խմբեր - տողը ցուցադրվում է այն խմբերի միջև, որոնք ձևավորվում են պիտակներով , , ,
կամ
- cols - գիծը ցուցադրվում է սյուների միջև
- ոչ - բոլոր սահմանները թաքնված են
- տողեր - սահմանը գծված է պիտակի միջոցով ստեղծված սեղանի տողերի միջև
12. Գույքի լայնություն = "համար" - սահմանում է աղյուսակի լայնությունը `կամ պիքսելներով կամ տոկոսներով:
13. Property class = "class_name" - կարող եք նշել այն դասի անունը, որին պատկանում է աղյուսակը:
14. Գույքի ոճ = "ոճեր". Ոճերը կարող են սահմանվել առանձին `յուրաքանչյուր սեղանի համար:
Այժմ ժամանակն է սուզվել սեղանի մեջ և նայել սեղանի բջիջների հատկանիշներին: Այս հատկանիշները պետք է գրված լինեն բացման պիտակում:
.
Հատկություններ և հատկություններ եւ |
1. Property align = "պարամետր" - սահմանում է աղյուսակի առանձին բջիջի հավասարեցումը: Այն կարող է վերցնել հետևյալ արժեքները.
- ձախ - ձախ հավասարեցում
- կենտրոն - կենտրոնի հավասարեցում
- աջ - աջ հավասարեցում
2. Գույքի ֆոն = "URL" - սահմանում է բջիջի ֆոնային պատկերը: URL- ի փոխարեն պետք է գրել ֆոնային պատկերի հասցեն:
3. Հատկություն bgcolor = "գույն" - սահմանում է բջիջի ֆոնի գույնը:
4. Հատկություն bordercolor = "գույն" - սահմանում է բջիջի եզրագծի գույնը:
5. Property char = "letter" - սահմանում է այն տառը, որից պետք է կատարվի հավասարեցում: Հարթեցման հատկանիշի արժեքը պետք է սահմանվի char:
6. Property colspan = "number" - սահմանում է միավորվող հորիզոնական բջիջների քանակը:
7. Գույքի բարձրություն = "թիվ" - սահմանում է սեղանի բարձրությունը `կամ պիքսելներով, կամ տոկոսներով:
8. Գույքի լայնություն = "համար" - սահմանում է աղյուսակի լայնությունը `կամ պիքսելներով, կամ տոկոսներով%:
9. Property rowspan = "number" - սահմանում է միաձուլված ուղղահայաց բջիջների թիվը:
10. Property valign = "պարամետր" - բջիջի բովանդակության ուղղահայաց հավասարեցում:
- վերև - բջիջի բովանդակությունը հավասարեցնում է տողի վերևին
- միջին - միջին հավասարեցում
- ներքև - հարթեցնել ներքևը
- ելակետային - ելակետային հավասարեցում
Նշում 1 Պիտակի համար | նույն տարբերակները մատչելի են, ինչպես և | ... Պարամետրեր մեկ պիտակի համար | հիերարխիկ կերպով կկիրառվի բոլորի վրա դրա ներսում
Ինչպես կանխել սեղանի բջիջների սոսնձումը
Եզրագծի (բջիջների սահման) և բջիջների միջև զրոյական լիցքավորման դեպքում դրանք դեռ սոսնձված են, և դուք ստանում եք կրկնակի եզրագիծ: Դրանից խուսափելու համար հարկավոր է գրանցել սահման-փլուզում: փլուզման աղյուսակը ոճաթերթում.
...
Հարգելի ընթերցող, այժմ դուք շատ ավելին եք սովորել html սեղանի պիտակի մասին: Այժմ խորհուրդ եմ տալիս անցնել հաջորդ դասին:
Պարզ HTML աղյուսակի աղբյուրի կոդը
Բջջ 1 |
Բջիջ 2 |
Բջիջ 3 |
Բջիջ 4 |
Բջիջ 5 |
Բջիջ 6 |
Բջիջ 7 |
Բջիջ 8 |
Բջիջ 9 |
HTML աղյուսակի վերնագրեր
HTML աղյուսակներում կա բջիջների 2 տեսակ: Պիտակը սահմանում է սովորական տիպի բջիջ: Եթե բջիջը գործում է որպես վերնագիր, այն նույնականացվում է պիտակի հետ:
Օրինակ ՝ HTML աղյուսակ ՝ վերնագրով
| Volkswagen AG |
Daimler AG |
BMW Group |
|---|
| Audi |
Mercedes-Benz |
BMW |
| Շկոդա |
Mercedes-AMG |
Մինի |
| Lamborghini |
Խելացի |
Ռոլս Ռոյս |
HTML աղյուսակի աղբյուր վերնագրերով
Volkswagen AG |
Daimler AG |
BMW Group |
|---|
Audi |
Mercedes-Benz |
BMW |
Շկոդա |
Mercedes-AMG |
Մինի |
Lamborghini |
Խելացի |
Ռոլս Ռոյս |
Միացրեք բջիջները HTML աղյուսակում
HTML աղյուսակներն ունեն բջիջները հորիզոնական և ուղղահայաց համատեղելու ունակություն:
Դեպի միավորել բջիջները հորիզոնականօգտագործել colspan = "հատկանիշը ԱԱ», խցում կամ, որտեղ x
Դեպի միավորել բջիջները ուղղահայացօգտագործել rowspan = "հատկանիշը ԱԱ», խցում կամ, որտեղ x- միավորվող բջիջների քանակը:
Բջիջները կարող են միացվել հորիզոնական և ուղղահայաց միաժամանակ: Դա անելու համար օգտագործեք ինչպես colspan, այնպես էլ տողերի հատկանիշները ցանկալի բջիջի համար.
Բջջային տեքստ |
Նկատի ունեցեք, որ բջիջները միաձուլելիս տողի տարրերի թիվը փոխվում է: Օրինակ, եթե աղյուսակն ունի 3 սյունակ բջիջներով, և մենք համատեղում ենք առաջին և երկրորդ բջիջները, ապա այս տողը սահմանող պիտակի ներսում կլինեն 2 տարր, որոնցից առաջինը կպարունակի colspan = "2" հատկանիշը:
Օրինակ ՝ HTML աղյուսակ բջիջների միացումով
HTML աղյուսակի աղբյուր ՝ միավորված բջիջներով
Nissan |
|---|
Մոդել |
Սարքավորումներ |
Մատչելիություն |
|---|
Nissan Qashqai |
ՎԻISԻԱ |
+ |
ՏԵԿՆԱ |
+ |
Nissan x-trail |
ACENTA |
+ |
ԿՈՆԵԿՏԱ |
- |
Վերնագրեր և տողատակներ և ստորագրություն HTML աղյուսակներում
HTML աղյուսակները կարելի է բաժանել 3 տարածքի ՝ վերնագիր, տեքստ, ստորոտ:
Դա արվում է ՝ սեղանի ընտրված հատվածի տողերը պիտակներով փաթաթելով: սահմանում է վերնագրի մակերեսը, - տողատակի հատվածը, - սեղանի մարմինը:
Լռելյայնորեն, վերնագրերն ու ստորոգյալները ոճավորված չեն (դա անհրաժեշտության դեպքում կարող է կատարվել CSS- ի միջոցով), այլ կարող են օգտագործվել բրաուզերների կողմից: Օրինակ, բազմալեզու սեղան տպելիս վերնագրերն ու տողատները կարող են կրկնօրինակվել յուրաքանչյուր տպագիր էջի վրա:
Աղյուսակի HTML ծածկագրում տարածքի պիտակների տեղադրման ճիշտ հաջորդականությունը հետևյալն է. Սկզբում վերնագիրը, այնուհետև տողատակը, ապա հիմնական մարմինը: Այս դեպքում էջի հիմնական մասը կցուցադրվի վերնագրերի և տողատների միջև:
Անհրաժեշտության դեպքում կարող եք ստորագրություն ավելացնել սեղանին: Դա անելու համար օգտագործեք պիտակ:
Օրինակ ՝ HTML աղյուսակ ՝ վերնագրերով և ստորոգյալներով և ստորագրությամբ
Աղյուսակի սկզբնաղբյուրը `վերնագրերով և ստորոգյալներով և ստորագրությամբ
Ամբողջական հավաքածու Renault Sandero Stepway
Բնութագրական |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Մատչելիություն |
+ |
+ |
+ |
|---|
Շարժիչի հզորությունը |
0.9 (90 ձիաուժ) |
0.9 (90 ձիաուժ) |
1.5 (90 ձիաուժ) |
|---|
Վառելիք |
բենզին |
բենզին |
դիզելային |
|---|
Թունավորության մակարդակը |
Եվրո 6 |
Եվրո 6 |
5 եվրո |
|---|
Սյունակներ և սյունակների խմբեր
HTML աղյուսակը կարելի է բաժանել սյունակների և սյունակների խմբերի ՝ օգտագործելով and և պիտակները:
Այս տարանջատումը թույլ է տալիս սեղանի համար ոճեր սահմանել ՝ օգտագործելով նվազագույն թվով CSS հատկություններ ՝ դրանով իսկ նվազեցնելով սեղանի կոդի քանակը (սյունակում յուրաքանչյուր բջիջի համար ոճեր սահմանելու փոխարեն կարող եք ոճեր սահմանել միանգամից մեկ կամ մի քանի սյունակի համար):
Պիտակներ և տեղադրված են պիտակի ներսում պիտակներից առաջ, AKP6 (EDC) Փոխանցում |
HTML աղյուսակ գ աղբյուր եւ
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENSE 2E3C AL A |
Բնութագրական |
|---|
1.5 (90 ձիաուժ) |
1.2 (115 ձիաուժ) |
1.5 (90 ձիաուժ) |
Շարժիչի հզորությունը |
|---|
դիզելային |
բենզին |
դիզելային |
Վառելիք |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Փոխանցում |
|---|
Կայքի էջերի դասավորության աղյուսակները
Modernամանակակից կայքերում կարևոր է էջերի ճիշտ ցուցադրումը ինչպես համակարգիչների, այնպես էլ շարժական սարքերի վրա: Pageանկալի չէ սեղաններ օգտագործել HTML էջի կմախք ստեղծելու համար, քանի որ բովանդակությունը տարբեր չափերի (համակարգիչներ, սմարթֆոններ, պլանշետներ) էկրաններին հարմարեցնելու ունակությունը կորել է:
Աղյուսակի խմբի պիտակները լավագույնս օգտագործվում են էջի ներսում `սեղանի ձևաչափված բովանդակությունը ցուցադրելու համար:
| |
|
| | |
| | |
