HTML5 Hap Pas Hapi: Vijat dhe tabelat

Autor: Skender Mustafi

Ndër elementet bazë dhe herë pas here shumë të rëndësishme janë vijat dhe tabelat. Në këtë mësim do të shohim karakteristikat, elementet dhe parametrat  e tabelave që mbajnë etiketën <table></table> dhe vijave horizontale që mbajnë etiketën <hr>.

Vija horizontale është etiketë një-anëse dhe shtrohet një herë me një të vendosur të kodit. Manipulimi me vijën horizontale mund të bëhet përmes përcaktimit të parametrave sipas nevojës. Parametrat tek vija mund të vendosen në mënyrë të kombinuar sikur tek çdo etiketë tjetër. Parametrat bazë të vijës janë si size, color, align dhe noshade nuk mbështeten më nga HTML5, përkundrazi, tani mund të bëhen kombinime të ndryshme bazuar në atributin “kufi” në anglisht border.

Pamja e vijë do të mund të rregullohet përmes përdorimit të CSS atributeve, shembull: 

• <hr style=”border: 1px dotted blue; width: 70%;  margin:35px;”>

Atributet e rëndësishme të cilat mund t’i vishen vijës janë:

• border – që paraqet kufijtë e vijës e që në realitet në HTML5 ky është atributi kryesorë për të shtuar karakteristikat tjera, Shembull: border: 1px dotted blue; ku 1px paraqet trashësinë e vijës, dotted dekorimin e vijës dhe blue ngjyrën e vijës, të gjitha këto parametra mund të ndryshohen  sipas dëshirës brenda mundësive që ofron HTML.
• width – paraqet gjatësinë e vijës që duhet caktuar në përqindje: width: 30%;
• margin – rregullon pozitën e vijës dhe përmbajtjeve rrethuese të sajë.
  • margin: 20px; – nënkupton që vija ka hapësirë të lirë rrethuese në të gjitha anët në vlerë prej 20px.
  • margin-left: 20px; – nënkupton që vija tërhiqet në të majtë duke lënë nga e majta hapësirë prej 20px.
  • margin-right: 20px; – nënkupton që vija tërhiqet në të djathtë dhe lë hapësirë prej 20px nga ana e djathtë.
    Vini Re: nëse kombinohen margin-left dhe margin-right, atëherë vija tërhiqet në të majtë dhe injoron atë të djathtën.
  • margin-top: 20px; dhe margin-bottom: 20px; – i krijon vijës hapësirë sipër, konkretisht poshtë për nga 20px.
• Ekzistojnë dhe atribute tjera të cilat kombinohen me elemente tjera në skript ose kode tjera të cilat mund të i bashkëngjiten vijës. Për më shumë mund t’i vizitoni nyjet: HR Global Attributes dhe HR Event Attributes, materiale në anglisht.

Tabelat janë shfrytëzuar nga shumë ueb programues si bazë për të përpiluar shabllonin e faqes, por kjo nuk është praktikë e mirë, janë etiketat tjera të cilat duhet shfrytëzuar për përpilimin e shabllonit të faqes. Tabelat janë vetëm për paraqitjen e materialeve në mënyrë tabelore.

Paraqitja e një tabele të thjeshtë me tri kolona e tre rreshta realizohet përmes kodit të mëposhtëm:

Në realitet këto tipare janë edhe kryesoret të një tabele:

• <table></table> – përcakton krnizat e tabelës. Nga atributet kryesore që tabela merr është border që cakton kufijtë e tabelës: <table border=”1″>. Atributet tjera të versioneve të kaluara nuk mbështeten nga HTML5, të gjitha karakteristikat e tabelës të rregulluara në versionet e mëparshme përmes atributeve të tabelës, siç është gjerësi, lartësia, ngjyra etj. rregullohen përmes përdorimit të CSS.
  
• <tr></tr> – bën ndarjen e tabelës në rreshta. Asnjë nga atributet e versioneve të kaluara të kësaj etikete nuk mbështetë HTML5. Tëgjitha këto tipare rregullohen përmes CSS dhe etiketës <col>.
• <td></td> – bën ndarjen e tabelës në kolona. Në HTML5 merr tri tipare:
  • colspan – përcakton numrin e kolonave ku qelia do të zgjerohet (nga e majta në të djathtë): colspan=”2″
  • rowspan – përcakton numrin e rreshtave ku qelia do të zgjerohet (nga lartë poshtë) : rowspan=”4″
  • headers – përcakton numrin e kokave me të cilat qelia është e ndërlidhur: headers=”emri”
• <th></th> – shfrytëzohet për të përcaktuar titujt e kolonave të tabelës.  Në HTML5 merr këto tipare:
  • colspan – përcakton numrin e kolonave në të cilat qelia e kokës do të shtrihet: colspan=”2″
  • rowspan – përcakton numrin numrin e rreshtave në të cilat qelia e kokës do të shtrihet: rowspan:”4″
  • headers – përcakton numrin e kokave me të cilat qelia është e lidhur: headers=”emri”
  • scope – përcakton nëse qelia e kokës është kokë për kolonë, rresht ose grup kolonash ose grup rreshtash: scope=”col”
• <caption></caption> – cakton titullin e tabelës. Pamja e këtij teksti mund të rregullohet përmes CSS.
• <colgroup></colgroup> dhe <col> shfrytëzohen së bashku për të rregulluar grupet e kolonave në tabelë. Asnjë nga atributet e mëparshme të <colgroup> nuk mbështetet nga HTML5. Për etiketën <col> mbështetet atributi span i cili përcakton numrin e kolonave të cilat <col> duhet t’ bashkojë: span=”3″
• <thead></thead>, <tbody></tbody> dhe <tfoot></tfoot> nuk kanë ndikim të drejtpërdrejtë në pamjen e tabelës, por që mund të rregullohen përmes CSS. Sidoqoftë, është praktikë e mirë që në tabela të mëdha të shfrytëzohen këto etiketa sepse e bëjnë më të lehtë njohjen e rolit të kolonave dhe rreshtave të tabelës. Duhet të theksohet që asnjë nga atributet e versioneve të kaluara për këto tri etiketa nuk mbështetet nga HTML5.

Vini Re: Tabela më e vogël e cila mund të programohet është: <table><tr><td>përmbajtja</td></tr></table>. Secili ndarës i rreshtave duhet patjetër të ketë dhe ndarës të kolonave që gjenden në brendi të tyre. Pra kodi i një tabele shkruhet sipas rregullit të mësipërm.

Shembull

Kodi i tabel së paraqitur më sipër në foto është: