Таҳсили бештар аз ҷадвалҳои HTML бо омӯзиши структураҳои ҷадвал
Хизматҳои ҷадвалҳои HTML ба шумо бисёр назорати бештар аз ҷадвалҳои HTML медиҳад. Дар бисёре аз хусусиятҳо дастрасӣ ба ҷадвалҳо барои онҳо бештар шавқовартар аст ва намуди саҳифаи худро тағйир диҳед.
Хусусиятҳои элементҳои HTML
Дар HTML5 элемент хусусиятҳои глобалӣ ва як аломати дигарро истифода мебарад:. Ва он танҳо ба арзиши 1 ё холӣ (яъне сарҳад = "") иваз карда шудааст. Агар шумо мехоҳед, ки васеъ кардани сарҳадро тағйир диҳед, шумо бояд амволи CSS-ро васеъ истифода кунед.
Барои дидани хусусиятҳои ҷадвалии HTML5 дар поён нигаред.
Ҳамчунин якчанд хусусиятҳое вуҷуд доранд, ки қисми хусусияти HTML 4.01 мебошанд, ки дар HTML5 корношоям шудаанд:
- -Ташаккури CSS-ро ба унвони TD ва Т унятҳо истифода баред.
- -Мағазҳои сарҳадии амволи CSS-ро дар ҷадвал истифода баред.
- -Лоизи CSS-ранги сарҳади: сиёҳ; ва сабки сарҳад дар ҷадвал.
- -Лоизи CSS -ранги сарҳади: сиёҳ; ва усули сарҳадӣ дар унсурҳои дахлдори ҷадвал.
- -Албатта, шумо бояд сохтори ҷадвалро дар як CAPTION тасвир кунед ё тамоми ҷадвалро дар матн оварда, онро дар як намуди FIGCAPTION тасвир кунед. Ба таври дигар, шумо метавонед сохтори ҷадвалро содда кунед, то ки ҳеҷ гуна тавзеҳот лозим набошад.
- -барои амволи васеи CSSро истифода баред.
Як хусусиятест, ки дар HTML 4.01 бекор карда шудааст ва дар HTML5 мавҷуд аст.
Бештар дар бораи HTML 4.01 Хусусиятҳои ТБМ омӯзед.
- Ҳамроҳ кардан - Ба ҷои амволи CSS маржа гузоред.
Ҳамчунин якчанд хусусиятҳое, ки ҷузъиёти ягон HTML надоранд.
Агар инҳоро истифода кунед, агар шумо медонед, ки браузерҳо шумо пуштибони онҳоро дастгирӣ карда наметавонед ва шумо дар бораи HTML дуруст нестед.
- - Ба ҷои ранги аслии амволи CSS истифода баред.
- bordercolor-Ба ивази ранги сарҳади CSS истифода баред.
- bordercolorlight-Ба ивази ранги сарҳади CSS истифода баред.
- bordercolordark - Ба ҷои ин ранги сарҳади CSS истифода баред.
- cols-Ин аломати алтернативӣ нест.
- баландии - ба ҷои баландии амволи CSS истифода баред.
- -Барои маржа будани моликияти CSSро истифода баред.
- -Барои маржа будани моликияти CSSро истифода баред.
- -Мағази амволи CSS-ро ба ҷои муқаддима гузоред.
- - Ба ҷои амудии амудӣ CSS-ҳои амудиро гузоред.
Бештар дар бораи хусусиятҳои браузер мушаххаси браузерро омӯзед.
HTML5 Шабакаи элементҳои элементӣ
Ҳамон тавре, ки дар боло зикр кардем, танҳо як хосиятест, ки аз хусусиятҳои глобалӣ мавҷуд аст, ки дар элементҳои HTML5 TABLE рост аст: сарҳад.
Элементҳои сарҳадӣ барои муайян кардани сарҳад дар атрофи тамоми миз ва ҳамаи ҳуҷайраҳо дар дохили он истифода мешаванд. Саволе, ки оё он ба хусусияти HTML5 дохил карда шудааст, аммо он боқӣ мондааст, зеро он маълумотро дар бораи сохтори ҷадвалӣ, аз он ҷумла ба таври оддӣ шарҳ дод.
Барои илова намудани хосияти сарҳадӣ, агар шумо вуҷуд надошта бошед, дараҷаи 1-ро, агар сарҳад ва холӣ бимонед (ё хомӯш кунед). Бисёре аз браузерҳо 0 -ро барои сарҳад ва дигар арзиши дигар ҷудошуда (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 аз HTML5 ин аст, ки шумо метавонед ягон ҳаҷми пурра санҷида (0, 1, 2, 15, 20, 200, ва ғ.) Барои муайян кардани паҳншавии сарҳад дар пикселҳо.
Барои сохтани ҷадвал бо сарҳади 5px нависед:
border = "5" >
Ин ҷадвал дорои сарҳади 5px мебошад.
Намунаи ду ҷадвалро бо сарҳадҳо мебинед.
Ин хосият миқдори фосилаи байни сарҳадҳо ва миқдори ҳуҷайраро муайян мекунад. Муҳофизати ду pixel аст. Ҳуҷҷатҳоро ба 0 нишон диҳед, агар шумо ягон мӯҳтаво байни муҳтаво ва сарҳадот надошта бошед.
Барои тасҳеҳ кардани постройка ба 20, нависед:
cellpadding = "20" >
Ин ҷадвал дар якҷоягӣ 20-ро дар бар мегирад.
Чаҳорчӯби телефон бо 20 пиксел ҷудо карда мешавад.
Намунаи мизро бо дастпӯшакҳо нишон диҳед
Ин хосият ҳаҷми фосилаи байни ҳуҷайраҳои ҷадвал ва мазмуни ҳуҷайраро муайян мекунад. Мисли воҳиди воҳиди, ин хосият ба ду пиксел муқаррар карда мешавад, бинобар ин, шумо бояд ба фармони 0, агар шумо ягон фосилаи ҳуҷайра надошта бошед.
Барои илова кардани ҷойи ҳуҷайра ба ҷадвал, нависед:
cellspacing = "20" >
Ин ҷадвал дар як ҳуҷра 20 аст.
Ҳуҷҷатҳо 20 пиксел ҷудо карда мешаванд.
Як мизро бо cellspacing нигаред
Ин хосият муайян мекунад, ки қисмҳои сарҳадии гирду атрофи ҷадвал намоён хоҳанд шуд. Шумо метавонед ҷадвалро дар тамоми чор тараф, ҳар як тараф, боло ва поён, чап ва рост, ё ягон чизро таҳия кунед.
Дар ин ҷо HTML-ро дар як ҷадвал бо танҳо сарҳади чапи чап навишта шудааст:
frame = "lhs" >
Ин ҷадвал
дорои мебошад
танҳо танҳо
чапи чап.
Ва намунаи дигар бо чаҳорчӯбаи поён:
frame = "below" >
Ин ҷадвал дар қаъри қафо дорад.
Якчанд ҷадвалҳоро бо чорчӯба санҷед
Ин хосият ба функсияҳои шабеҳ монанд аст, танҳо он ба сарҳадҳои атрофи ҳуҷайраҳо таъсир мерасонад. Шумо метавонед қоидаҳоро дар ҳамаи ҳуҷайраҳо, байни сутунҳо, байни гурӯҳҳо ба монанди TBODY ва TFOOT ё ҳеҷ чиз муқаррар накунед.
Барои сохтани ҷадвал бо хатҳои танҳо байни сатрҳо нависед:
қоидаҳо = "сатрҳо" >
Ин ҷадвал 4x4 дорад
сатрҳо на сутунҳо
бо тасвир шудааст
қоидаҳо.
Ва дигаре бо рангҳои байни сутунҳо:
қоидаҳо = "cols" >
Ин аст
ҷадвал
дар куҷо
сутунҳо
мебошанд
highlighted
Ин намунаи як ҷадвал бо қоидаҳо мебошад
Ин хосият дар бораи ҷадвал барои хонандагони экран ва дигар усулҳои корбаре, ки метавонад ҷадвалҳоро хонда тавонад маълумот диҳад. Барои истифода кардани хосияти маҷмӯӣ, шумо тавсифи мухтасари ҷадвалро нависед ва онро ҳамчун арзиши хусусият гузоред. Ҷамъбаст дар саҳифаи веб дар бештари браузерҳои стандартии стандартӣ намоиш дода намешавад.
Ин аст, ки чӣ тавр ба ҷадвалҳои содда бо таври мухтасар нависед:
summary = "Ин як мизи мисолест, ки дар он маълумот маълумотдиҳанда дорад. Мақсади ин ҷадвал нишондиҳандаи мухтасар нишон медиҳад." >
сутуни 1 сатри 1
сутуни 2 сатри 1
сутуни 1 сатри 2
сутуни 2 сатри 2
Намоиши ҷадвал бо ҷадвал
Элемент васеъ кардани ҷадвалро дар ҳар як пиксел муайян мекунад ва ё бо фоизи элементҳои контейнерро муайян мекунад. Агар паҳншавӣ муқаррар нашуда бошад, ҷадвал танҳо фосилаи хеле зиёдро мегирад, ки он бояд нишон дода шавад, ки мундариҷа бо паҳншавии воҳиди витамин бо як паҳнои калонтарин паҳн шавад.
Барои сохтани ҷадвал бо паҳнаи мушаххас дар пиксел, нависед:
width = "300" >
Ин ҷадвал 80% паҳнои контейнер мебошад.
Барои сохтани ҷадвал бо паҳн, ки фоизи волидайн аст, нависед:
width = "80%" >
Ин ҷадвал 80% паҳнои контейнер мебошад.
Намунаи миз бо паҳншавӣ нигаред
Хусусияти HTML 4.01 Табар
Як хусусияти элементи TABLE мавҷуд аст, ки дар HTML 4.01 маҳдуд карда шудааст ва HTML5 дар кӯҳнашуда мавҷуд аст: html . Ин хосият ба шумо имкон медиҳад, ки ҷадвалро дар саҳифа бо матн, ки дар он ҳаст, ҷойгир кунед. Ин хосият дар HTML 4.01 бекор карда шудааст ва шумо бояд онро истифода баред. Ба ҷои ин, шумо бояд моликияти CSS ё margin-left-ро истифода баред: auto; ва мармар-рост: автомобил; намудҳо. Функсияҳои фишурӣ ба шумо натиҷа медиҳад, ки ба хусусияти ҳамоҳангӣ наздиктар аст, аммо он метавонад ба тарзи дигари мундариҷаи саҳифа таъсир расонад. Марин-ҳуқуқ: автомобил; ва margin-left: худкор; он чӣ W3C тавсия медиҳад, ки алтернативӣ бошад.
Дар ин ҷо намунаи тасодуфӣ бо истифодаи хосияти html:
align = "right" >
Ин ҷадвал дуруст риоя мешавад
Тугмаи дар гирди он ба чап
Истифодаи намунаи тасодуфӣ бо истифодаи хосияти html.
Барои гирифтани таъсири манфии HTML (ғайримутаносиб), чунин менависед:
style = "float: рост;" >
Ин ҷадвал дуруст риоя мешавад
Тугмаи дар гирди он ба чап
Дар поён инъикосҳои TABLE, ки ҷузъи ягон хусусиятҳои HTML мебошанд.
Маълумоти пештар тасвирҳои элементарии HTML, ки дар HTML 4.01 амал мекунанд, дар HTML5 мавҷуданд.
Хусусиятҳое, ки TABLE дар ҳар як аломати ҷорӣ эътибор надоранд. Агар шумо дар бораи он ки оё саҳифаҳои худро тасдиқ карда бошед, ва истифодабарандагоне, ки браузери ин дастгоҳҳоро дастгирӣ мекунанд, шумо метавонед ин элементҳоро истифода баред. Вале аксари онҳо дар браузерҳои муосир дастнорасанд ё алтернативаҳо доранд, ки стандартҳои мувофиқро доранд.
Мо бо истифода аз ин хусусиятҳо дар ҷадвалҳои HTML тавсия медиҳем .
Ин хосият хусусияти кӯҳнаест, ки пеш аз он ки CSS ба таври васеъ дастгирӣ карда шуд. Он ба шумо имкон медиҳад, ки ранги заминаро тағйир диҳед. Шумо метавонед номи ранг ё рамзи хати ростро таъин кунед. Ин хосият ҳанӯз дар бисёр браузерҳо кор мекунад, аммо барои HTML-и ояндадор, шумо бояд онро истифода набаред ва ба ҷои CSS истифода баред.
Ин алтернативаи беҳтарини ин хусусият моликияти сабки аст.
Барои тағир додани ранги аслии ҷадвал, нависед:
style = "background-color: #ccc;" >
Ин ҷадвал дорои аломати рангӣ аст
Ба монанди бегази bgcolor, хосияти сарҳадӣ ба шумо ранг кардани хосиятро тағйир медиҳад. Ин хосият танҳо аз тарафи Internet Explorer дастгирӣ карда мешавад. Ба ҷои ин, шумо бояд моликияти сабки сарҳадиро истифода баред.
Барои тағир додани ранги ҷигари шумо, нависед:
style = "ранги сарҳади: сурх;"; >
Ин ҷадвал дар сарҳади сурх дорад.
Нишондиҳандаҳои сарҳадӣ ва хусусиятҳои сарҳади байни сарҳадҳо ба Internet Explorer дохил карда шудаанд, то шумо ба марҳилаи 3D дар атрофи шумо табдил диҳед. Аммо, ба мисли IE8 ва то ин, танҳо дар модели стандарти IE7-и стандартҳо дастгирӣ карда шудааст. Microsoft қайд мекунад, ки ин хосиятҳо дастгирӣ намешаванд.
Барои як муддати кӯтоҳ, ки ба элементҳои ҷадвал тааллуқ доранд, барои кӯмак ба браузерҳо медонанд, ки чанд сутунҳо як мизро медонанд. Асосӣ ин буд, ки ин ба суръат бахшидани ҷадвалҳои калон кӯмак мерасонад. Аммо он танҳо аз тарафи Internet Explorer ва IE8 ва то ба амал омад, ин танҳо танҳо дар модели стандартҳои IE7 ва Қоидаҳои дастгирӣ дастгирӣ карда шудааст.
Азбаски як хосияти васеъ (кӯҳна дар HTML5 вуҷуд дорад) бисёри одамоне ҳастанд, ки ба мизҳои баландсифат низ миқдори баланд доранд. Аммо азбаски ҷадвалҳо ба паҳншавии мазмуни онҳо ё паҳншавии он дар CSS ё хосиятҳои васеъ мутобиқ мебошанд, баландии он набояд маҳдуд бошад. Пас, ба ҷои он, браузерҳо хосияти баландро барои муайян намудани ҳадди ақали ҷадвал нишон дод. Агар ҷадвал аз баландии он баландтар бошад, он баландтар нишон медиҳад. Аммо шумо бояд молро истифода баред
Бо амволи баландшиддати CSS, шумо метавонед миқдори каҷро, агар шумо моликияти CSS-ро истифода баред, муайян кунед, ки чӣ бо мазмуни зиёдатии он рӯй медиҳад.
Барои баланд бардоштани ҳадди ақалли дар ҷадвал, нависед:
style = "баландӣ: 30t;" >
Ин ҷадвал на камтар аз 30 дараҷа баланд аст.
Ду хусусият ва фазои иловаг дар атрофи чапҳо / рост (hspace) ва боло / bottom (vspace) аз ҷадвал. Шумо бояд ба ҷои моликияти сабки истифода баред.
Барои фосилаи амудӣ ба 20 пиксел ва фазои уфуқӣ ба 40 пиксел муқаррар кунед, нависед:
style = "margin: 20px 40px;"
Ин ҷадвал дорои вspace аз 20 пиксел ва як ҳаҷми 40 пиксел аст.
Ин хосият хосияти мантиқӣ мебошад, ки оё мӯҳтавои ҷадвал бояд дар канори элементҳои валента ё тиреза ва ё қувваозоии уфуқӣ баста шавад. Баръакс, шумо бояд хосиятҳои бастабандии ҳар як ҳуҷайраи ҷадвалиро бо истифодаи амволи CSS муайян кунед.
Барои сутуни бисёр бо матн навиштан, нависед:
style = "фазои сафед: nowrap;" > Ин сутун бо ton аз мундариҷа аст. Аммо ҳатто агар он аз контейнер васеътар бошад, матн набояд ба сатри оянда тамға накунад, балки ба ҷои тирезаи браузер барои мутобиқати ҳамаи мундариҷа ба уфуқӣ ҳаракат кунед.
Ниҳоят, хосият муайян мекунад, ки чӣ гуна ҳар як ҳуҷайра бояд дар дохили ҳуҷайра амудӣ бошад. Ба ҷои ин инъикоси нодуруст, шумо бояд амволи CSS-ро дар ҳар як кнопкаи шумо иваз кунед. Шумо наметавонед таъсири таъсироти ин услубро бинед, агар мӯҳтавои ҳуҷайра камтар аз фазои мавҷудбуда аз тарафи дигар, ҳуҷайраҳои калонтаре бошад.
Барои маҷбур кардани ҳуҷайра ба сатри поён (ба ҷои миёна, ба мисли пешфарз), нависед:
Ин ҳуҷайра аз истироҳат дур аст ва ҳамин тавр баландии баландтарро маҷбур мекунад. Ҳамин тавр, шумо мебинед, ки ҳуҷайраҳои амудӣ мутобиқ ба поёнӣ ба поён мерасад.
style = "воҳиди амудӣ: поёни;"; Мундариҷа дар поёни.
Мундариҷа дар миёна.