Marrja maksimumin e tabelave HTML duke mësuar atributet e tabelave
Atributet e tabelës HTML ju japin një kontroll shumë më të madh mbi tabelat HTML. Ka shumë atribute në dispozicion për tavolinat për t'i bërë ato më interesante dhe për të ndryshuar pamjen e faqes suaj.
Elemente HTML Element TABLE
Në HTML5 elementi përdor atributet globale dhe një atribut tjetër:. Dhe ka ndryshuar vetëm që të ketë vlerën 1 ose bosh (p.sh. kufiri = ""). Nëse dëshironi të ndryshoni gjerësinë e kufirit, duhet të përdorni pronën CSS të gjerësisë së kufijve.
Shihni më poshtë për të mësuar rreth atributeve të tabelës HTML5 të vlefshme.
Ka gjithashtu disa atribute që janë pjesë e specifikimit të HTML 4.01 që është bërë i vjetëruar në HTML5:
- - Përdorni pronën e mbushjes CSS në elementët TD dhe TH të tryezës.
- - Përdorni hapësirën e kufijve të pronës CSS në tryezë.
- -Të përdorin stilet e CSS-it ngjyrë të kuqe: e zezë; dhe stil kufiri në tryezë.
- -Të përdorin stilet e CSS -it ngjyrë të kuqe: e zezë; dhe stili kufitar në elementet e përshtatshme të tabelës.
- -Përveç kësaj, duhet ta përshkruani strukturën e tabelës në një CAPTION ose ta vendosni tabelën në një figurë dhe ta përshkruani atë në një SHKRIM. Nga ana tjetër, ju mund të thjeshtoni strukturën e tabelës në mënyrë që të mos kërkohet shpjegim.
- -Përdorni pronën e gjerësisë CSS.
Dhe një atribut i cili ishte deprecated në HTML 4.01 dhe gjithashtu është i vjetëruar në HTML5.
Mësoni më shumë për atributet HTML 4.01 TABLE.
- align - Përdorni vendndodhjen e marzhës CSS në vend.
Ka edhe disa atribute që nuk janë pjesë e ndonjë specifikimi të HTML.
Përdorni këto atribute nëse e dini që shfletuesit që mbështetni mund t'i trajtojnë ato dhe nuk ju intereson HTML-në e vlefshme.
- -Përdorni vendndodhjen e sfondit të pronës CSS.
- bordercolor -Përdorni vendndodhjen e kufirit të pronës CSS.
- bordercolorlight - Përdorni në vend ngjyrën e kufijve të pronës CSS.
- bordercolordark -Përdorni vendndodhjen e kufirit të pronës CSS.
- cols-Nuk ka asnjë alternativë për këtë atribut.
- lartësi - Përdorni lartësinë e pronës CSS në vend.
- - Përdorni margjinën e pronës CSS në vend.
- - Përdorni margjinën e pronës CSS në vend.
- -Përdorni vendndodhjen e hapësirës së bardhë të CSS-së.
- -Të përdorësh vertikalin-CSS vertikale-align në vend.
Mësoni më shumë për atributet specifike të TABELËS së Shfletuesit.
HTML5 TABLE Element Attributes
Siç kemi përmendur më lart, ekziston vetëm një atribut, përtej atributeve globale, që është e vlefshme në një element HTML5 TABLE: border.
Atributi i kufirit përdoret për të përcaktuar një kufi rreth gjithë tabelës dhe të gjitha qelizat brenda saj. Kishte një pyetje se a do të përfshihej në specifikimin HTML5, por mbeti sepse ai ofroi informata për strukturën e tabelave, përtej implikimeve të stilit.
Për të shtuar cilësinë e kufijve, vendosni vlerën në 1 nëse ka një kufi dhe bosh (ose lë jashtë atributit) nëse nuk ekziston. Shumica e shfletuesve gjithashtu do të mbështesin 0 për asnjë kufi, dhe çdo vlerë tjetër të plotë (2, 3, 30, 500, etj) për të deklaruar gjerësinë e kufirit në pixels, por kjo është e vjetëruar në HTML5. Në vend të kësaj, ju duhet të përdorni pronat e stilit të kufijve CSS për të përcaktuar gjerësinë e kufijve dhe stilet e tjera.
Për të krijuar një tabelë me një kufi, shkruani:
border = "1" >
Kjo është një tabelë me një kufi
Ka HTML 4.01 atributet që janë të vjetruara në HTML5. Nëse planifikoni të shkruani dokumentet HTML 4.01, ju mund t'i mësoni ato, përndryshe ju mund t'i injoroni ato. Shumica e këtyre atributeve kanë alternativa, të përshkruara më lart.
Ne përshkruajmë atributet e elementit që janë të vlefshëm në HTML5 (dhe HTML 4.01). Kjo përshkruan atributet TABLE që janë të vlefshme në HTML 4.01, por janë të vjetëruara në HTML5. Nëse ende shkruani dokumentet HTML 4.01, mund t'i përdorni këto atribute, por shumica prej tyre kanë alternativa që do t'i bëjnë faqet tuaja më të sigurta për të ardhmen kur kaloni në HTML5.
Atributet e Valid HTML 4.01
Atributi i përshkruar më sipër.
Ndryshimi i vetëm në HTML 4.01 nga HTML5 është se ju mund të specifikoni një numër të plotë të plotë (0, 1, 2, 15, 20, 200, etj) për të përcaktuar gjerësinë e kufirit në piksele.
Për të ndërtuar një tabelë me një kufi 5px, shkruani:
border = "5" >
Kjo tabelë ka një kufi 5px.
Shihni një shembull të dy tabelave me kufij.
Atributi përcakton sasinë e hapësirës ndërmjet kufijve të qelizave dhe përmbajtjes së qelizës. Parazgjedhja është dy pixels. Vendosni qelizën në 0 nëse nuk dëshironi hapësirë midis përmbajtjes dhe kufijve.
Për të vendosur mbushjen qelizore në 20, shkruani:
cellpadding = "20" >
Kjo tabelë ka një mbushje qelizash prej 20.
Kufijtë e qelizave do të ndahen nga 20 pikselë.
Shikoni një shembull të një tabele me qelizore
Atributi përcakton sasinë e hapësirës midis qelizave të tabelës dhe përmbajtjes së qelizës. Ashtu si shtrimi i celularit, parazgjedhja është caktuar në dy piksele, kështu që duhet ta vendosni në 0 nëse nuk dëshironi ndarje të qelizave.
Për të shtuar hapësirën qelizore në një tabelë, shkruani:
cellspacing = "20" >
Kjo tabelë ka një numër qelizash prej 20.
Qelizat do të ndahen me 20 pikselë.
Shihni një tabelë me cellapacing
Atributi identifikon se cilat pjesë të kufirit që rrethojnë jashtë tabelës do të jenë të dukshme. Ju mund të krijoni tabelën tuaj në të katër anët, nga njëra anë, nga lart dhe poshtë, nga e majta dhe nga e djathta, ose nga asnjë.
Këtu është HTML për një tabelë me vetëm kufirin e majtë:
frame = "lhs" >
Kjo tabelë
do të ketë
vetëm
anën e majtë të përshtatur.
Dhe një shembull tjetër me kornizën e poshtme:
frame = "më poshtë" >
Kjo tabelë ka një kornizë në fund.
Shikoni disa tabela me korniza
Atributi është i ngjashëm me atributin e kornizës, vetëm ajo ndikon në kufijtë rreth qelizave të tabelës. Ju mund të vendosni rregulla në të gjitha qelizat, midis kolonave, midis grupeve si TBODY dhe TFOOT ose asnjë.
Për të ndërtuar një tabelë me linja vetëm mes rreshtave, shkruani:
rules = "rreshta" >
Kjo tabelë 4x4 ka
rreshtat jo kolona
përvijuar me
atributrregulla.
Dhe një tjetër me vija midis kolonave:
rules = "cols" >
Kjo është
një tryezë
ku
kolona
janë
e theksuar
Këtu është një shembull i tabelës aa me rregullat
Atributi jep informacion në lidhje me tabelën për lexuesit e ekranit dhe agjentët e tjerë të përdoruesit që mund të kenë probleme në leximin e tabelave. Për të përdorur atributin përmbledhës, shkruani një përshkrim të shkurtër të tabelës dhe vendoseni atë si vlerë të atributit. Përmbledhja nuk do të shfaqet në faqen e internetit në shumicën e shfletuesve të standardeve.
Këtu është se si të shkruani një tabelë të thjeshtë me një përmbledhje:
summary = "Kjo është një tabelë e mostrës që përmban informacione fillestare. Qëllimi i kësaj tabele është të demonstrojë një përmbledhje." >
kolona 1 rresht 1
kolona 2 radhë 1
kolona 1 rresht 2
kolona 2 rreshti 2
Shikoni një tabelë me një përmbledhje
Atributi përcakton gjerësinë e tabelës në dy piksele ose si një përqindje e elementit të enës. Nëse gjerësia nuk është caktuar, tabela do të marrë vetëm sa hapësirë aq sa duhet për të shfaqur përmbajtjen, me një gjerësi maksimale të njëjtë me gjerësinë e elementit mëmë.
Për të ndërtuar një tabelë me një gjerësi specifike në pixels, shkruani:
width = "300" >
Kjo tabelë është 80% e gjerësisë së enës që është në.
Dhe për të ndërtuar një tabelë me një gjerësi që është një përqindje e elementit mëmë, shkruani:
width = "80%" >
Kjo tabelë është 80% e gjerësisë së enës që është në.
Shihni një shembull të një tabele me gjerësi
Deprecated HTML 4.01 TABLE Atribut
Ekziston një atribut i elementit të TABELIT që depërtohet në HTML 4.01 dhe është i vjetëruar në HTML5: align . Ky atribut ju lejon të vendosni ku tabela duhet të jetë e vendosur në faqen në lidhje me tekstin që është pranë tij. Ky atribut është skaduar në HTML 4.01, dhe duhet të shmangni përdorimin e tij. Në vend të kësaj, ju duhet të përdorni pronën CSS ose margin-left: auto; dhe kufiri i djathtë: auto; stilet. Pronësia e notave ju jep një rezultat që është më afër se çfarë ofron atributi i shtrirjes, por kjo mund të ndikojë në mënyrën se si shfaqet pjesa tjetër e përmbajtjes së faqes. E drejta e kufirit: auto; dhe margin-left: auto; janë ato që W3C rekomandon si një alternativë.
Këtu është një shembull i pariparueshëm duke përdorur atributin align:
align = "right" >
Kjo tabelë është e drejtë e përafruar
Teksti rrjedh rreth tij në të majtë
Shihni një shembull të vjetëruar duke përdorur atributin e shtrirjes.
Dhe për të marrë të njëjtin efekt me HTML të vlefshëm (jo të vjetëruar), shkruani:
style = "float: right;" >
Kjo tabelë është e drejtë e përafruar
Teksti rrjedh rreth tij në të majtë
Në vijim shpjegon atributet TABLE që nuk janë pjesë e ndonjë specifikimi HTML.
Informacioni i mëparshëm përshkruan atributet e elementit HTML që janë të vlefshme në HTML 4.01, por janë të vjetëruara në HTML5.
Në vijim përshkruhen atributet TABLE që nuk janë të vlefshme në ndonjë specifikim aktual. Nëse nuk intereson nëse faqet e tua vërtetohen dhe përdoruesit përdorin një shfletues që mbështet këto elemente, atëherë mund t'i përdorni këto elemente. Por shumica e tyre ose nuk mbështeten në shfletuesit modernë ose kanë alternativa që janë më të pajtueshme me standardet.
Ne nuk e rekomandojmë përdorimin e këtyre atributeve në tavolinën tuaj HTML.
Atributi është një atribut i vjetër që u përfshi përpara se CSS të mbështetej gjerësisht. Kjo ju lejon të ndryshoni ngjyrën e sfondit të tabelës. Mund të caktoni një emër ngjyra ose një kod heksadecimal. Ky atribut ende punon në shumë shfletues, por për HTML-të të mbrojtura në të ardhmen, nuk duhet ta përdorni dhe përdorni CSS në vend të kësaj.
Alternativa më e mirë për këtë atribut është pronë e stilit.
Për të ndryshuar ngjyrën e sfondit të tabelës, shkruani:
style = "background-color: #ccc;" >
Kjo tabelë ka një sfond gri
Ngjashëm me atributin bgcolor, atributi bordercolor ju lejon të ndryshoni ngjyrën e atributit. Ky atribut mbështetet vetëm nga Internet Explorer. Në vend të kësaj, duhet të përdorni pronën e stilit të ngjyrave të kufirit.
Për të ndryshuar ngjyrën e kufirit të tryezës tuaj shkruani:
style = "border-color: red;" >
Kjo tabelë ka një kufi të kuq.
Atributet e ngjyrave të kufirit të dritës dhe të kufijve u përfshinë në Internet Explorer për t'ju lejuar të krijoni një kufi 3D rreth tabelës suaj. Megjithatë, që nga IE8 dhe lart, kjo mbështetet vetëm në Modalitetet e Standardeve IE7 dhe Quirks Mode . Microsoft deklaron se këto prona nuk mbështeten më.
Për një kohë të shkurtër, atributi i cols në elementin TABLE u propozua për të ndihmuar shfletuesit të dinë se sa kolona kishte një tabelë. Premisa ishte se kjo do të ndihmonte në përshpejtimin e dhënies së tabelave të mëdha. Sidoqoftë, është zbatuar vetëm nga Internet Explorer, dhe nga IE8 dhe lart, kjo mbështetet vetëm në modalitetin e standardeve IE7 dhe modalitetin Quirks.
Për shkak se ekziston një atribut i gjerësisë (i vjetëruar në HTML5), shumë njerëz mendonin se kishte edhe një atribut të lartësisë për tavolinat. Por, për shkak se tabelat përputhen me gjerësinë e përmbajtjes së tyre ose gjerësinë e përcaktuar në atributin CSS ose gjerësi, lartësia nuk mund të kufizohej. Pra, në vend të kësaj, shfletuesit lejuan atributin e lartësisë të përcaktojnë lartësinë minimale të tabelës. Nëse tabela ishte më lart se ajo lartësi, do të shfaqte më lart. Por ju duhet të përdorni pronën
Me cilësinë e lartësisë CSS ju mund të kufizoni lartësinë nëse përdorni edhe pronën CSS si dhe për të përcaktuar se çfarë ndodh me çdo përmbajtje të tepërt.
Për të vendosur lartësinë minimale në një tavolinë, shkruani:
style = "height: 30em;" >
Kjo tabelë është të paktën 30 ems të lartë.
Të dy atributet dhe hapësirë shtuar rreth anët e majtë / djathtas (hspace) dhe lart / poshtë (vspace) të tabelës. Ju duhet të përdorni pronën e stilit në vend.
Për të vendosur hapësirën vertikale në 20 piksele dhe hapësirën horizontale deri në 40 piksel, shkruani:
style = "margin: 20px 40px;"
Kjo tabelë ka një hapësirë prej 20 pixels dhe një hspace prej 40 pixels.
Atributi është një atribut boolean që përcakton nëse përmbajtja e tabelës duhet të përfundojë në buzë të elementit ose dritares mëmë ose të detyrojë scrolling horizontale. Në vend të kësaj, duhet të përcaktoni karakteristikat e mbështjelljes së çdo qelize të tabelës duke përdorur pronën CSS.
Për të bërë një kolonë me një shumë të tekstit nuk përfundon, shkruani:
style = "hapësirë e bardhë: nowrap;" > Kjo është një kolonë me një ton përmbajtjeje. Por, edhe nëse është më e gjerë sesa kontenieri, teksti nuk duhet të përfundojë në vijën tjetër, por në vend të kësaj e detyron dritaren e shfletuesit të lëvizë horizontalisht për të parë të gjithë përmbajtjen.
Së fundi, atributi përcakton se si përmbajtja e çdo qelize duhet të shtrihet vertikalisht brenda qelizës. Në vend të kësaj atributi të pavlefshëm, duhet të përdorni pronën CSS në secilën qelizë që dëshironi të ndryshoni shtrirjen e. Ju nuk do të vëreni efektet e këtij stili nëse përmbajtja e qelizës nuk është më e vogël se hapësira në dispozicion e krijuar nga qeliza të tjera më të mëdha.
Për të detyruar një qelizë për t'u lidhur në pjesën e poshtme (në vend të mesit, si parazgjedhje), shkruani:
Kjo qelizë është më e gjatë se pjesa tjetër dhe kështu do të detyrojë lartësinë të jetë më lart. Kështu do të shihni se qeliza vertikalisht e përafruar është në linjë me fundin.
style = "vertikale-align: fund;" > Përmbajtja në fund.
Përmbajtja në mes.