It makket it measte út HTML-tabellen troch tabelattribinten te learen
HTML-tabelattributen jouwe jo in soad mear kontrôle oer HTML-tabellen. Der binne in soad attributen beskikber foar tabellen om se mear ynteressant te meitsjen en it look fan jo side te feroarjen.
HTML TABLE Element Attributen
Yn HTML5 brûkt it elemint de globale attributen en in oar attribút:. En it is feroare om allinich de wearde fan 1 of lege te wêzen (of "border"). As jo de breedte fan 'e grins wizigje wolle, moatte jo gebrûk meitsje fan de CSS-eignom fan' e grinsbreedte.
Sjoch hjirûnder om te learen oer de jildende tabelattribute fan HTML5.
Der binne ek ferskate attributen dy't diel binne fan de spesifikaasje HTML 4.01 dy't yn HTML5 ferâldere is:
- -Us de CSS padding eigenskip op 'e tafel TD en TH eleminten.
- -Us de CSS-eigendomrânsje-ôfstân op 'e tafel.
- -Use CSS-stilen border-color: black; en grinsstyl op 'e tafel.
- -Use CSS- stilen border-color: black; en grinsstyl op 'e passende eleminten fan' e tafel.
- -Ofst, moatte jo de struktuer fan 'e tafel yn beskriuwing beskriuwe of de folsleine tabel yn in figuer pleatse en it beskriuwt it yn in FIGCAPTION. As alternatyf kinne jo de struktuer fan 'e tafel ferienfâldigje, sadat gjin taljochting nedich is.
- -Us de CSS breed eigendom.
En ien attribút dat ferwurde yn HTML 4.01 en is ek yn HTML5 ferâldere.
Mear witte oer de HTML 4.01 TABLE attributen.
- align-brûke ynstee fan it CSS-marzje-eigenskip.
Der binne ek ferskate attributen dy't gjin diel binne fan elke HTML-specifikaasje.
Brûk dizze eigenskippen as jo witte dat de browsers dy jo stypje kinne har behannelje en jo net kieze oer jildich HTML.
- -Us de CSS-eigenskip eftergrûn-kleur yn plak.
- bordercolor - Brûk de CSS-eigenskip grinskleur yn plak.
- bordercolorlight -Us it CSS-eigenskip griente-kleur yn plak.
- bordercolordark - Brûk de CSS-eigenskip grinskleur yn plak.
- cols -It is gjin alternatyf foar dit attribút.
- hichte - brûke ynstee fan 'e CSS-eigenskiphichte.
- -Us de CSS eigendom mar ynstee.
- -Us de CSS eigendom mar ynstee.
- - brûke ynstee fan it CSS-eigenskip wite-romte.
- -Us de CSS-eigenskip vertikal-align ynstee.
Lês mear oer de browser spesifike TABLE attributen.
HTML5 TABLE Element Attributes
Om't wy hjirboppe neamd binne, is der mar ien attribút, allinich de globale eigenskippen, dat jildich is op in HTML5 TABLE-elemint: grins.
It grûnatoarium wurdt brûkt om in grins te beskieden oer it hiele tafel en alle sellen yn it plak. Der wie wat fraach hoe oft it yn 'e spesifikaasje fan HTML5 opnaam wurde soe, mar it bleau omdat it ynformaasje oer de tafelstruktuer levere, fierder allinich stilene ymplikaasjes.
Om it grûnattribut te foegjen set jo de wearde nei 1 as der in râneband is en leech (of it attribút befetsje) as it net is. De measte browsers sille ek stipe 0 foar gjin grins, en in oare yntegerwearde (2, 3, 30, 500, etc) om de breedtebreedte yn piksels te deklarearjen, mar dit is yn HTML5 ferâldere. Yn stee dêrfan moatte jo gebrûk meitsje fan CSS-barrenstyl eigenskippen om de grinsbreedte en oare stilen te definiearjen.
Om in tafel mei in grins te meitsjen, skriuwe:
border = "1" >
Dit is in tafel mei in râne
Der binne HTML 4.01-attributen dy't yn HTML5 ferâldere binne. As jo plan hawwe op it skriuwen fan HTML-dokuminten 4.01, kinne jo leare, oars kinne jo se negearje. De measte fan dizze eigenskippen hawwe alternativen, hjirboppe beskreaun.
Wy beskriuwe de eigenskippen fan it elemint dat jildich is yn HTML5 (en HTML 4.01). Dit beskriuwt de TABLE attributen dy't jildich binne yn HTML 4.01, mar binne yn HTML5 ferâldere. As jo HTML-dokuminten noch altyd skriuwe, kinne jo dizze attributen brûke, mar de measte hawwe alternativen dy't jo siden mear takomstbestie meitsje as jo jo nei HTML5 ferpleatse.
Valid HTML 4.01 attributen
It attribus dat wy hjirboppe beskreaun hawwe.
It iennichste ferskil yn HTML 4.01 fan HTML5 is dat jo in folsleine ynteger oanjaan kinne (0, 1, 2, 15, 20, 200, ensfh.) Om de breedte fan 'e grins yn piksels te definiearjen.
Om in tabel mei in 5px grin te bouwen, skriuwe:
border = "5" >
Dizze tafel hat in 5px gers.
Sjoch in foarbyld fan twa tabellen mei grinzen.
It attribus beskiedt de romte fan romte tusken selders en de ynhâld fan 'e sel. De standert is twa piksels. Set it cellpadding oan 0 as jo gjin romte hawwe tusken de ynhâld en rânen.
Om de sellen padding op 20 te setten, skriuwe:
cellpadding = "20" >
Dizze tafel hat in cellpadding fan 20.
Tillegrien wurde skieden troch 20 piksels
Besjoch in foarbyld fan in tabel mei cellpadding
It attribus beskiedt de romte fan romte tusken de tabel-sellen en de sel ynhâld. As cellpadding is de standert op twa piksels ynsteld, sadat jo it opsetten moatte nei 0 as jo gjin sel foarstelle wolle.
Om tafallopstân oan in tafel ta te foegjen, kinne jo skriuwe:
cellspacing = "20" >
Dizze tafel hat in selskip fan 20
Seleks wurdt getal mei 20 piksels
Sjoch in tafel mei cellspacing
It attribút identifisearret hokker dielen fan 'e râne fan' e bûtenkant fan in tafel sichtber binne. Jo kinne jo tabel oan alle fjouwer kanten skine, ien ien side, boppe en ûnder, links en rjochts, of net.
Hjir is it HTML foar in tabel mei allinich de linkerkant:
frame = "lhs" >
Dizze tafel
sil hawwe
allinich de
loftside pleatst
En in oar foarbyld mei de ûnderkant:
frame = "below" >
Dizze tafel hat in râne op 'e boaiem.
Besjoch inkele tafels mei frames
It attribus is te fergelykjen mei it frameattribut, allinich it beynfloedet de grinzen om 'e sellen fan' e tafel. Jo kinne regels ynstelle op alle sellen, tusken kolommen, tusken groepen lykas TBODY en TFOOT of gjin.
Om in tabel mei linen allinich te meitsjen tusken de rigen, skriuwe:
rules = "rows" >
Dizze tabel hat 4x4
de rigen net kolommen
skreaun mei
rigels attribute.
En in oar mei rigels tusken de kolommen:
rules = "cols" >
Dit is
in tabel
wêr de
kolommen
binne
markearre
Hjir is in foarbyld fan aa tafel mei regels
It attribus jout ynformaasje oer de tabel foar skermlêzers en oare brûkers dy't soene problemen lêze tabellen hawwe. Om it oersichtige attribus te brûken, skriuwst in koart beskriuwing fan 'e tafel en set dat as de wearde fan it attribute. De gearfetting sil net sjen op 'e webside yn de measte standert webbrowsers.
Hjir is hoe't jo in ienfâldige tafel mei in gearfetting skriuwe:
summary = "Dit is in foarbyldtabel dy't filler ynformaasje befettet. It doel fan dizze tabel is om in oersicht te bewizen." >
kolom 1 rige 1
kolom 2 rige 1
kolom 1 rige 2
kolom 2 rige 2
Sjoch in tafel mei in gearfetting
It attribus befettet de breedte fan 'e tafel yn of piksels as as persintaazje fan it container elemint. As de breed net ynsteld is, sil de tabel allinich safolle romte nimme as it de ynhâld ynhâldt moat, mei in maksimale breed itselde as de breedte fan it haadmiddel.
Om in tabel mei in spesifike breedte yn piksels te bouwen, kinne jo skriuwe:
width = "300" >
Dizze tafel is 80% fan 'e breedte fan' e kontener 't yn.
En in tabel mei in breedte op te bouwen dy't in persintaazje fan it heule elemint is, skriuwe:
width = "80%" >
Dizze tafel is 80% fan 'e breedte fan' e kontener 't yn.
Sjoch in foarbyld fan in tafel mei in breedte
Ferwurde HTML 4.01 TABLE attribút
Der is ien attribút fan it TABLE-elemint dat ferwurde yn HTML 4.01 en ferâldere yn HTML5: alignearje . Dit attribus lit jo ynstelle hoe't de tabel op 'e side lizze moat foardat de tekst dy't njonken it is. Dit attribút is ferwurde yn HTML 4.01, en jo moatte miskien brûke. Ynstee dêrfan moatte jo de CSS-eigendom brûke of de marzje-lofter: auto; en margje-rjochts: auto; stilen. It float-eigenskip jouwt jo in resultaat dat tichter by is wat it attribút opnij is, mar it kin ynfloed op de manier wêrop de rest fan de ynhâld fan de side werjaan. De marzje-rjochter: auto; en margje-lofts: auto; binne wat de W3C advisearret as alternatyf.
Hjir is in ferwurde foarbyld mei it attribút opnij:
align = "right" >
Dizze tafel is rjochts op
Tekst fliist om it lofts hinne
Sjoch in ferwurde foarbyld mei it oanpassen fan attribút.
En om deselde effekt te krijen mei jildich (net fersoarge) HTML, skriuwe:
style = "float: right;" >
Dizze tafel is rjochts op
Tekst fliist om it lofts hinne
De folgjende eksplisyt TABLE attributen dy't gjin diel binne fan elke HTML-specifikaasje.
De foarige ynformaasje beskriuwt attributen fan it HTML-elemint dat jildich is yn HTML 4.01, mar binne yn HTML5 ferâldere.
De folgjende beskriuwt TABLE attributen dy't net jildich binne yn elke aktuele specifikaasje. As jo der net soarchje oer oft jo siden befetsje en jo brûkers brûke in browser dy't dizze eleminten stipet, kinne jo dizze eleminten brûke. Mar de measte fan harren binne noch net stipe yn moderne browsers of alternativen dy't mear standerts-konform binne.
Wy advisearje it net oan dizze attributen op jo HTML-tabellen.
It attribút is in âlde attribút dat opnommen is foardat CSS in protte stipe waard. It jout jo de eftergrûnkleur fan 'e tafel te feroarjen. Jo kinne in kleurnamme of in hexadezimal-koade ynstelle. Dit attribus wurket noch altyd yn in soad browsers, mar foar takomstbestindige HTML, moatte jo it net brûke, en brûke CSS yn stee.
It bettere alternatyf foar dit attribje is it styl eigendom.
Om de eftergrûnkleur fan in tabel te feroarjen, kinne jo skriuwe:
style = "background-color: #ccc;" >
Dit tabel hat in grau eftergrûn
Similar to the attribute bgcolor, the bordercolor attribute allows you to change the color of the attribute. Dit attribút wurdt allinich stipe troch Internet Explorer. Ynstee dêrfan moatte jo it eigendom fan 'e grinskleur styl brûke.
Om de kleur fan jo tabelgrûn te feroarjen, skriuwe:
style = "border-color: red;" >
Dizze tafel hat in read râne.
De aginda 'bordercolorlight' en 'bordercolordark' binne yn 'e Internet Explorer opnaam om te meitsjen dat jo in 3D-grins om jo tabel oanmeitsje kinne. As fan IE8 en opheven wurdt dit allinich stipe yn IE7 Standards Mode en Quirks Mode . Microsoft stelt dat dizze eigenskippen net langer stipe wurde.
Foar in koarte tiid hat de kolken oanwêzich op it TABLE-elemint foarsteld om helpbrowsers te witten hoefolle kolommen in tafel hie. It foardiel wie dat dit soarget foar it opheljen fan grutte tabellen. It wie lykwols allinich útfierd troch Internet Explorer, en as IE8 en opheven, dit wurdt allinich stipe yn IE7 Standards Mode en Quirks Mode.
Om't der in breedtearkartemint is (ôfbylde yn HTML5) hat in protte minsken der oan hân dat der in heuvelattribute foar tafels wie. Mar om't tabellen mei de breedte fan har ynhâld of de bepaalde breedte yn it CSS of breedte-attribje oerienkomme, koe de hichte net beheind wurde. Sa hawwe ynstelle browsers it hichte-attribje om de minimale hichte fan de tabel te definiearjen. As de tafel grutter wie as dy hichte, soe it grutter wurde. Mar jo moatte it eigendom brûke
Mei it CSS-hichte-eigendom kinne jo de hichte beheine as jo it CSS-eigenskip brûke om te definiearjen hokker hokker passeel ynhâld is.
Om de minimale hichte op in tafel te setten, skriuwe:
style = "height: 30em;" >
Dizze tafel is op syn minst 30 ems heech.
De twa attributen en tafoegde romte om 'e linker / rjochtside (hspace) en top / bottom (vspace) fan' e tafel. Jo moatte it styl eigendom brûke.
Om de fertikale romte op 20 piksels te stellen en de horizontale romte oant 40 piksels te skriuwen, skriuwe:
style = "margin: 20px 40px;"
Dizze tafel hat in fspace fan 20 piksels en in hspace fan 40 piksels.
It attribút is in booleane attribute dat definiearret oft de ynhâld fan 'e tafel oan' e kant fan it heule elemint of it finster klikke moat of horizontaal scrolling kriget. Yn stee dêrfan moatte jo de wikkingeigenskippen fan elke tafelzelle definiearje mei it CSS-eigenskip.
Om in kolom te meitsjen mei in protte tekst net wapjen skriuwe:
style = "white-space: nowrap;" > Dit is in kolom mei in ton fan ynhâld. Mar ek as it grutter is as de kontener de tekst moat net nei de folgjende line wekke, mar foarkomme it finster fan it blêdzjer horizontaal om alle ynhâld te sjen.
Uteinlik definieare it attribút hoe't de ynhâld fan elke sellen verticaal yn 'e sel te rjochtsjen moat. Ynstee fan dizze ûnjildige attribute, moatte jo de CSS-eigenskip brûke op elke sellen dy't jo de justysje feroarje wolle. Jo sille de effekten fan dizze styl net bepale, behalve de ynhâld fan 'e sellen minder dan de beskikbere romte dy't makke binne troch oare, gruttere sellen.
Om in sel te ferkrêftigjen om de boaiem te pleatsen (yn stee fan 'e midden, as standert), skriuwe:
Dizze sel is langer dan de rêst en sa sil de hichte twongen om heger te wurden. Sa sille jo sjogge dat de vertically alignearre sel is op 'e boaiem rjochte.
style = "vertical-align: bottom;" > Ynhâld oan bod.
Ynhâld yn midden