Ստացեք HTML աղյուսակներից առավելագույնը `սովորելով աղյուսակի հատկանիշները
HTML աղյուսակի հատկանիշները ձեզ ավելի շատ վերահսկողություն են տալիս HTML աղյուսակների վրա: Սեղաններին մատչելի շատ հատկանիշներ կան, որպեսզի դրանք ավելի հետաքրքիր դարձնեն եւ փոխեք ձեր էջի տեսքը:
HTML TABLE տարրերի հատկանիշներ
HTML5-ում տարրը օգտագործում է համաշխարհային հատկանիշները եւ մեկ այլ հատկանիշը. Եվ դա փոխվել է միայն արժեքի 1 կամ դատարկ (այսինքն border = ""): Եթե ցանկանում եք փոխել սահմանի լայնությունը, ապա պետք է օգտագործել CSS- ի սահմանային լայնությունը:
Տեսեք ստորեւ, վեբ-ի HTML5 աղյուսակի հատկանիշների մասին:
Կան նաեւ մի քանի ատրիբուտներ, որոնք մաս են կազմում HTML 4.01 հստակեցման, որը հնացած է HTML5- ում:
- - Սեղանի TD եւ TH տարրերի վրա օգտագործեք CSS պաստառի գույք:
- - Սեղանի վրա օգտագործել CSS- ի գույքային սահմանափակումները:
- Օգտագործեք CSS ոճերը սահմանի գույնը `սեւ; եւ սահմանային ոճը սեղանի վրա:
- Օգտագործեք CSS ոճերը սահմանի գույնը `սեւ; եւ սահմանի ոճը սեղանի համապատասխան տարրերի վրա:
- - Փոխարենը, պետք է նկարագրեք սեղանի կառուցվածքը CAPTION- ում կամ ամբողջ սեղանը դիպլոմի մեջ դնել եւ նկարագրել այն FIGCAPTION- ում: Այլապես կարող եք հեշտացնել սեղանի կառուցվածքը, այնպես որ ոչ մի բացատրություն չի պահանջվում:
- - Օգտագործեք CSS- ի լայնությունը:
Եվ մեկ հատկանիշ, որը չեղյալ է հայտարարված HTML 4.01-ում եւ հնացած է HTML5-ում:
Իմացեք ավելին HTML 4.01 TABLE հատկանիշների մասին:
- հարթեցնել- օգտագործեք CSS- ի մարժա գույքը:
Կան նաեւ մի քանի հատկանիշներ, որոնք չեն հանդիսանում որեւէ HTML ճշգրտման մաս:
Օգտագործեք այս ատրիբուտները, եթե գիտեք, որ ձեր աջակցած բրաուզերները կարող են դրանք կարգավորել, եւ դուք վախենում եք վավեր HTML- ի:
- Օգտագործեք CSS- ի գույքային ֆոնի գույնը:
- borderkolor- Օգտագործեք CSS- ի գույքի սահմանների գույնը:
- bordercolorlight - Օգտագործեք CSS գույքի սահմանների գույնը:
- borderkolordark- Օգտագործեք CSS- ի գույքի սահմանների գույնը:
- cols - Այս հատկանիշի այլընտրանք չկա:
- բարձրություն - Օգտագործեք CSS- ի գույքի բարձրությունը:
- - Օգտագործեք CSS գույքի սահմանագիծը:
- - Օգտագործեք CSS գույքի սահմանագիծը:
- - Օգտագործեք CSS գույքի սպիտակ տիեզերքը:
- Օգտագործեք CSS- ի գույքային ուղղահայաց-հարթակը:
Իմացեք ավելին Browser Specific TABLE- ի հատկանիշների մասին:
HTML5 TABLE տարրերի հատկանիշներ
Ինչպես վերեւում նշեցինք, գոյություն ունի միայն մեկ հատկանիշ, որը դուրս է գլոբալ հատկանիշներից, որը վավեր է HTML5 TABLE տարրի վրա `սահման:
Սահմանի հատկանիշը օգտագործվում է ամբողջ սեղանի շուրջ գտնվող սահմանը եւ դրա մեջ գտնվող բոլոր բջիջները սահմանելու համար: Կա մի հարց, թե արդյոք այն կներառվի HTML5 հստակեցումում, բայց այն մնաց այն պատճառով, որ ներկայացված է սեղանի կառուցվածքի մասին, պարզապես ստանդարտ հետեւանքներ:
Սահմանային հատկանիշը ավելացնելու համար սահմանեք արժեքը 1-ին, եթե կա սահման եւ դատարկ (կամ դուրս է հատկությունից), եթե չկա: Բրաուզերների մեծ մասը կաջակցի սահմանը ոչ սահմանին եւ ցանկացած այլ ամբողջական արժեք (2, 3, 30, 500, եւ այլն), սահմանի լայնությունը պիքսելներում հայտարարելու համար, բայց դա հնացած է HTML5- ում: Փոխարենը, պետք է օգտագործել CSS սահմանային ոճի հատկությունները, սահմանելու սահմանի լայնությունը եւ այլ ոճերը:
Սահման սահմանելու համար գրեք `
border = "1" >
Սա սեղան է սահմանով
Կան HTML 4.01 հատկանիշներ, որոնք հնացած են HTML5- ում: Եթե դուք ծրագրում եք HTML 4.01 փաստաթուղթ գրելիս, կարող եք դրանք սովորել, հակառակ դեպքում դուք կարող եք անտեսել դրանք: Այս հատկանիշներից շատերն ունեն վերը նկարագրված այլընտրանքներ:
Մենք նկարագրում ենք տարրերի հատկանիշները, որոնք գործում են HTML5- ում (եւ HTML 4.01): Սա նկարագրում է TABLE- ի հատկանիշները, որոնք գործում են HTML 4.01-ում, բայց հնացած են HTML5-ում: Եթե դուք դեռ շարունակում եք գրել HTML 4.01 փաստաթղթերը, կարող եք օգտագործել այս հատկանիշները, սակայն դրանցից շատերը ունեն այլընտրանքներ, որոնք ձեր էջերը ավելի ապագա են ապացուցում, երբ տեղափոխվում եք HTML5:
Վավեր HTML 4.01 հատկանիշները
Վերոհիշյալ հատկանիշը:
HTML 4.01- ից HTML- ի միակ տարբերությունն այն է, որ դուք կարող եք սահմանել ամբողջական ամբողջականություն (0, 1, 2, 15, 20, 200, եւ այլն) `սահմանի լայնությունը պիքսելներում:
5px սահմանով սեղան կառուցելու համար գրեք `
border = "5" >
Այս աղյուսակը ունի 5px սահման:
Տեսեք սահմանների հետ երկու սեղանի օրինակ:
Հատվածը սահմանում է բջջային սահմանների միջեւ բջիջների գումարը եւ բջիջների բովանդակությունը: Սխալը երկու պիքսել է: Սահմանել cellpadding- ը 0-ին, եթե ցանկանում եք բովանդակության եւ սահմանների միջեւ տեղ բացել:
20-ի համար բջջային լիցքավորելու համար գրեք `
cellpadding = "20" >
Այս աղյուսակը ունի 20 բջջային հավելված:
Բջջային սահմանները պետք է բաժանվեն 20 պիքսելով:
Դիտեք մի սեղանի օրինակ `բջջային հեռարձակում
Հատակը սահմանում է սեղանի բջիջների եւ բջիջների բովանդակության միջեւ տարածության չափը: Բջջային հեռախոսի պակասի պես, կանխադրվածը սահմանվում է երկու պիքսել, այնպես որ դուք պետք է այն սահմանեք 0-ին, եթե ցանկանում եք բջջային կապի ընդհատում:
Աղյուսակի բջիջների հեռացման համար գրեք `
cellspacing = "20" >
Այս աղյուսակը ունի 20 բջջային տարածություն:
Բջիջները բաժանվում են 20 պիքսելով:
Տեսեք բջջային տարածքի սեղան
Հատվածը բացահայտում է, որ սեղանի դրսից շրջապատող սահմանի հատվածները տեսանելի կլինեն: Դուք կարող եք շրջանակել ձեր սեղանը բոլոր չորս կողմերում, ցանկացած կողմում, վերեւում եւ ներքեւում, ձախ եւ աջ, կամ ոչ մեկը:
Ահա սեղանի համար HTML- ն միայն ձախ եզրին սահմանում է.
frame = "lhs" >
Այս աղյուսակը
- ը կունենա
միայն
ձախ կողմում շրջանակված.
Եվ մեկ այլ օրինակ `ներքեւի շրջանակով.
frame = "ներքեւում" >
Այս աղյուսակը ներքեւի մասում ունի շրջանակ:
Ստուգեք որոշ շրջանակներ շրջանակների հետ
Հատկորոշումը նման է շրջանակի հատկանիշին, միայն այն ազդում է սեղանի բջիջների սահմանների վրա: Դուք կարող եք սահմանել կանոններ բոլոր բջիջների միջեւ, սյուների միջեւ, TBODY եւ TFOOT խմբերի միջեւ կամ ոչ մեկը:
Սեղան կառուցել միայն գծերի միջեւ, գրեք.
rules = "տողեր" >
Այս 4x4 աղյուսակը է
տողերը ոչ թե սյունակները
նկարագրված
կանոնների հատկանիշ.
Եվ մյուսը սյուների միջեւ տողերով.
rules = "cols" >
Սա
սեղան
որտեղ
սյունակներ
են
կարեւորեց
Ահա մի սեղանի օրինակ, կանոններով
Նկարագրությունն ապահովում է տեղեկատվություն էկրանի ընթերցողների եւ այլ օգտվողների համար նախատեսված աղյուսակի մասին, որոնք կարող են խնդիրներ ունենալ կարդալու սեղանները: Ամփոփային հատկանիշն օգտագործելու համար գրեք սեղանի համառոտ նկարագրությունը եւ դրեք այն, որպես հատկանիշի արժեք: Ամփոփագիրը համացանցային էջում չի ցուցադրվի ստանդարտ վեբ բրաուզերներում:
Ահա թե ինչպես պետք է գրել մի պարզ սեղան ամփոփմամբ.
summary = "Սա նմուշային աղյուսակ է, որը պարունակում է լրացուցիչ տեղեկատվություն: Այս աղյուսակի նպատակն է ցույց տալ ամփոփագիրը»: >
սյունակ 1 տող 1
սյունակ 2 տող 1
սյունակ 1 տող 2
սյունակ 2 տող 2
Դիտեք ամփոփագիրով սեղան
Նկարը սահմանում է աղյուսակի լայնությունը կամ պիքսելներում կամ որպես կոնտեյների տարրերի տոկոս: Եթե լայնությունը չի սահմանվում, սեղանը կպահանջի միայն այնքան տեղ, որքան անհրաժեշտ է ցուցադրել բովանդակությունը, առավելագույն լայնությամբ նույնը, ինչպես ծնողի տարրերի լայնությունը:
Պիքսելում հատուկ լայնությամբ սեղան կառուցելու համար գրեք `
width = "300" >
Այս աղյուսակը գտնվում է այն կոնտեյների լայնության 80% -ով:
Եվ ծնողի տարրերի տոկոսն ունեցող լայնությամբ սեղան կառուցելիս գրեք.
width = "80%" >
Այս աղյուսակը գտնվում է այն կոնտեյների լայնության 80% -ով:
Տեսեք լայնությամբ սեղանի օրինակ
Թալանված HTML 4.01 ՏԵԽՆՕԹԱՅԻՆ հատկանիշը
Կա մեկ հատկանիշ, սեղանի տարրը, որը չեղյալ է HTML 4.01-ում եւ հնացած է HTML5- ում: Այս հատկանիշը թույլ է տալիս սահմանել, որտեղ սեղանը պետք է տեղադրվի էջում, որը կողքին գտնվող տեքստին համեմատում է: Այս հատկանիշը չեղյալ է հայտարարված HTML 4.01-ում, եւ դուք պետք է խուսափեք այն օգտագործելուց: Փոխարենը, դուք պետք է օգտագործեք CSS- ի գույքը կամ շեղը `ձախ: auto; եւ margin-right: auto; ոճերը: Փողային հատկությունը ձեզ տալիս է այնպիսի արդյունք, որը ավելի մոտ է այն, ինչ տրամադրել է հարթակը, բայց դա կարող է ազդել էջի բովանդակության մյուս մասի ցուցադրման ձեւի վրա: Մարին-աջ `ավտո; եւ margin-left: auto; որ W3C- ն առաջարկում է որպես այլընտրանք:
Ահա հենարանային հատկանիշը օգտագործելով չեղյալ օրինակ:
align = "right" >
Այս աղյուսակը ճիշտ է
Տեքստը հոսում է այն ձախ կողմում
Տեսեք վերացված օրինակ, օգտագործելով հարթակի հատկանիշը:
Եվ նույն ազդեցությունը վավեր (ոչ արգելված) HTML- ով ստանալու համար գրեք.
style = "float: աջ;" >
Այս աղյուսակը ճիշտ է
Տեքստը հոսում է այն ձախ կողմում
Հետեւյալները բացատրում են TABLE- ի հատկանիշները, որոնք չեն հանդիսանում որեւէ HTML ճշգրտման մաս:
Նախորդ տեղեկատվությունը նկարագրում է HTML- ի տարրի ատրիբուտները, որոնք վավեր են HTML 4.01-ում, սակայն հնացած են HTML5-ում:
Հետեւյալները նկարագրում են TABLE- ի հատկանիշները, որոնք չեն համապատասխանում որեւէ ընթացիկ ճշգրտմանը: Եթե դուք չեք հետաքրքրում, թե արդյոք ձեր էջերը ստուգում են, եւ ձեր օգտվողները օգտագործում են այս տարրերը սատարող զննարկիչ, ապա կարող եք օգտագործել այս տարրերը: Սակայն նրանց մեծ մասը կամ չեն աջակցվում ժամանակակից բրաուզերում կամ ունեն այլընտրանքային տարբերակներ, որոնք ավելի շատ համապատասխանում են ստանդարտներին:
Մենք չենք խորհուրդ տալ այս հատկանիշները ձեր HTML աղյուսակներում:
Հատվածը հին հատկանիշ է, որը ընդգրկված էր CSS- ի լայն աջակցությունից առաջ: Այն թույլ է տալիս փոխել սեղանի ֆոնի գույնը: Դուք կարող եք սահմանել գունային անուն կամ տասնվեցամյա կոդը: Այս հատկանիշը դեռ աշխատում է շատ բրաուզերներում, սակայն ապագայում ապացուցված HTML- ի համար չպետք է օգտագործեք այն եւ օգտագործեք CSS- ը:
Այս հատկանիշի ավելի լավ տարբերակն է ոճի գույքը:
Սեղանի ֆոնային գույնը փոխելու համար գրեք `
style = "background-color: #ccc;" >
Այս աղյուսակը ունի գորշ ֆոն
Նմանատիպ bgcolor հատկանիշի նման, սահմանային հատկանիշը թույլ է տալիս փոխել հատկանիշի գույնը: Այս հատկանիշը միայն Internet Explorer- ի կողմից է: Փոխարենը, դուք պետք է օգտագործեք սահմանի գույնի ոճի գույքը:
Սեղանի սահմանի գույնը փոխելու համար գրեք `
style = "border-color: red;" >
Այս աղյուսակը կարմիր սահման ունի:
Bordercolorlight եւ borderkolordark հատկանիշները ներառված են Internet Explorer- ում, թույլ տալով ստեղծել ձեր 3D աղյուսակը: Այնուամենայնիվ, IE8- ի եւ վերը, սա միայն աջակցվում է IE7 ստանդարտների ռեժիմում եւ Quirks Mode- ում : Microsoft- ը նշում է, որ այս հատկությունները այլեւս չեն աջակցվում:
Մի կարճ ժամանակահատվածում, TABLE- ի տարրում նշվող գույնը առաջարկվում էր օգնել բրաուզերներին, թե քանի սյունակ սեղան ունի: Ներկայացումն այն էր, որ դա կօգնի ավելի արագացնել մեծ սեղանների ցուցադրումը: Այնուամենայնիվ, այն իրականացվել է միայն Internet Explorer- ի կողմից, եւ IE8- ի եւ վերը նշվածից, դա միայն աջակցում է IE7 ստանդարտների ռեժիմում եւ Quirks Mode- ում:
Քանի որ կա լայնության հատկանիշ (հնացած է HTML5- ով), շատերը կարծում են, որ կա նաեւ բարձրության հատկանիշ սեղանների համար: Սակայն, քանի որ սեղանները համապատասխանում են իրենց բովանդակության լայնությանը կամ CSS- ի կամ լայնության հատկանիշի որոշակի լայնությանը, բարձրությունը չի կարող սահմանափակվել: Հետեւաբար, բրաուզերները թույլ են տվել բարձրության հատկանիշը սահմանել աղյուսակի նվազագույն բարձրությունը: Եթե սեղանն ավելի բարձր էր, քան այդ բարձրությունը, ապա դա երկարատեւ էր: Բայց դուք պետք է օգտագործեք գույքը
CSS- ի բարձրության հատկությամբ դուք կարող եք խոչընդոտել բարձրությունը, եթե օգտագործում եք CSS- ի գույքը, ինչպես նաեւ սահմանելու այն, ինչը տեղի է ունենում որեւէ ավելցուկային բովանդակության հետ:
Սեղանի վրա նվազագույն բարձրությունը սահմանելու համար գրեք `
style = "height: 30em;" >
Այս աղյուսակը առնվազն 30 ems բարձր է:
Երկու հատկանիշները եւ ավելացված տարածքը ձախ / աջ կողմերի (hspace) եւ սեղանի վերին / ներքեւի (vspace) շուրջ: Փոխարենը պետք է օգտագործել ոճի գույքը:
Ուղղահայաց տարածությունը 20 պիքսել եւ հորիզոնական տարածություն սահմանելու համար `40 պիքսել, գրեք`
style = "margin: 20px 40px;"
Այս աղյուսակը ունի 20 պիքսել vspace եւ 40 pixels hspace:
Հատվածը բուլյան հատկանիշ է, որը սահմանում է, թե արդյոք սեղանի բովանդակությունը պետք է փաթեթավորի ծնողի տարրերի կամ պատուհանների եզրին կամ հորիզոնական լռություն: Փոխարենը, դուք պետք է սահմանեք CSS- ի գույքը օգտագործելով յուրաքանչյուր աղյուսակի բջիջի փաթաթումը:
Բավականին տեքստ չթողնել սյունակ չգալ, գրեք `
style = "white-space: nowrap;" > Սա տոննա բովանդակությամբ սյունակ է: Այնուամենայնիվ, եթե այն ընդարձակ է, քան բեռնարկղը, տեքստը չպետք է անցնի հաջորդ գիծը, այլ փոխարենը զննում է բրաուզերի պատուհանը `հորիզոնական գլորել, որպեսզի տեսնեն բոլոր բովանդակությունը:
Վերջապես, հատկանիշը սահմանում է, թե ինչպես յուրաքանչյուր բջիջի բովանդակությունը պետք է ուղղահայաց կերպով հարթվի խցում: Այս անվավեր հատկանիշի փոխարեն, դուք պետք է օգտագործեք CSS- ի գույքը յուրաքանչյուր բջիջում, որը ցանկանում եք փոխել համապատասխանությունը: Դուք չեք նկատում այս ոճի հետեւանքները, եթե բջջային բովանդակությունը պակաս է, քան մյուս, ավելի մեծ բջիջների կողմից ստեղծված հասանելի տարածքը:
Բջջային մղելու համար ներքեւի մասում (ոչ թե միջին, որպես լռելյայն) գրեք `
Այս բջիջն ավելի երկար է, քան մնացածը, եւ ստիպելու են բարձրությունը բարձր լինել: Այսպիսով, կտեսնեք, որ ուղղահայաց հորիզոնական բջիջը ներքեւի մասում է:
style = "vertical-align: bottom;" > Բովանդակություն ներքեւում:
Բովանդակությունը միջինում: