HTML taulak gehien lortu taularen atributuak ikastea
HTML taularen atributuak HTML mahai gaineko kontrola askoz gehiago ematen dizute. Taulen eskuragarritasun asko daude, interesgarriagoak izateko eta zure orriaren itxura aldatzeko.
HTML TABLE Element Attributes
HTML5n elementuak atributu orokorrak eta beste atributu bat erabiltzen ditu:. Eta aldatu egin da 1 edo hutsik dagoen (hau da, "border =" ") balioa soilik. Ertzaren zabalera aldatu nahi baduzu, mugako zabalera CSS propietatea erabili beharko zenuke.
Ikus beherago HTML5 taularen baliozko atributuak ezagutzeko.
Badira HTML5.aren HTML 4.01 bertsioan zaharkituta egongo diren hainbat atributu ere.
- - Erabili CSS betegarriaren propietatea mahaiaren TD eta TH elementuetan.
- - Erabili CSS propietatearen ertzak mahai gainean.
- - Erabili CSS estiloaren ertz-kolorea: beltza; eta mahai gainean ertz-estiloa.
- - Erabili CSS estiloaren ertz-kolorea: beltza; eta mugaren estiloa mahaiaren elementu egokietan.
- - Horren ordez, TAULA baten egitura deskribatu beharko zenuke edo taula osoa FIGURA batean jartzea eta FIGCAPTION batean deskribatzea. Bestela, mahaiaren egitura erraztu dezakezu azalpenik behar ez izateko.
- - Erabili CSS zabaleraren propietatea.
Eta 4.01 HTML 4. bertsioan zaharkiturik zegoen atributu bat ere badago eta HTML5 zaharkituta dago.
Informazio gehiago HTML 4.01 TABLE atributuei buruz.
- lerrokatu - Erabili CSS marjinaren propietatea horren ordez.
Badago ere HTML zehaztapenik ez duten hainbat atributu ere.
Erabili atributuak hauek onartzen dituzunak onartzen dituzten arakatzaileek kudeatzen dituztela eta ez duzu HTML baliorik.
- - Erabili CSS propietatearen atzeko planoaren kolorea ordez.
- bordercolor - Erabili CSS propietatearen ertz-kolorea ordez.
- bordercolorlight -Elikatu CSS propietatearen ertz-kolorea ordez.
- bordercolordark -Erabil ezazu CSS propietatearen mugaren kolorea ordez.
- cols -Ez dago atributu honi beste aukerarik.
- altuera: erabili CSS propietatearen altuera.
- - Erabili CSS propietatearen marjina ordez.
- - Erabili CSS propietatearen marjina ordez.
- - Erabili CSS propietate zuri-espazioa ordez.
- - Erabili CSS propietatea bertikalki lerrokatzea ordez.
Ikasi gehiago jakiteko Arakatzailearen TABERAKO ATALBURU OROKORRAK.
HTML5 TABLE Element Attributes
Goian aipatu dugun bezala, atributu bakarra dago, atributu orokorren gainetik, HTML5 TABLE elementu batean baliozkoa den balioa: ertza.
Mugako atributua taula osoko ertza eta gelaxken barruan definitzeko erabiltzen da. HTML5 espezifikazioan sartuko den ala ez galdetu zitzaion, baina mantendu egin zen taula-egiturari buruzko informazioa emanez, estilo-ondorioak besterik ez baitziren.
Mugako atributua gehitzeko, 1 balioa ezarriko duzu ertza bada eta hutsik dago (edo ez utzi atributua) ez badago. Nabigatzaile gehienek ere 0 onartzen dute mugatik kanpo, eta beste osoko balio bat (2, 3, 30, 500, etab.) Mugaren zabalera pixeletan deklaratzeko, baina HTML5 zaharkituta dago. Horren ordez, CSS mugako estilo propietateak erabili behar dituzu mugaren zabalera eta beste estilo batzuk definitzeko.
Muga batekin taula bat sortzeko, idatzi:
border = "1" >
Hau da mugaz haraindiko taulan
Badira HTML5-en estekatutako HTML 4.01 atributuak. HTML 4.01 dokumentuak idazteko asmoa baduzu, ikas itzazu, bestela ezingo dituzu jaramonik egin. Atributu horietako gehienek alternatibak dituzte, goian azaltzen dena.
HTML5 (eta HTML 4.01) balio duten elementuen atributuak deskribatzen ditugu. Honek TABLE atributuak HTML 4.01 balioan azaltzen ditu, baina HTML5 zaharkituta daude. Oraindik HTML 4.01 dokumentuak idazten badituzu, atributuak erabil ditzakezu, baina horietako gehienak HTML5-ra eramaten duzunean zure orriak HTML-ra eramango dituzunean etorkizunerako aurreikusitako aukerak izango dituzte.
Valid HTML 4.01 Atributuak
Goian deskribatu dugun atributua.
HTML5-ren HTML 4.01aren alde bakarra osoko zenbaki oso bat (0, 1, 2, 15, 20, 200, eta abar) zehaztu dezakezu, mugan pixeletan zabalera zehazteko.
Taula bat eraikitzeko 5px ertzarekin, idatzi:
border = "5" >
Taula honek 5px ertza du.
Ikusi bi taulak ertzekin.
Atributuak zelularen mugak eta zelaiaren edukia arteko espazio kopurua zehazten du. Lehenetsia bi pixel da. Ezarri mugikorraren 0 eremuan edukia eta ertzak arteko espazioa ez baduzu.
Gelaxkaren betegarria 20 doitzeko, idatzi:
cellpadding = "20" >
Taulak 20 gelaxka ditu.
Mugikorraren ertzak 20 pixel bereiztu egingo dira.
Ikusi gelaxka baten adibidea zelula-babesarekin
Taularen gelaxken eta zelulen edukien arteko espazio kopurua zehazten du atributuak. Ortografia bezalako bezala, lehenetsia bi pixeletan ezarriko da, beraz 0 ezarri behar duzu gelaxka ez bada.
Gelaxka tarte bat mahai batera gehitzeko, idatzi:
cellspacing = "20" >
Taula honek 20 gelaxka ditu.
Gelaxken bidez bereiziko dira 20 pixel.
Ikus gelaxka bat zelulekin
Atributuak mahai baten kanpoaldean dauden mugaren zatiak ikusgai egongo ditu. Mahaia lau aldeetan jar dezakezu, edozein alde, goiko eta behealdean, ezkerrera eta eskuinera, edo bat ere ez.
Hemen HTMLrako taula bat da ezkerreko mugatik soilik:
frame = "lhs" >
Taula hau
izango dute
soilik
ezkerreko markoa.
Eta beheko markoarekin beste adibide bat:
frame = "below" >
Taula honek beheko markoa du.
Begiratu taulak markoekin
Atributuaren markoaren atributuaren antzekoa da, taulako gelaxken inguruko ertzak bakarrik eragiten ditu. Gelaxkak, zutabeen artean, arauak ezarri ditzakezu, TBODY eta TFOOT bezalako taldeen artean edo bat ere ez.
Taula bat errenkada artean lerro batekin eraikitzeko, idatzi:
rules = "rows" >
4x4 mahai hau izan da
errenkadak ez zutabeak
azaldutakoa rekin
arauak atributua.
Eta beste zutabeen arteko lerroekin:
rules = "cols" >
Hau da
mahai bat
non dago
zutabeak
dira
nabarmendutako
Hemen taula baten adibidea da arauekin
Atributuak mahaiaren informazioa ematen du pantailako irakurleentzat eta mahai irakurleek arazoak izan ditzaketen beste erabiltzaile-agente batzuk. Laburpen atributua erabiltzeko, mahaiaren azalpen labur bat idatzi eta atributuaren balioa jarri. Laburpena ez da web orrialdeetan agertuko web nabigatzaile estandar gehienetan.
Hemen taula sinple bat nola idazten duen azaltzen da:
summary = "Hau da betetako informazioa duen taulen taula bat. Taula honen helburua da laburpena erakusteko." >
zutabe 1 errenkada 1
2. errenkada 2 errenkada
zutabe 1 errenkada 2
2. errenkada 2 errenkada
Ikusi taula bat laburpen batekin
Taularen zabalera zehazten du atributuak pixeletan edo edukiontziaren ehuneko gisa. Zabalera ez bada, mahaiak edukia bistaratu behar duen bezainbeste leku hartuko du, gehieneko zabalera, gurasoaren elementuaren zabalera berdina.
Panela zabalera zehatz batekin taula bat eraikitzeko, idatzi:
width = "300" >
Mahai hau edukiontziaren zabaleraren% 80 da.
Eta gurasoaren ehuneko bat den zabalera duen taula bat eraikitzeko, idatzi:
width = "% 80" >
Mahai hau edukiontziaren zabaleraren% 80 da.
Ikusi mahai baten adibidea zabalera batekin
Estekatutako HTML 4.01 TABLE atributua
HTML 4.01 zaharkiturik dagoen TABLE elementuaren atributua dago eta HTML5 zaharkituta dago: lerrokatu . Atributu honi esker, mahaiaren gainean kokatuko da orriaren gainean dagoen testua. Atributu hau HTML 4.01 bertsioarekin desagertu egin da eta ez duzu erabili behar. Horren ordez, CSS propietatea edo marjina-ezkerrera erabili beharko zenituzke: auto; eta marjina-eskubidea: auto; estiloak. Mugikorreko propietateak emaitzen kokapenari dagokionez hurbiltzen den emaitza ematen dio, baina orriaren edukia gainerako edukiei eragiten die. Marjina eskuinera: auto; eta marjina-ezkerra: auto; W3C-k alternatiba gisa gomendatzen du.
Hemen margotutako atributua erabiliz baztertutako adibidea da.
align = "right" >
Taula hau lerrokatuta dago
Testua ezkerrean zehar
Ikusi atzeratutako adibidea lerrokatze atributua erabiliz.
Eta HTML baliozko (ez-zaharkitua) efektu bera lortzeko, idatzi:
style = "float: right;" >
Taula hau lerrokatuta dago
Testua ezkerrean zehar
Honako hauek azaltzen dute TABLE atributuak ez diren HTML zehaztapen baten zatirik.
Aurreko informazio HTML HTML 4.01 balioan dauden HTML elementuen atributuak deskribatzen ditu baina HTML5 zaharkituta daude.
Hurrengo uneko zehaztapenetan baliozkoak ez diren TABLE atributuak azaltzen dira. Zure orrialdeak baliozkotzen dituen ala ez jakin ezean eta erabiltzaileek elementu horiek onartzen dituzten arakatzailea erabiltzen dutenean, elementu horiek erabil ditzakezu. Baina gehienak nabigatzaile modernoetan ez daude onartuta edo estandar gehiago betetzen dituzten alternatibak dituzte.
Ez dugu gomendatzen zure HTML tauletan atributu hauek erabiltzea .
Atributua CSS baino lehenago sartu zen atributu zahar bat da. Mahaiaren atzealdeko kolorea alda dezakezu. Kolore-izen bat edo kode hamaseitar bat konfigura ditzakezu. Atributu hau oraindik nabigatzaile askotan funtzionatzen du, baina etorkizuneko froga HTMLentzat, ez duzu erabili behar, eta CSS erabili ordez.
Atributu honen alternatiba hobea estiloaren propietatea da.
Taula baten atzeko planoa aldatzeko, idatzi:
style = "background-color: #ccc;" >
Taula hondo grisa dauka
Bgcolor atributuaren antzekoa, bordercolor atributuak atributuaren kolorea aldatzeko aukera ematen dizu. Atributu hau Internet Explorer-ek soilik onartzen du. Horren ordez, mugako koloreko estiloaren propietatea erabili beharko zenuke.
Taularen ertzaren kolorea aldatzeko, idatzi:
style = "border-color: red;" >
Taula honek ertza gorria du.
Bordercolorlight eta Borderkolordark atributuak Internet Explorer-en sartu ziren zure mahai inguruan 3D ertza bat sortzeko. Hala ere, IE8 eta gehienez ere, IE7 Araudien Modua eta Quirks Mode onartzen dira . Microsoft-ek propietate hauek jada ez dira onartzen.
Denbora laburrean, TAULA elementuari esleitutako koloreak proposatu zitzaizkion arakatzaileei mahai baten zutabeak zeintzuk diren jakiteko. Hasierako helburua mahai handien errendimendua bizkortzea da. Hala ere, Internet Explorer-ek soilik inplementatu zuen, eta IE8 eta gehienez ere, IE7 Estandar moduak eta Quirks modua bakarrik onartzen ditu.
Zabalgunearen atributua (HTML5 zaharkituta dagoelako) jende askok gain hartu zuen mahai gaineko altuera atributu bat ere. Baina, mahaiak, edukiaren zabalera edo CSS edo zabalera atributuaren zehaztutako zabalera betetzen badute, altuera ezin da mugatu. Beraz, horren ordez, nabigatzaileek altuera atributuaren baimena ematen dute mahaiaren gutxieneko altuera zehazteko. Mahai altuagoa baino handiagoa bada, altuagoa izango litzateke. Baina jabetza erabili behar zenuke
CSS altuera altuarekin altuera mugatu dezakezu CSS propietatea erabiltzen baduzu baita gehiegizko edozein edukiarekin gertatzen denaren definizioa ere.
Mahai baten gutxieneko altuera ezartzeko, idatzi:
style = "height: 30em;" >
Taula hau gutxienez 30 baino handiagoa da.
Bi atributuak eta espazio erantsia ezkerreko / eskuineko aldeetan (hspace) eta goiko / beheko (vspace) taulan. Estilo-propietatea erabili beharko zenuke.
Espazio bertikala 20 pixel eta espazio horizontalera 40 pixel ezartzeko, idatzi:
style = "margin: 20px 40px;"
Taula honek 20 pixeleko vspace bat eta 40 pixeleko hspace bat ditu.
Atributu atributu boolearrak zehazten du mahaiaren edukiak elementu gurasoaren edo leihoaren ertzean edo indarrak korritze horizontalak biltzea. Horren ordez, gelaxka bakoitzeko bilgarrien ezaugarriak zehaztu behar dituzu CSS propietatearekin.
Zutabe bat testu ez asko biltzeko, idatzi:
style = "white-space: nowrap;" > Eduki tona duten zutabe bat da. Hala ere, edukiontziarengandik baino zabalagoa den arren, testua ez da hurrengo lerroetara itzuliko, baizik eta arakatzailearen leihoa horizontalki mugitzeko edukia ikusteko.
Azkenean, atributuak zelula bakoitzaren edukia zelularen barruan bertikalki lerrokatu behar duen bezala definitzen du. Baliogabeko atributu honen ordez, CSS propietatea erabili beharko zenuke lerrokatze aldatzeko gelaxka bakoitzean. Ez duzu estilo honen ondorioak ikusiko gelaxken edukiak beste gelaxka handiagoek sorturiko espazioa baino txikiagoa izan ezean.
Gelaxka bat behean lerrokatzeko behartzeko (erdian baino, lehenetsia bezala) idatzi:
Gelaxka hau gainerakoa baino luzeagoa da eta, beraz, altuera handiagoa izango da. Beraz, lerrokatu lerrokatutako gelaxka behean lerrokatuko da.
style = "vertical-align: bottom;" > Behean dauden edukiak.
Edukiak erdian.