Bikaranîna Elementên HTML-TABLE

Hêzên HTML yên ji hêla taybetmendiyên tehlêd hîn bibin

Taybetmendiyên HTML-ê li ser mihrîba HTML-ê zêdetir kontrol dikin. Gelek taybetmendî li ser maseyên heyî hene ku ji wan re balkêştir bikin û çavê xwe ya rûpelê biguherînin.

Xebatên Elementên HTML-ê

Di HTML5 de elementek taybetmendiyên gerdûnî û yek jî taybetmendiyê bikar tîne. Û ev guhertin bi tenê nirxê 1 an vala (i.e. sînor = ""). Heke hûn dixwazin çarçoveya sînor biguherînin, divê hûn xerîbê CSS-sînor bikar bînin.

Li jêr li ser derheqê HTML5-ê ya taybetmendiyê hîn bibin.

Her weha çend taybetmendiyên ku jimareya HTML 4.01 in ku di HTML5 de hate asteng kirin hene:

Û yek taybetmendiyek ku di HTML 4.01 de hate şandin û di HTML5 de jî neçalak e.

Li ser HTML 4.01 Jêderên TABLE-bêtir fêr bibin.

Her çend taybetmendiyên ku ne parçeyek HTML-ê ne ne.

Heke hûn dizanin ku gerokên ku hûn piştevanîya we dikin dikarin bikar bîne û hûn ne li ser HTML-ê nirx nakin.

Li ser taybetmendiyên TABLE-Taybet ên Gerokê zêdetir dizanin.

Xebatên Elementên HTML5 TABLE

Wekî ku ji jorîn re got, tenê tenê yek taybetmendiyek, ji derveyî cîhana cîhanî ye, ku li ser HTML5 TABLE elementek rast e: sînor.

Sîteya taybet a ku li seranserê sînor û tevahiya hucreyan di nav sînor de diyar dikin. Pirsgirêk pirsîn hebû ku ew ê di nav HTML5 de tête navnîşan kirin, lê ew bimîne, çimkî ew agahdariya li ser bingeha maseya danûstandinan, ji derveyî awayên şêweyên hêsan ên pêşkêş kirin.

Ji bo taybetiya sînor ve zêde bike, heke hûn ne ku li sînor û vala heye (heqê taybetmendiyê derkeve) heke 1 diaxivin. Gelek browser dê ji bo sînor neynin 0, û ji hêla nirxên din ên din (2, 3, 30, 500, etc.) ji bo riya çarçoveyê di pencê de ragihand, lê ew di HTML5 de bêhtir e. Ji ber vê yekê, divê hûn taybetmendiyên şêweya CSS bikar bînin ku ji çarçoveya sînor û celebên din ve binivîsin.

Ji bo sînorek tablok çêbikin, binivîse:

border = "1" >

Ev tablo bi sînor ye

Vê HTML 4.01 taybetmendiyên ku di HTML5 de neçar in. Heke hûn li ser belgeyên HTML-4.01-nivîsandinê planî, hûn dikarin wan fêr bibin, nebe, hûn ji wan re nabînin. Piraniya van taybetmendiyên alternatîf hene, jor e.

Em taybetmendiyên elementên ku di HTML5 de derbasdar e (û HTML 4.01). Ev taybetmendiyên TABLE-ê ku HTML-4.01-ê derbasdar e, heb dide, lê di HTML5 de neçalak e. Heke hûn hîn jî belgeyên HTML-401 binivîsin, hûn dikarin van taybetan bikar bînin, lê piraniya wan alternatîf hene ku dê rûpelên paşerojê bêtir ji bo ku hûn bi HTML5 veguherînin zêdetir bikin.

Valid HTML 4.01 Attributes

Taybetiya me jorîn.

Yekane tenê di HTML 4.01 ji HTML5 ve ye ku hûn dikarin tevahî hejmar (0, 1, 2, 15, 20, 200, etc.) diyar bikin ku ji çarçoveya sînor a pencil bike.

Ji bo sînorê 5px a tablo avakirin, binivîse:

border = "5" >

Ev sifrê sînor 5px heye.

Mînakek du tîran bi sînorê re binêrin.

Bi taybetmendiya navendê nav sînorên hucre û naveroka hucreyê diyar dike. Peldanka du pencere ye. Ji bo ku hûn ne di nav naverok û sînor de naxwazin hucreyê hilbijêre.

Ji bo ku heya 20-an-hucreyê hilbijêre, binivîse:

cellpadding = "20" >


Di vê tabloyê de xalek 20 salî ye.

Nav sînoran dê bi 20 pîklên cuda veguherînin.

Wek mînakek tabloya bi hucreyê hilbijêre

Bi taybetmendiya navberên hucreyê û naveroka hucreyê veguhestin. Wekî wekî pîlanpadding, pêşnivîsk du pencilan vekirî ye, da ku hûn wê di 0 de heke heke hûn hûrdanê hucre ne.

Ji bo daveroka hucreyê da ku li ser maseyê ye, binivîse:

cellspacing = "20" >


Di vê tabloyê de hucreyek 20 salî ye.

Cellên bi 20 pixelê ve bêne veguherandin.

Bi tabloyekê re bibihêre

Taybetmendiyê kîjan beşên dora sînor ên derveyî teyrê dê bê dîtin. Hûn dikarin li çar aliyên çarçoveya rûniştin, yek û jor, çep û rast, an jî ne yek.

Va ye HTML ji bo maseya tenê ya çepê ye.

frame = "lhs" >


Ev sifrê
wê heye

tenê tenê
çepê çepgir.

Û mînakek din bi çarçoveya jêrîn

frame = "below" >

Ev sifrê çarçoveya li binê jêrîn.

Hin tablesên bi bi çarçoveyê kontrol bikin

Ev taybetmendiyek bi heman rengî wekhev e, tenê ew sînor bandora dora hucreyên sifrê bandor dike. Hûn dikarin li seranserî hucreyan, di navnîşan de, di nav komên mîna TBODY û TFOOT an yek jî nabe.

Ji bo ku di navbera rêzan de bi teyek ava bikin, binivîse:

rules = "rows" >


Di vê 4x4-ê de heye
rêzên pelan ne tenê kolan

bi xuyakirinê
rêbazên taybetmendiyê.

Û bi rêzikên din di navbera stûnên din de:

rules = "cols" >


Ev e
tablo
li ku derê

columns
hene
highlighted

Li vir hiqûqê nimûne nimûnek e

Taybetmendiyê li ser maseya ji bo xwendevanên dîmînoran û navendên din ên ku dibe ku tehlên xwendinê bibînin. Ji bo karanîna krîza bikar bînin, hûn behsa kurteya kurteya kurt de binivîse û wekî nirxek taybetiya xwe binivîse. Vê gavê li ser rûpela malperên piranîya standardê li ser malperê nîşan bide.

Li vir e ku çiqas bi sernavek bi hêsan re binivîse:

summary = "Ev tehlîmek pispor e ku agahdariya tije ye. Armanca vê tabloyê ye ku kurteya kurteya xwe nîşan bide." >


dora 1 row 1
dora 2 row 1

column 1 row 2
dora 2 row 2

Dîtekek bi bi kurtek bibînin

Bi taybetmendiya çarçoveya tehlûkê an jî pencil an jî wekî sedî ya kantonê ve defines dike. Heke çarçoveya neyê destnîşankirin, tehlîs tenê bi qasî hebe ku ew pêdivî ye ku naveroka dakêşî nîşan bide, bi rêjeya herî zêde ya wek çarçoveya çarçoveya bavê bavikê wê bigire.

Ji bo tabloyek bi çarçoveya taybet a pencê ava bike, binivîse:

width = "300" >

Di vê tabloyê de% 80 ya çarçoveyek kodîker e ku ew e.

Û ji bo ku çarçoveyek bavê bavikê bavêjînek maselê ava bikin, binivîse:

width = "80%" >

Di vê tabloyê de% 80 ya çarçoveyek kodîker e ku ew e.

Wek mînakek bi tabloyek re bibînin

HTML 4.01 Destnîşankirina TABLE Attribute

Vê taybetmendiyek TABLE elementek ku di HTML 4.01 de neçalak û di HTML5 de neçar e. Ev taybetmendiya we destnîşan dike ku li cihê ku li ser rûpelê bi nîvê tekstê ye ku li wê derê ye. Ev taybetmendiya HTML 4.01 di nav de deyne, û hûn bikar bînin ku hûn bikar bînin. Di şûna de, divê hûn xwedan taybetmendiya CSS bikar bikin an jî hûrgel-çep: ot; û margin-right: auto; styles. Xanî xaniyek we ji we re encamê dide ku nêzîkî kîjan taybetmendiyê hebe hebe, lê dibe ku bandorê pirtûkên mayîn nîşan bide. Navîn-rast: auto; û margin-çep: auto; Ma çi ne ku W3C wekî alternatîfek pêşniyaz dike.

Va ye vir nimûne nimûne taybetiya taybetmendiyê ye:

align = "right" >


Ev sifrê rast rast e

Li dora wê çepê çepê ye

Nimûne nimûne taybetmendiyê binivîse mînak.

Û bi heman awayî bi hêla HTML-ê (neheqkirî) ne derbas dibe, binivîse:

style = "float: rast;" >


Ev sifrê rast rast e

Li dora wê çepê çepê ye

Peyvên jêrîn TABLE taybetmendiyên ku ne beşek HTML-ê ne ne.

Agahiyên berê yên taybetmendiyên HTML-ê ku HTML-401-ê derbasdar in rast e-navnîşan dike, lê di HTML5 de ne.

Jêrîn taybetmendiyên TABLE yên ku di navnîşek nuha niha de derbasdar nake diyar dike. Heke hûn ne pispor dikin ka pela pêdivî ye ku hûn bikarhênerên gerîla bikar dikin ku van van hêmanan piştgirî dikin, hingê hûn dikarin van elementan bikar bînin. Lê piranî ji wan re gerokên modern in ne piştevanî ne an alternatîfên ku standardên rastîner in.

Em nimûne van taybetmendiyên li ser maseyên HTMLê dikin.

Taybetmendiyek kevneşopî ye ku ji beriya CSS-ê ve hatibû piştevanîya pir zêde bû. Ew ê ji te re veguhestin rengê rengê paşîn ya guherînê. Hûn dikarin navnîşek rengek an jî hexadecimal code set. Ev taybetmendî hîn di gelek gerokan de dixebite, lê ji bo pêşerojê ya HTML-ê, divê hûn vê bikar bînin, û bi şûna CSS bikar bînin.

Ya alternatîf ji bo vê taybetmendiya sîteyê ye.

Ji bo guhartina rengê paşê ya sifrê biguherînin, binivîse:

style = "background-color: #ccc;" >

Di vê tabloyê de rûpela grayek heye

Di heman demê de bgcolor taybetmendiyê, taybetmendiya bordercolor dide ku hûn rengê taybetmendiyê biguherînin. Ev taybetmendiyê tenê bi hêla Explorer Explorer ve piştgirî ye. Li gorî, hûn bikar anîna xerîba sînor-reng bikar bînin.

Ji bo guhertina rengê sifrê ya we, guhertina:

style = "border-color: red;" >

Ev sifrê sînorek sor heye.

Taybetmendiya înternetê ya înternetê de ji bo ku hûn li ser dora sêweya 3D sînor biafirînin, taybetmendiyên bordercolor û bordercolarkarkê bûn. Lê belê, ji hêla IE8 û uplêdanê , ev tenê di modeha IE7 Standards û Quirks Modê de piştgirî ye . Microsoft dibêje ku ev taybetmendiyên bêtir piştgirî ne.

Ji bo demeke kin, demên taybet li ser bingeha TABLE pêşniyaz kir ku ji bo gerokên ku bizanin ka çiqas li ser sifrê rûniştin bibînin. Pêwîst bû ku ev ê alîkariyê dide ku rendering of tablets of large. Lê belê ev tenê tenê ji hêla înternetê Explorer ve hate bicihkirin, û ji hêla IE8 û bilind ve, ev tenê tenê di IE7 Standards Mode û Quirks Mode de piştgirî ye.

Ji ber ku hebek hejmar (hewayek di HTML5) de hejmarek gelemperî hebû ku hebû ji bo tîmarên taybet hebûn. Lê ji ber ku tehlên bi çarçoveya naveroka xwe re an jî çarçoveya xuyakirinê de li ser CSS an çarçoveyê taybetmendiyê, heway nikare asteng kirin. Ji ber vê yekê, browsers destnîşan kir ku hebûna taybetmendiya herî bilind ya maseyê diyar bikin. Heke ku tilê wê bilindtir bû, ew ê mezin e. Lê divê hûn milk bikar bînin

Bi taybetmendiya CSS-ê, hûn dikarin asta asteng bikin eger hûn xaniyê CSS bikar bînin û herweha diyar bikin ku çi tiştek bi naveroka pir zêde dibe.

Ji bo ku li ser sifrêk kêmtirîn dabeş bikin, binivîse:

style = "height: 30em;" >

Ev tîla herî kêm 30 ems bilind e.

Du hejmar û hejmarên dora çepê / milê çepê (hspace) û top / jêr (vspace) ya sifrê. Divê tu dikarî şexsê hilbijêre.

Ji bo ku qala 20-pîpîkan û qasî horizontal bi 40 pixel veşartin, binivîse:

style = "margin: 20px 40px;"

Di vê tabloyê de çarçoveya 20 pixel û hspace ya 40 pixel hene.

Taybet taybetmendiyek boolean e ku tête naveroka naveroka tehlê li ser perçê an elementê dêûbav an jî pacek an paceya horizontal veşêre. Ji ber vê yekê, divê hûn taybetmendiyên wrapping of cell cell using the property property.

Ji bo ku komek bi gelek gotaran re naxwazin, binivîse:



style = "white-space: nowrap;" > Vê pelê bi tonek naverokê ye. Lê belê heke ji hêla konserê ve girêdayî ye ku nexşeyek dinê nabe, lê bi şûna gerokê gerokê hêza ku bi hemî naveroka dîtina horizontalê veşêre.

Di dawiyê de, taybetmendiyê çawa cûreyên her hucrey divê di hundirê hucreyê de hûrgilî bikin. Di şûna vê nerastê de nebe, divê hûn li her her hucreyê CSS-ê bikar bînin ku bikar bînin ku guhartina xwe bigirin. Hûn ê bandorên vê şêwazê nebînin ku hema naveroka hucreyên kêm ji ji derveyî cîhê mezin, hucreyên mezintir ava dibe.

Ji bo hêza hucreyê da ku li ser binê jêrîn (ji bilî navîn, wek default,) binivîse:



Ev hucrey bêtir ji hêja ye û hingê wê bilindahiya bilindtir be tewer bike. Ji ber vê yekê hûn ê bibînin ku hucreyek vîdyoyê bi awayek vekirî tête navîn.
style = "vertical-align: bottom;" > Contains at bottom.
Contents di navîn.