Haal die meeste van HTML-tabelle uit deur tabelleienskappe te leer
HTML-tabelkenmerke gee jou baie meer beheer oor HTML-tabelle. Daar is baie eienskappe beskikbaar vir tabelle om hulle interessanter te maak en die voorkoms van jou bladsy te verander.
HTML TABLE Element Attributes
In HTML5 gebruik die element die globale eienskappe en een ander eienskap:. En dit is verander om slegs die waarde van 1 of leeg te hê (dws grens = ""). As jy die breedte van die grens wil verander, moet jy die CSS-eienskap van die breedte-breedte gebruik.
Sien hieronder om te leer oor die geldige HTML5 tabel eienskappe.
Daar is ook verskeie eienskappe wat deel uitmaak van die HTML 4.01-spesifikasie wat in HTML5 verouderd geword het:
- Gebruik die CSS padding eiendom op die tafel se TD en TH elemente.
- Gebruik die CSS-eiendomsgrensspasiëring op die tafel.
- Gebruik CSS-style grens-kleur: swart; en grensstyl op die tafel.
- Gebruik CSS- style grens-kleur: swart; en grensstyl op die toepaslike elemente van die tafel.
- -In plaas daarvan moet jy die struktuur van die tabel in 'n CAPTION beskryf of die hele tabel in 'n FIGUUR sit en dit in 'n FIGUUR beskryf. Alternatiewelik kan jy die struktuur van die tafel vereenvoudig sodat daar geen verduideliking nodig is nie.
- Gebruik die CSS breedte eiendom.
En een kenmerk wat in HTML 4.01 verouderd is en ook in HTML5 verouderd is.
Kom meer te wete oor die eienskappe van HTML 4.01 TABLE.
- belyn- Gebruik die CSS-marge-eiendom in plaas daarvan.
Daar is ook verskeie eienskappe wat nie deel van enige HTML-spesifikasie is nie.
Gebruik hierdie eienskappe as jy weet dat die blaaiers wat jy ondersteun, hulle kan hanteer en jy gee nie om geldige HTML nie.
- Gebruik die CSS-eienskap agtergrondkleur in plaas daarvan.
- grenskleur - Gebruik die CSS-eienskap grenskleur in plaas daarvan.
- border colorlight-Gebruik die CSS-eienskap grens-kleur in plaas daarvan.
- border colordark-Gebruik die CSS-eienskap grens-kleur in plaas daarvan.
- kols-Daar is geen alternatief vir hierdie kenmerk nie.
- hoogte - Gebruik die CSS-eiendomshoogte in plaas daarvan.
- Gebruik die CSS eiendomsmarge eerder.
- Gebruik die CSS eiendomsmarge eerder.
- Gebruik die CSS-eienskap witruimte eerder.
- -Usien die CSS-eiendom vertikaal in lyn.
Kom meer te wete oor die browser spesifieke TABLE eienskappe.
HTML5 TABEL Element Attributes
Soos hierbo genoem, is daar net een kenmerk, buiten die globale eienskappe, wat geldig is op 'n HTML5 TABLE-element: grens.
Die grens kenmerk word gebruik om 'n grens rondom die hele tabel en al die selle binne dit te definieer. Daar was 'n vraag of dit ingesluit sou word in die HTML5-spesifikasie, maar dit het gebly omdat dit inligting oor die tabelstruktuur verskaf het, behalwe stylimplikasies.
Om die grens kenmerk toe te voeg, stel u die waarde in op 1 as daar 'n rand en leeg is (of die kenmerk afskakel) as dit nie is nie. Die meeste blaaiers sal ook 0 ondersteun vir geen rand en enige ander heelgetalwaarde (2, 3, 30, 500, ens) om die breedte van die grens in pixels te verklaar, maar dit is verouderd in HTML5. In plaas daarvan moet jy CSS-grensstyl-eienskappe gebruik om die grenswydte en ander style te definieer.
Om 'n tafel met 'n grens te skep, skryf:
border = "1" >
Dit is 'n tabel met 'n grens
Daar is HTML 4.01 eienskappe wat verouderd is in HTML5. As jy beplan om HTML 4.01-dokumente te skryf, kan jy dit leer, anders kan jy dit ignoreer. Die meeste van hierdie eienskappe het alternatiewe, soos hierbo beskryf.
Ons beskryf die eienskappe van die element wat geldig is in HTML5 (en HTML 4.01). Dit beskryf die TABLE eienskappe wat geldig is in HTML 4.01, maar is verouderd in HTML5. As jy nog steeds HTML 4.01-dokumente skryf, kan jy hierdie eienskappe gebruik, maar die meeste van hulle het alternatiewe wat jou bladsye meer toekomsbeskermend maak as jy na HTML5 skuif.
Valid HTML 4.01 Attributes
Die kenmerk wat ons hierbo beskryf het.
Die enigste verskil in HTML 4.01 van HTML5 is dat jy 'n hele heelgetal (0, 1, 2, 15, 20, 200, ens.) Kan spesifiseer om die breedte van die grens in pixels te definieer.
Om 'n tafel met 'n 5px-grens te bou, skryf:
border = "5" >
Hierdie tabel het 'n 5px-rand.
Sien 'n voorbeeld van twee tafels met grense.
Die kenmerk definieer die hoeveelheid ruimte tussen selgrense en die inhoud van die sel. Die verstek is twee pixels. Stel die selpadding na 0 as jy geen spasie tussen die inhoud en grense wil hê nie.
Om die selbedding op 20 te stel, skryf:
cellpadding = "20" >
Hierdie tabel het 'n selpadding van 20.
Selgrense word geskei met 20 pixels.
Kyk na 'n voorbeeld van 'n tafel met selpadding
Die kenmerk definieer die hoeveelheid ruimte tussen die tafelselle en die selinhoud. Soos selpadding, is die standaard ingestel op twee pixels, dus jy moet dit op 0 stel as jy geen selspasiëring wil hê nie.
Om selspasiëring by 'n tabel by te voeg, skryf:
cell spacing = "20" >
Hierdie tabel het 'n selspasie van 20.
Die cellen word geskei met 20 pixels.
Sien 'n tabel met selspasie
Die kenmerk identifiseer watter gedeeltes van die grens rondom die tafel om sigbaar is. Jy kan jou tafel aan al vier kante, een kant, bo en onder, links en regs, of geen, raam.
Hier is die HTML vir 'n tabel met slegs die linkerkantgrens:
raam = "lhs" >
Hierdie tabel
sal hê
slegs die
linkerkantlyn.
En nog 'n voorbeeld met die onderste raam:
raam = "onder" >
Hierdie tabel het 'n raam aan die onderkant.
Kyk na 'n paar tabelle met rame
Die kenmerk is soortgelyk aan die raam kenmerk, net dit raak die grense rondom die selle van die tafel. Jy kan reëls op al die selle, tussen kolomme, tussen groepe soos TBODY en TFOOT of nie stel.
Om 'n tafel met lyne net tussen die rye te bou, skryf:
rules = "rye" >
Hierdie 4x4 tafel het
die rye nie kolomme
uiteengesit met die
reëls kenmerk.
En nog een met lyne tussen die kolomme:
rules = "cols" >
Dit is
'n tabel
waar die
kolomme
is
gemerkte
Hier is 'n voorbeeld van 'n tabel met reëls
Die kenmerk verskaf inligting oor die tabel vir skermlesers en ander gebruikersagente wat probleme ondervind met die lees van tabelle. Om die opsommende kenmerk te gebruik, skryf jy 'n kort beskrywing van die tabel op en plaas dit as die waarde van die kenmerk. Die opsomming sal nie in die meeste standaard webblaaiers op die webblad vertoon word nie.
Hier is hoe om 'n eenvoudige tabel met 'n opsomming te skryf:
summary = "Hierdie is 'n voorbeeld tabel wat vullerinligting bevat. Die doel van hierdie tabel is om 'n opsomming te toon." >
kolom 1 ry 1
kolom 2 ry 1
kolom 1 ry 2
kolom 2 ry 2
Kyk na 'n tafel met 'n opsomming
Die kenmerk definieer die breedte van die tabel in pixels of as 'n persentasie van die houerelement. As die wydte nie gestel is nie, sal die tabel net soveel spasie opneem as wat dit nodig is om die inhoud te vertoon, met 'n maksimum breedte dieselfde as die breedte van die ouerelement.
Om 'n tafel met 'n spesifieke breedte in pixels te bou, skryf:
width = "300" >
Hierdie tabel is 80% van die breedte van die houer waarin dit is.
En om 'n tafel te bou met 'n wydte wat 'n persentasie van die ouerelement is, skryf:
width = "80%" >
Hierdie tabel is 80% van die breedte van die houer waarin dit is.
Sien 'n voorbeeld van 'n tafel met 'n breedte
Uitgereikte HTML 4.01 TABEL Attribuut
Daar is een kenmerk van die TABLE-element wat in HTML 4.01 verouderd is en verouderd is in HTML5: Belyn . Met hierdie kenmerk kan u bepaal waar die tabel op die bladsy moet wees, relatief tot die teks wat daarby is. Hierdie kenmerk is afgeskaf in HTML 4.01, en jy moet dit vermy. In plaas daarvan, moet jy die CSS-eienskap of die marge-links gebruik: outomaties; en marge-regs: motor; style. Die float-eiendom gee jou 'n resultaat wat nader is aan wat die lyn-kenmerk verskaf het, maar dit kan die manier waarop die res van die bladsyinhoud vertoon, beïnvloed. Die marge-regs: motor; en marge-links: outomaties; is wat die W3C as 'n alternatief aanbeveel.
Hier is 'n verouderde voorbeeld met die lyn eienskap:
align = "right" >
Hierdie tabel is reglynig
Teks vloei om dit na links
Sien 'n afgedankte voorbeeld deur die lyn-kenmerk te gebruik.
En om dieselfde effek te kry met geldige (nie-vervalste) HTML, skryf:
style = "float: right;" >
Hierdie tabel is reglynig
Teks vloei om dit na links
Die volgende verduidelik TABLE eienskappe wat nie deel van enige HTML-spesifikasie is nie.
Die vorige inligting beskryf eienskappe van die HTML-element wat geldig is in HTML 4.01, maar is verouderd in HTML5.
Die volgende beskryf TABLE eienskappe wat nie geldig is in enige huidige spesifikasie nie. As jy nie omgee of jou bladsye valideer nie en jou gebruikers 'n blaaier gebruik wat hierdie elemente ondersteun, kan jy hierdie elemente gebruik. Maar die meeste van hulle word óf nie ondersteun in moderne blaaiers of alternatiewe wat meer standaarde voldoen nie.
Ons beveel nie aan om hierdie eienskappe op u HTML-tabelle te gebruik nie.
Die kenmerk is 'n ou kenmerk wat ingesluit is voordat CSS wyd ondersteun is. Dit laat jou toe om die agtergrondkleur van die tafel te verander. U kan 'n kleur naam of 'n heksadesimale kode stel. Hierdie kenmerk werk steeds in baie blaaiers, maar vir toekomstige beproefde HTML, moet jy dit nie gebruik nie, en gebruik eerder CSS.
Die beter alternatief vir hierdie kenmerk is die styl eiendom.
Om die agtergrondkleur van 'n tafel te verander, skryf:
style = "background-color: #ccc;" >
Hierdie tabel het 'n grys agtergrond
Soortgelyk aan die kenmerk bgcolor, kan u die kleur van die attribuut verander deur die grens kleur kenmerk. Hierdie kenmerk word slegs ondersteun deur Internet Explorer. In plaas daarvan, moet jy die grens-kleurstyl eiendom gebruik.
Om die kleur van jou tafel se grens te verander, skryf:
style = "border-color: rooi;" >
Hierdie tabel het 'n rooi grens.
Die attributen border colourlight en border colordark is opgeneem in Internet Explorer, sodat u 'n 3D-rand rondom jou tafel kan maak. Maar vanaf IE8 en hoër word dit slegs ondersteun in die IE7 Standaarmodus en Quirks af . Microsoft verklaar dat hierdie eienskappe nie meer ondersteun word nie.
Vir 'n kort tyd is die kolom-kenmerk op die TABLE-element voorgestel om te help blaaiers weet hoeveel kolomme 'n tafel gehad het. Die uitgangspunt was dat dit die lewering van groot tafels sal versnel. Dit is egter net geïmplementeer deur Internet Explorer, en vanaf IE8 en hoër word dit net ondersteun in die IE7 Standaarmodus en Quirks af.
Omdat daar 'n wydte kenmerk (verouderd in HTML5) is, het baie mense aanvaar dat daar ook 'n hoogte kenmerk vir tabelle was. Maar omdat tabelle ooreenstem met die breedte van hul inhoud of die gedefinieerde breedte in die CSS of breedte-kenmerk, kan die hoogte nie beperk word nie. In plaas daarvan het blaaiers die hoogte-kenmerk toegelaat om die minimum hoogte van die tabel te definieer. As die tafel groter was as die hoogte, sou dit groter vertoon. Maar jy moet die eiendom gebruik
Met die CSS-hoogte-eiendom kan jy die hoogte beperk as jy ook die CSS-eiendom gebruik om te definieer wat met enige oortollige inhoud gebeur.
Om die minimum hoogte op 'n tafel te stel, skryf:
style = "height: 30em;" >
Hierdie tabel is minstens 30 ems hoog.
Die twee eienskappe en bygevoeg ruimte rondom die linker- / regterkant (hspace) en bo / onder (vspace) van die tabel. Jy moet eerder die styl eiendom gebruik.
Om die vertikale spasie op 20 pixels en die horisontale spasie tot 40 pixels te stel, skryf:
style = "marge: 20px 40px;"
Hierdie tabel het 'n vspace van 20 pixels en 'n hspace van 40 pixels.
Die kenmerk is 'n Boole-eienskap wat bepaal of die inhoud van die tabel op die rand van die ouerelement of -venster moet draai of horisontale blaai moet dwing. In plaas daarvan moet jy die wikkel eienskappe van elke tabel sel definieer met behulp van die CSS eiendom.
Om 'n kolom te maak met 'n baie teks wat nie wikkel nie, skryf:
style = "white-space: nowrap;" > Dit is 'n kolom met 'n ton inhoud. Maar selfs al is dit groter as die houer, moet die teks nie na die volgende reël versnel nie, maar dwing eerder die blaaiervenster om horisontaal te blaai om al die inhoud te sien.
Ten slotte definieer die kenmerk hoe die inhoud van elke sel vertikaal in die sel moet inlyn. In plaas van hierdie ongeldige kenmerk, moet u die CSS-eienskap op elke sel gebruik wat u die belyning van. Jy sal nie die effekte van hierdie styl sien nie, tensy die inhoud van die sel minder is as die beskikbare spasie wat deur ander, groter selle geskep is.
Om 'n sel te dwing om aan die onderkant te koppel (eerder as die middel as die verstek), skryf:
Hierdie sel is langer as die res en so sal die lengte dwing om langer te wees. So sal jy sien dat die vertikaal-gebonde sel aan die onderkant gerig is.
style = "vertical-align: bottom;" > Inhoud onderaan.
Inhoud in die middel.