Kupeza zambiri kuchokera pa matebulo a HTML pakuphunzira zida za tebulo
Makhalidwe a tebulo la HTML amakupatsani ulamuliro wambiri pa matebulo a HTML. Pali zizindikiro zambiri zomwe zikupezeka pa matebulo kuti zikhale zochititsa chidwi kwambiri ndikusintha maonekedwe a tsamba lanu.
HTML TABLE Zizindikiro Zofunikira
Mu HTML5 chigawocho chimagwiritsa ntchito zikhumbo za dziko lonse ndi zizindikiro zina:. Ndipo zasintha kukhala ndi phindu la 1 kapena lopanda kanthu (ie border = ""). Ngati mukufuna kusintha chigawo cha malire, muyenera kugwiritsa ntchito malire a CSS kumalire.
Onani m'munsimu kuti muphunzire za zilembo za HTML5 zapamwamba.
Palinso zizindikiro zingapo zomwe ziri mbali ya HTML 4.01 ndondomeko yomwe yakhala yosasinthika mu HTML5:
- - Gwiritsani ntchito katundu wa CSS padding pa tebulo la TD ndi zinthu za TH.
- - Gwiritsani ntchito malire a CSS malire pa tebulo.
- - Gwiritsani ntchito mafashoni a CSS malire-mtundu: wakuda; ndi mawonekedwe a malire pa tebulo.
- - Gwiritsani ntchito mafashoni a CSS malire-mtundu: wakuda; ndi kachitidwe ka malire kumbali zoyenera pa tebulo.
- -Pomwepo, muyenera kufotokozera kapangidwe ka tebulo mu CAPTION kapena kuyika tebulo lonse mu CHIGWIRITSO ndikufotokoza izo mu FIGCAPTION. Mwinanso, mungathe kuphweka mapangidwe a tebulo kuti pasakhale kufotokoza.
- -Gwiritsani ntchito katundu wa width CSS.
Ndipo chidziwitso chimodzicho chinachotsedwa mu HTML 4.01 ndipo chimakhalanso chosasinthika mu HTML5.
Dziwani zambiri za HTML 4.01 ZINTHU ZONSE.
- Gwiritsani ntchito - Gwiritsani ntchito katundu wa CSS mmalo mwake.
Palinso makhalidwe angapo omwe sali mbali ya mafotokozedwe onse a HTML.
Gwiritsani ntchito zikhumbozi ngati mukudziwa kuti masakatuli omwe mumagwiritsa ntchito angathe kuthana nawo ndipo simusamala za HTML yoyenera.
- - Gwiritsani ntchito katundu wa CSS kumbuyo-mtundu m'malo mwake.
- Malire - Gwiritsani ntchito katundu wa CSS malire-mmalo mwake.
- Mphindi - Gwiritsani ntchito CSS malire malire mmalo mwake.
- Bordercolordark - Gwiritsani ntchito katundu wa CSS malire-mmalo mwake.
- Zolinga-Palibe njira yotsatila iyi.
- kutalika - Gwiritsani ntchito katundu wa CSS mmwamba mmalo mwake.
- -Gwiritsani ntchito malire a CSS m'malo mwake.
- -Gwiritsani ntchito malire a CSS m'malo mwake.
- - Gwiritsani ntchito katundu wa CSS woyera-malo m'malo mwake.
- - Gwiritsani ntchito katundu wa CSS wokhomerera.
Phunzirani zambiri za Browser Specific TABLE Makhalidwe.
HTML5 ZINTHU Zopangira Zomwe
Monga tanenera pamwambapa, pali chidziwitso chimodzi chokha, kupyola malingaliro apadziko lonse, omwe ali ovomerezeka pa HTML5 TABLE chinthu: malire.
Chikhalidwe cha malire chimagwiritsidwa ntchito kutanthawuzira malire kuzungulira tebulo lonse ndi maselo onse omwe ali mmenemo. Panali funso linalake ngati likuphatikizidwa mu ndondomeko ya HTML5, koma linapitiriza chifukwa linapereka chidziwitso chokhudza maonekedwe a tebulo, kupyolera pamasewero chabe.
Kuti muwonjezere chikhazikitso, mumayika mtengo ku 1 ngati pali malire ndipo mulibe kanthu (kapena musiye khalidwe) ngati palibe. Masakatuli ambiri amathandizanso 0 popanda malire amodzi, ndi mtengo wina uliwonse (2, 3, 30, 500, etc) kuti adziwe kufalikira kwa malire mu pixels, koma izi sizingatheke ku HTML5. M'malomwake, muyenera kugwiritsa ntchito maonekedwe a CSS kumalire kuti mufotokozere kutalika kwa malire ndi mitundu ina.
Pangani tebulo ndi malire, lembani:
border = "1" >
Iyi ndi tebulo lokhala ndi malire
Pali zilembo za HTML 4.01 zomwe zilibe ntchito mu HTML5. Ngati mukufuna kukonza zikalata za HTML 4.01, mukhoza kuziphunzira, mwinamwake, mukhoza kuzinyalanyaza. Ambiri mwa zikhumbozi ali ndi njira zina, zomwe zafotokozedwa pamwambapa.
Timafotokoza zizindikiro za zinthu zomwe zili mu HTML5 (ndi HTML 4.01). Izi zikutanthawuza THABLE kuti imakhala yeniyeni mu HTML 4.01, koma ilibe ntchito mu HTML5. Ngati mudakalilemba malemba a HTML 4.01, mungagwiritse ntchito malingaliro awa, koma ambiri a iwo ali ndi njira zina zomwe zingapangitse masamba anu kukhala owonetseredwa mtsogolo mukamasuntha ku HTML5.
Zolondola HTML 4.01 Zizindikiro
Chikhumbo chomwe tachifotokoza pamwambapa.
Kusiyana kokha ku HTML 4.01 kuchokera ku HTML5 ndikoti mungathe kufotokoza zonse (0, 1, 2, 15, 20, 200, etc.) kuti mufotokozere kutalika kwa malire mu pixels.
Kumanga tebulo ndi malire 5px, lembani:
border = "5" >
Tebulo ili ndi malire a 5px.
Onani chitsanzo cha matebulo awiri okhala ndi malire.
Chikhumbochi chimatanthauzira kuchuluka kwa malo pakati pa malire a selo ndi zomwe zili mu selo. Kulephera ndi pixels awiri. Ikani sepadaphala ku 0 ngati simukufuna malo pakati pa zomwe zili ndi malire.
Kuyika padding cell mpaka 20, lembani kuti:
cellpadding = "20" >
Tebulo ili liri ndi maselo a maselo 20.
Malire a magulu adzalekanitsidwa ndi pixelisi 20.
Onani chitsanzo cha tebulo ndi cellpadding
Chikhumbochi chimatanthauzira kuchuluka kwa danga pakati pa masebulo ndi selo. Mofanana ndi maselo opangira maselo, kusakhulupirika kwasankhidwa kwa pixelisi ziwiri, kotero muyenera kuyika 0 ngati simukufuna kusinthana kwa selo.
Kuti muwonjezere selo kusiyana ndi tebulo, lembani:
cellspacing = "20" >
Tebulo ili ndi cellspacing wa 20.
Maselo adzapatulidwa ndi pixel 20.
Onani tebulo ndi cellspacing
Chikhumbochi chimadziwika kuti mbali ziti za malire ozungulira kunja kwa tebulo zidzawonekera. Mukhoza kupanga tebulo lanu kumbali zonse zinayi, mbali imodzi, pamwamba ndi pansi, kumanzere ndi kumanja, kapena palibe.
Pano pali HTML ya tebulo yomwe ili ndi malire okhawo:
chimango = "lhs" >
tebulo ili
adzakhala
kokha
mbali ya kumanzere yakhazikika
Ndipo chitsanzo china ndi chithunzi chapansi:
chimango = "pansi" >
Tebulo ili liri ndi chithunzi pansi.
Onani magome ali ndi mafelemu
Chikhumbocho chikufanana ndi chiwonetsero cha chimango, koma chimakhudza malire ozungulira maselo a tebulo. Mukhoza kukhazikitsa malamulo pa maselo onse, pakati pa zigawo, pakati pa magulu onga TBODY ndi TFOOT kapena palibe.
Kumanga tebulo ndi mizere yokha pakati pa mizera, lemba:
malamulo = "mizere" >
Gome la 4x4 lili ndi
mizere yopanda mizati
ofunikira ndi
chiwerengero cha zotsatira.
Ndipo wina ndi mizere pakati pa zipilala:
malamulo = "cols" >
Ichi ndi
tebulo
kumene
ndemanga
ali
yowonekera
Pano pali chitsanzo cha tebulo ndi malamulo
Chidziwitsochi chimapereka zambiri zokhudza tebulo kwa owerenga masewero ndi othandizira ena omwe angavutike kuwerenga matebulo. Kuti mugwiritse ntchito chidule, mulembe mwachidule ndondomekoyi ndikuyiyika ngati mtengo wa chikhumbo. Chidulecho sichisonyeza pa tsamba la webusaiti mumasewera ambiri omwe alipo.
Pano pali momwe mungalembe tebulo losavuta mwachidule:
summary = "Iyi ndi tebulo lachidziwitso lomwe liri ndi uthenga wokhutira. Cholinga cha gome ili ndikuwonetsera mwachidule." >
mzere woyamba mzere 1
mzere 2 mzere 1
mzere woyamba mzere 2
chaputala 2 mzere 2
Onani tebulo mwachidule
Chikhumbochi chimatanthauzira kuchuluka kwa tebulo mu pixels kapena peresenti ya chidebecho. Ngati m'lifupi sichikhazikitsidwa, tebulo lidzatenga malo okwanira omwe akuyenera kuwonetsera zomwe zili mkati mwake, ndi kutalika kwake kufanana ndi m'lifupi la chigawo cha makolo.
Kuti mumange tebulo ndi chigawo china pa pixels, lembani:
width = "300" >
Tebulo ili ndi 80% ya chidebecho chiri mkati.
Ndipo kumanga tebulo ndi m'lifupi lomwe ndilo gawo la makolo, lembani:
width = "80%" >
Tebulo ili ndi 80% ya chidebecho chiri mkati.
Onani chitsanzo cha tebulo ndi m'lifupi
Kuchokera HTML 4.01 ZINTHU Zowonjezera
Pali chidziwitso chimodzi cha zinthu za TABLE zomwe zimatchulidwa mu HTML 4.01 ndipo zimatha kusinthika mu HTML5: zigwirizana . Chikhumbo ichi chimakulolani kuyika komwe tebulo liyenera kukhala pa tsamba likugwirizana ndi zomwe zili pambali pake. Chikhumbo ichi chaletsedwa mu HTML 4.01, ndipo muyenera kupewa kugwiritsa ntchito. M'malo mwake, muyenera kugwiritsa ntchito CSS kapena mbali ya kumanzere: auto; ndi kumanja kumanja: auto; mafashoni. Malo oyandama amakupatsani zotsatira zomwe ziri pafupi ndi zomwe zizindikirozo zimaperekedwa, koma zingakhudze njira yomwe masamba onsewa akuwonetsera. Kum'mwera kumanja: galimoto; ndi m'mphepete-kumanzere: auto; ndi zomwe W3C amalimbikitsa monga njira ina.
Pano pali chitsanzo chotsutsa pogwiritsa ntchito chikhalidwe chofanana:
align = "right" >
Gome ili likugwirizana molondola
Malemba akuzungulira kuzungulira kumanzere
Onani chitsanzo chotsutsa pogwiritsa ntchito chikhalidwe chofanana.
Ndipo kuti mupeze zotsatira zomwezo ndi HTML (osadziwika) yosayenera, lembani:
style = "yambani: kulondola;" >
Gome ili likugwirizana molondola
Malemba akuzungulira kuzungulira kumanzere
Zotsatirazi zikufotokozera TABLE kuti sizili mbali ya mafotokozedwe onse a HTML.
Zomwe zapitazo zimalongosola zizindikiro za HTML zomwe zimakhala zowonjezeka mu HTML 4.01 koma zimachotsedwa mu HTML5.
Zotsatirazi zikufotokozera zilembo za TABLE zomwe siziri zogwirizana ndi zomwe zilipo panopa. Ngati simukudera nkhawa ngati masamba anu akutsimikizirika ndipo ogwiritsa ntchito anu akugwiritsa ntchito osakatuli amene amathandiza zinthu izi, ndiye mukhoza kugwiritsa ntchito zinthu zimenezi. Koma ambiri a iwo sali othandizidwa m'masakatuli amakono kapena ali ndi njira zina zomwe zimakhala zovomerezeka.
Sitikulimbikitsanso kugwiritsa ntchito zida izi pa matebulo anu a HTML.
Chikhumbo ndi lingaliro lakale limene linaphatikizidwa pamaso pa CSS isanamathandizidwe kwambiri. Ikuthandizani kusintha mtundu wa tebulo. Mukhoza kukhazikitsa dzina la mtundu kapena code hexadecimal. Chikumbumtima ichi chimagwiranso ntchito muzithukuta zambiri, koma pa HTML yosinthidwa mtsogolo, musagwiritse ntchito, ndipo mugwiritse ntchito CSS mmalo mwake.
Njira yabwino yomwe mungagwiritsire ntchito izi ndizojambula.
Kusintha mtundu wa pansalu, lemba:
style = "kumbuyo:: #ccc;" >
Gome ili liri ndi imvi
Mofanana ndi malingaliro a bgcolor, malingaliro a malire amakupatsani inu kusintha mtundu wa chikhumbo. Chikhumbo ichi chimangowonjezedwa ndi Internet Explorer. M'malo mwake, muyenera kugwiritsa ntchito fomu yamakina a malire.
Kusintha mtundu wa malire a tebulo lanu, lembani kuti:
kalembedwe = "malire-malire: ofiira;" >
Tabulo ili ndi malire ofiira.
Makhalidwe a bordercolorlight ndi bordercolordark anaphatikizidwa mu Internet Explorer kuti akuloleni kuti mupange malire a 3D kuzungulira tebulo lanu. Komabe, monga a IE8 ndi pamwamba, izi zimangowonjezedwa mu IE7 Standards Mode ndi Quirks Mode . Microsoft imanena kuti zinthu izi sizikuthandizidwa.
Kwa kanthawi kochepa, zikhomozo zimagwiritsidwa ntchito pamtundu WABWIRI kuti zithandize othandizira kudziwa malingaliro angapo a tebulo. Cholinga chake chinali chakuti izi zidzakuthandizira kuthamanga kwa magome aakulu. Komabe izo zinangowonjezeredwa ndi Internet Explorer, ndipo monga za IE8 ndikukwera, izi zimangowonjezedwa mu IE7 Standards Mode ndi Quirks Mode.
Chifukwa chakuti pali chiwerengero chokwanira (chosinthidwa mu HTML5) anthu ambiri amaganiza kuti pali malingaliro apamwamba a magome komanso. Koma chifukwa matebulo amagwirizana ndi kuchuluka kwa zomwe ali nazo kapena kutanthauzira kwake m'kati mwa chikhazikitso cha CSS kapena m'lifupi, kutalika sikungalephereke. Kotero m'malo mwake, osatsegula analola malingaliro apamwamba kuti afotokoze kutalika kwa tebulo. Ngati tebulo linali lalitali kuposa kutalika kwake, likanakhala lalitali. Koma muyenera kugwiritsa ntchito katunduyo
Ndi malo a CSS pamwamba mungathe kuletsa kutalika ngati mutagwiritsa ntchito katundu wa CSS ndikufotokozeranso zomwe zimachitika ndi zilizonse zomwe zilipo.
Kuti muike kutalika kwazitali pa tebulo, lembani:
style = "kutalika: 30m;" >
Tebulo ili ndi osachepera 30 pamwamba.
Makhalidwe awiriwa ndi malo owonjezera kumbali ya kumanzere / kumanja (hspace) ndi pamwamba / pansi (vspace) pa tebulo. Muyenera kugwiritsa ntchito malo osindikizira mmalo mwake.
Kuyika malo ozungulira pa pixel 20 ndi malo osakanikirana kufika pa pixelisi 40, lembani:
style = "m'mphepete: 20px 40px;"
Tebulo ili liri ndi spacepace ya ma pixel 20 ndi pixels 40.
Chikhumbocho ndi chikhumbo cha boolean chomwe chimatanthawuza ngati zomwe zili mu tebulo zikulumikiza pamapeto a chinthu choyambira kapena zenera kapena kukakamiza kupukuta kosalala. M'malo mwake, muyenera kufotokozera zizindikiro za kuyika pa sebulo iliyonse pogwiritsa ntchito katundu wa CSS.
Kuti mupange ndondomeko yokhala ndi mauthenga ambiri osapangidwe, lemba:
style = "woyera-space: nowrap;" > Ili ndilo ndondomeko ndi tani yokhutira. Koma ngakhale ngati ndi yaikulu kuposa chidepalacho sichiyenera kukulumikiza mzere wotsatira, koma m'malo mwake yesetsani zenera la osakatuli kuti mupange mozungulira kuti muwone zonse.
Pomalizira, chidziwitsochi chimatanthawuza momwe zomwe zili mu selo iliyonse ziyenera kulumikizana molingana ndi selo. Mmalo mwa chikhalidwe ichi chosayenera, muyenera kugwiritsa ntchito CSS katundu pa selo iliyonse yomwe mukufuna kusintha kusintha kwake. Simudzawona zotsatira za kalembedwe kokha pokhapokha selo lili mkati ndilosafupi ndi malo omwe alipo omwe amasungidwa ndi ena, maselo akuluakulu.
Kukanikitsira selo kuti ikhale pansi (osati pakati, monga yosasinthika), lembani:
Selo ili lalitali kuposa lonse ndipo lidzakakamiza kutalika kukhala wamtali. Kotero mudzawona kuti selo yolumikizana bwino likugwirizana ndi pansi.
style = "chofanana-pansi: pansi;" > Zamkati pansi.
Zamkatikatikati.