Niżżel l-aħjar mit-tabelli HTML billi tattribwixxi attributi tal-mejda
L-attributi tal-mejda HTML jagħtuk ħafna aktar kontroll fuq it-tabelli HTML. Hemm ħafna attributi disponibbli għat-tabelli biex jagħmluhom aktar interessanti u jibdlu l-ħarsa tal-paġna tiegħek.
Attributi ta 'Element ta' HTML TABLE
F'HTML5 l-element juża l-attributi globali u attribut wieħed ieħor:. U nbidel biex ikollu biss il-valur ta '1 jew vojt (jiġifieri fruntiera = ""). Jekk trid tibdel il-wisa 'tal-fruntiera, għandek tuża l-proprjetà tas-CSS tal-wisa' tal-fruntiera.
Ara hawn taħt biex titgħallem dwar l-attributi validi tal-mejda HTML5.
Hemm ukoll bosta attributi li huma parti mill-ispeċifikazzjoni tal-HTML 4.01 li m'għadhiex fis-seħħ fl-HTML5:
- -Użu l-proprjetà tal-ikkuttunar tas-CSS fuq l-elementi TD u TH tat-tabella.
- -Uża l-ispazju bejn il-fruntieri tal-proprjetà CSS fuq il-mejda.
- -Użu l-istili CSS tal-kulur tal-fruntiera: iswed; u stil tal-fruntiera fuq il-mejda.
- -Użu l-istili CSS tal-kulur tal-fruntiera: iswed; u stil tal-fruntiera fuq l-elementi xierqa tat-tabella.
- -Il-minflok, għandek tiddeskrivi l-istruttura tat-tabella f'KAPRIŻA jew ipoġġi t-tabella sħiħa f'Figura u tiddeskriviha f'FICCTION. Alternattivament, tista 'tissimplifika l-istruttura tat-tabella sabiex l-ebda spjegazzjoni ma tkun meħtieġa.
- -Użu l-proprjetà tal-wisa 'tas-CSS.
U attribut wieħed li kien deprezzat f'HTML 4.01 u huwa wkoll skadut f'HTML5.
Tgħallem aktar dwar l-Attributi HTML 4.01 TABLE.
- allinjament - Uża l-proprjetà tal-marġni tas-CSS minflok.
Hemm ukoll diversi attributi li mhumiex parti minn xi speċifikazzjoni HTML.
Uża dawn l-attributi jekk taf li l-browsers li inti tappoġġja jistgħu jimmaniġġjawhom u ma tħobbx HTML validu.
- - Uża l-isfond tal-kulur tal-isfond tas-CSS minflok.
- bordercolor-Uża l-proprjetà CSS tal-kulur tal-fruntiera minflok.
- bordercolorlight-Uża l-proprjetà tas-CSS tal-kulur tal-fruntiera minflok.
- bordercolordark-Uża l-proprjetà tas-CSS tal-kulur tal-fruntiera minflok.
- cols-M'hemm l-ebda alternattiva għal dan l-attribut.
- għoli - Uża l-għoli tal-proprjetà CSS minflok.
- -Użu minflok il-marġni tal-proprjetà tas-CSS.
- -Użu minflok il-marġni tal-proprjetà tas-CSS.
- - Uża l-ispazju abjad tal-proprjetà tas-CSS minflok.
- -Użu l-proprjetà CSS vertikali-allinjament minflok.
Tgħallem aktar dwar l-Attributi TABELLA Speċifiċi tal-Browser.
Attributi tal-Element HTML5 TABLE
Kif imsemmi hawn fuq, hemm attribut wieħed biss, lil hinn mill-attributi globali, li huwa validu fuq element HTML5 TABLE: fruntiera.
L-attribut tal-fruntiera jintuża biex jiddefinixxi l-fruntiera madwar it-tabella kollha u ċ-ċelloli kollha fih. Kien hemm xi mistoqsija dwar jekk tkunx inkluża fl-ispeċifikazzjoni tal-HTML5, iżda baqgħet minħabba li pprovdiet informazzjoni dwar l-istruttura tal-mejda, lil hinn minn sempliċement implikazzjonijiet ta 'stil.
Biex iżżid l-attribut tal-fruntiera, issettja l-valur għal 1 jekk hemm fruntiera u vojta (jew ħalli barra l-attribut) jekk ma jkunx hemm. Il-biċċa l-kbira tal-browsers ser jappoġġaw ukoll 0 għall-ebda fruntiera, u kwalunkwe valur sħiħ ieħor (2, 3, 30, 500, eċċ) jiddikjaraw il-wisa 'tal-fruntiera f'pilloli, iżda dan huwa skadut f'HTML5. Minflok, għandek tuża proprjetajiet tal-istil tal-fruntiera CSS biex tiddefinixxi l- wisa ' tal-fruntiera u stili oħra.
Biex tinħoloq tabella bi fruntiera, ikteb:
fruntiera = "1" >
Din hija tabella bi fruntiera
Hemm attributi HTML 4.01 li huma skaduti f'HTML5. Jekk qed tippjana li tikteb dokumenti HTML 4.01, tista 'titgħallemhom, inkella tista' tinjorahom. Ħafna minn dawn l-attributi għandhom alternattivi, deskritti hawn fuq.
Aħna niddeskrivu l-attributi tal-element li huma validi f'HTML5 (u HTML 4.01). Dan jiddeskrivi l-attributi TABLE li huma validi f'HTML 4.01, iżda huma skaduti f'HTML5. Jekk xorta tibqa 'tikteb id-dokumenti HTML 4.01, tista' tuża dawn l-attributi, iżda ħafna minnhom għandhom alternattivi li jagħmlu l-paġni tiegħek aktar probabbli fil-ġejjieni meta timxi lejn HTML5.
Valid HTML 4.01 Attributi
L-attribut li deskritt hawn fuq.
L-unika differenza f'HTML 4.01 minn HTML5 hija li inti tista 'tispeċifika xi numru sħiħ sħiħ (0, 1, 2, 15, 20, 200, eċċ) biex jiddefinixxi l-wisa' tal-fruntiera f'pilloli.
Biex tibni tabella b'bordura ta '5px, ikteb:
fruntiera = "5" >
Din it-tabella għandha 5px fruntiera.
Ara eżempju ta 'żewġ tabelli mal-fruntieri.
L-attribut jiddefinixxi l-ammont ta 'spazju bejn il-fruntieri taċ-ċelluli u l-kontenut taċ-ċellula. In-nuqqas huwa ta 'żewġ pixels. Issettja l-cellpadding sa 0 jekk ma tridx spazju bejn il-kontenut u l-fruntieri.
Biex issettja l-ikkuttunar taċ-ċellula sa 20, ikteb:
cellpadding = "20" >
Din it-tabella għandha cellpadding ta '20.
Il-fruntieri taċ-ċelluli se jiġu separati b'20 pixels.
Ara eżempju ta 'tabella biċ-ċellola
L-attribut jiddefinixxi l-ammont ta 'spazju bejn iċ-ċelloli tal-mejda u l-kontenut taċ-ċellula. Bħal cellpadding, l-inadempjenza hija ssettjata għal żewġ pixels, għalhekk għandek issettjaha f'0 jekk trid l-ebda spazjar taċ-ċelluli.
Biex iżżid l-ispazjar taċ-ċelluli f'tabella, ikteb:
cellspacing = "20" >
Din it-tabella għandha spazju ta 'ċelloli ta' 20.
Iċ-Ċelloli se jkunu separati b'20 pixels.
Ara tabella bi spazju ta 'ċelloli
L-attribut jidentifika liema porzjonijiet tal-fruntiera madwar in-naħa ta 'barra ta' tabella se jkunu viżibbli. Tista 'tibni t-tabella fuq l-erba' naħat, fuq naħa waħda, fuq u fuq isfel, fuq ix-xellug u fuq il-lemin, jew xejn.
Hawn hu l-HTML għal tabella biss mal-fruntiera tal-ġenb tax-xellug:
frame = "lhs" >
Din it-tabella
se jkollu
biss
in-naħa tax-xellug inkwadrata.
U eżempju ieħor bil-qafas tal-qiegħ:
qafas = "taħt" >
Din it-tabella għandha qafas fuq il-qiegħ.
Iċċekkja xi tabelli b'marki
L-attribut huwa simili għall-attribut tal-qafas, jaffettwa biss il-fruntieri madwar iċ-ċelloli tat-tabella. Tista 'tistabbilixxi regoli fuq iċ-ċelloli kollha, bejn il-kolonni, bejn gruppi bħal TBODY u TFOOT jew xejn.
Biex tibni tabella bil-linji biss bejn ir-ringieli, ikteb:
regoli = "ringieli" >
Din it-tabella 4x4 għandha
ir-ringieli mhux il-kolonni
deskritt bil-kliem
attribut tar-regoli.
U ieħor b'linji bejn il-kolonni:
rules = "cols" >
Dan huwa
tabella
fejn il-
kolonni
huma
enfasizzat
Hawn hu eżempju ta 'tabella aa b'regoli
L-attribut jipprovdi informazzjoni dwar it-tabella għall-qarrejja tal-iskrin u aġenti oħra tal-utenti li jista 'jkollhom problemi biex jaqraw it-tabelli. Biex tuża l-attribut sommarju, tikteb deskrizzjoni qasira tat-tabella u poġġiha bħala l-valur tal-attribut. Is-sommarju mhux se juri fuq il-paġna web fil-biċċa l-kbira tal-web browsers standard.
Hawnhekk tista 'tikteb tabella sempliċi b'sommarju:
summary = "Din hija tabella tal-kampjun li fiha informazzjoni dwar il-mili. L-iskop ta 'din it-tabella huwa li juri sommarju." >
kolonna 1 ringiela 1
kolonna 2 ringiela 1
kolonna 1 ringiela 2
kolonna 2 ringiela 2
Ara tabella b'sommarju
L-attribut jiddefinixxi l-wisa 'tat-tabella jew fil-pixels jew bħala perċentwali tal-element tal-kontenitur. Jekk il-wisa 'ma tkunx issettjata, it-tabella se tieħu biss kemm spazju kif teħtieġ biex turi l-kontenut, b'wisa' massimu l-istess bħall-wisa 'tal-element ġenitur.
Biex tibni tabella b'wisa 'speċifika f'pilloli, ikteb:
wisa '= "300" >
Din it-tabella hi ta '80% tal-wisa' tal-kontenitur li fiha.
U biex tibni tabella b'wisa 'li hija persentaġġ tal-element ġenitur, ikteb:
< wisa 'tal- mejda = "80%" >
Din it-tabella hi ta '80% tal-wisa' tal-kontenitur li fiha.
Ara eżempju ta 'tabella b'wisa'
Indikata HTML 4.01 TABELLA Attribut
Hemm attribut wieħed tal-element TABLE li huwa deprezzat f'HTML 4.01 u skadut f'HTML5: allinja . Dan l-attribut ihallik issettja fejn it-tabella għandha tkun tinsab fuq il-paġna relattiva mat-test li qiegħed ħdejnha. Dan l-attribut ġie depravat f'HTML 4.01, u għandek tevita li tużaha. Minflok, għandek tuża l-proprjetà CSS jew il-marġni-xellug: auto; u l-marġni tad-dritt: auto; stili. Il-proprjetà float tagħtik riżultat li huwa eqreb lejn dak li jagħti l-attribut tal-allinjament, iżda jista 'jaffettwa l-mod kif juru l-bqija tal-kontenut tal-paġna. Id-dritt tal-marġini: auto; u l-marġni tax-xellug: auto; huma dak li l-W3C jirrakkomanda bħala alternattiva.
Hawn hu eżempju skadut bl-użu tal-attribut tal-allinjament:
align = "right" >
Din it-tabella hija allinjata d-dritt
Test jiċċaqlaq madwaru fuq ix-xellug
Ara eżempju skadut bl-użu tal-attribut tal-allinjament.
U biex tikseb l-istess effett ma 'HTML validu (mhux deprezzat), ikteb:
style = "float: right;" >
Din it-tabella hija allinjata d-dritt
Test jiċċaqlaq madwaru fuq ix-xellug
Dan li ġej jispjega l-attributi TABLE li mhumiex parti minn xi speċifikazzjoni HTML.
L-informazzjoni ta 'qabel tiddeskrivi l-attributi tal-element HTML li huma validi f'HTML 4.01 iżda huma skaduti f'HTML5.
Dan li ġej jiddeskrivi l-attributi TABLE li mhumiex validi f'xi speċifikazzjoni kurrenti. Jekk ma jimpurtax jekk il-paġni tiegħek jivvalidawx u l-utenti tiegħek jużaw il-browser li jappoġġja dawn l-elementi, allura tista 'tuża dawn l-elementi. Iżda l-biċċa l-kbira minnhom huma jew mhumiex sostnuti fil-browsers moderni jew għandhom alternattivi li huma aktar konformi mal-istandards.
Aħna ma nirrakkomandawx li tuża dawn l-attributi fuq it-tabelli HTML tiegħek.
L-attribut huwa attribut antik li ġie inkluż qabel is-CSS kien appoġġat ħafna. Jippermetti li tibdel il-kulur ta 'l-isfond tat-tabella. Tista 'tissettja isem tal-kulur jew kodiċi hexadecimali. Dan l-attribut għadu jaħdem f'ħafna browsers, iżda għall-HTML li għad irid jiġi ppruvat, m'għandekx tużah, u minflok tuża CSS.
L-alternattiva aħjar għal dan l-attribut hija l-proprjetà stil.
Biex tibdel il-kulur fl-isfond ta 'tabella, ikteb:
style = "background-color: #ccc;" >
Din it-tabella għandha sfond griż
Simili għall-attribut bgcolor, l-attribut bordervolor ihallik ibiddel il-kulur tal-attribut. Dan l-attribut huwa appoġġjat biss mill-Internet Explorer. Minflok, għandek tuża l-proprjetà tal-istil tal-fruntiera.
Biex tibdel il-kulur tal-bord tal-mejda tiegħek, ikteb:
style = "border-color: aħmar;" >
Din it-tabella għandha fruntiera ħamra.
L-attributi borderkolorlight u bordercolordark ġew inklużi fl-Internet Explorer biex jippermettu li toħloq il-fruntiera 3D madwar il-mejda tiegħek. Madankollu, minn IE8 u sa, dan huwa sostnut biss f'IE7 Standards Mode u Quirks Mode . Microsoft tiddikjara li dawn il-proprjetajiet m'għadhomx appoġġjati.
Għal żmien qasir, il-cols attribwiti fuq l-element TABLE ġie propost biex jgħin lill-browsers jafu kemm kolonni kellhom tabella. Il-premessa kienet li dan jgħin biex iħaffef l-għoti ta 'tabelli kbar. Madankollu kien implimentat biss mill-Internet Explorer, u minn IE8 u sa 'l fuq, dan huwa appoġġjat biss f'IE7 Standards Mode u Quirks Mode.
Minħabba li hemm attribut wisa '(skadut f'HTML5) ħafna nies jassumu li kien hemm attribut għoli għat-tabelli wkoll. Imma minħabba li t-tabelli jikkonformaw mal-wisa 'tal-kontenut tagħhom jew il-wisa' definita fil-CSS jew l-attribwit wisa ', l-għoli ma setax jiġi kostrett. Allura minflok, il-browsers ippermettew l-attribut tal-għoli biex jiddefinixxu l-għoli minimu tat-tabella. Jekk it-tabella kienet taller minn dak l-għoli, hija tkun tidher aktar tall. Imma għandek tuża l-proprjetà
Bil-proprjetà ta 'għoli CSS tista' tirrestrinġi l-għoli jekk tuża l-proprjetà CSS kif ukoll biex tiddefinixxi x'jiġri b'kull kontenut eċċessiv.
Biex tistabbilixxi l-għoli minimu fuq tabella, ikteb:
style = "għoli: 30em;" >
Din it-tabella hija mill-inqas 30 EMS għolja.
Iż-żewġ attributi u l-ispazju miżjud fuq in-naħat tax-xellug / tal-lemin (hspace) u fuq / qiegħ (vspace) tat-tabella. Għandek tuża l-proprjetà stil minflok.
Biex issettja l-ispazju vertikali għal 20 pixels u l-ispazju orizzontali għal 40 pixels, ikteb:
stil = "marġini: 20px 40px;"
Din it-tabella għandha vspace ta '20 pixel u hspace ta' 40 pixels.
L-attribut huwa attribut boolean li jiddefinixxi jekk il-kontenut tat-tabella għandux jintlibes fit-tarf tal-element prinċipali jew tieqa jew imexxi l-iscrollling orizzontali. Minflok, għandek tiddefinixxi l-karatteristiċi tat-tgeżwir ta 'kull ċellola tal-mejda billi tuża l-proprjetà CSS.
Biex tagħmel kolonna bi lott ta 'test li ma tinkludix, ikteb:
style = "white-space: nowrap;" > Din hija kolonna b'tunnellata ta 'kontenut. Iżda anke jekk tkun usa 'mill-kontenitur it-test m'għandux jaqbad mal-linja li jmiss, iżda minflok iġiegħel it-tieqa tal-browser biex tiskrollja orizzontalment biex tara l-kontenut kollu.
Finalment, l-attribut jiddefinixxi kif il-kontenut ta 'kull ċellula għandu jallinja vertikalment fiċ-ċellola. Minflok dan l-attribut invalidu, għandek tuża l-proprjetà CSS fuq kull ċellula li trid tibdel l-allinjament ta '. M'għandekx tinnota l-effetti ta 'dan l-istil sakemm il-kontenut taċ-ċellola huwa inqas mill-ispazju disponibbli maħluq minn ċelloli oħra akbar.
Biex seħħ ċellola biex tallinja mal-qiegħ (minflok in-nofs, bħala l-inadempjenza), ikteb:
Din iċ-ċellula hija itwal mill-bqija u għalhekk se ġġiegħel l-għoli jkun aktar għoli. Allura se tara li ċ-ċellola allinjata vertikalment hija allinjata mal-qiegħ.
style = "vertikali-allinjament: il-qiegħ;" > Werrej fil-qiegħ.
Kontenut fin-nofs.