Tabelat PDF

Universiteti
Aleksandër Moisiu Durrës
Fakulteti i Teknologjisë së Informacionit
Lënda: Programim Web 1
Tema: Tabelat
Pedagogu: Eda Tabaku

QELLIMI I LEKSIONIT
• Studentët duhet të kuptojnë konceptin e tabelave si edhe

informacionin që mund të përmbaj një tabelë.
• Studentët duhet të jenë të aftë të ndërtojnë tabelat duke përdorur

tag et dhe atributet bazë.
Përmbajta leksionit
• Njohja, Ndertimi dhe Sturukturat e Tabelave ne HTML
• ne HTML
• Taget e ndryshme që percaktohet nje tabelë në HTML.
• Atributet që shoqërojnë taget përcaktuese të tabelave në

HTML.
• Shembuj
• Detyra
Cfarë janë tabelat në Html
• Tabelat sherbejne si nje menyre per te paraqitur

te dhenat / materialet si kompozim rrjeshtash dhe
shtyllash.
• Tabelat janë shfrytëzuar nga shumë programues
web si bazë për të përpiluar shabllonin e faqes, por
kjo nuk është praktikë e mirë, ka elementë të tjerë
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.
Si ndërtohet një tabelë në HTML
• Tabelat ndërtohen duke përdorur tagun
kryesor < table > .
• Tabelat përbëhen nga rreshta të cilët
ndërtohen me tagun <tr>.
• Rreshtat e tabelave ndahen në qeliza të cilët
shkruhen me tagun < td > nga gjuha angleze
(table data).Të dhënat e tabelave mund të jenë
tekst, imazhe, tabela të tjera, lista etj.
Struktura e Tabelës
<html>
<head>
<title>Këtu shkruhet titulli i dokumentit web</title>
</head>
<body>
<table>
<tr>
<td> Përmbajta e Qelizës </td>
</tr>
</table>
</body>
</html>
Shembull
<html>
<head>
<title>Këtu shkruhet titulli i
dokumentit web</title>
</head>
<body>
<table>
<tr>
<td>Qeliza 1</td>
<td>Qeliza 2 </td>
<td>Qeliza 3 </td>
</tr>
<tr>
<td>Qeliza 1</td>
<td>Qeliza 2 </td>
<td>Qeliza 3 </td>
</tr>
</table>
</body>
</html>
<table> …. </table>
• Sintaksa:
• <table> <tr> <td>…</td> </tr> </table>
• <table> … </table> Përdoret për të krijuar strukturën e një
tabele.
• <caption> … </caption> Përdoret për ti vendosur titull
tabelës.
• <tr> … </tr> Përdoret për të krijuar rrjeshtat
• <td> … </td> Përdoret për të krijuar qelizat e një tabele
• <th> … </th> Përdoret për ti dhënë titull kolonës së një
tabele.
Vetë tabela është një element që mund të përmbajë elementë të tjerë si
psh. Text, imazhe, linke etj.
Atributet që shoqërojnë tagun
<table>
Atributi Përshkrimi
Border Përcakton gjërësinë e kufirit rreth tabeles dhe jepet ne
pixel. Nese nuk përcaktohet madhesia e kufirit, tabela
do të shfaqej pa asnjë kufijë.
Align Përcakton drejtimin e tekstit në tabelë, perkatësisht:

majtas, djathtas, qëender.
Bgcolor Përcakton ngjyrën e sfondit të tabelës.

Bordercolor Përcakton ngjyrën e konturit të tabelës.
Cellpadding Përcakton hapsirën ndërmjet përmbajtjes dhe skajit të
qelizës. Madhesia jepet ne pixel
Cellspacing Përcakton hapsirën ndërmjet qelizave që është gjërësia

e kufirit të qelizës
<html>
<head>
Shembull
<title>Notat e Studenteve ne P.Web 1 </title>
<head>
<body>
<table border ="1" bordercolor="red" bgcolor = "blue"
cellpadding = "5" cellspacing = "10">
<caption> Notat e Studenteve ne P.Web 1
</caption>
<tr>
<th>Emer Mbiemer</th>
<th>Nota</th>
</tr>
<tr>
<td>Studenti 1</td>
<td>Nota 1</td>
</tr>
<tr>
<td>Studenti 2</td>
<td>Nota 2</td>
</tr>
<tr>
<td>Studenti 2</td>
<td>Nota 2</td>
</tr>
</table>
</body>
</html>
Tagu <tr> … </tr>
• Përdoret për të shtuar rrjeshtat në një tabelë.
• Nr i <tr> të përdorur në një tabelë përcakton nr e rrjeshtave të saj.
Disa nga Atributet që mund të shoqërojne tagun <tr>
Atributi Pershkrimi
align Përcakton drejtimin horizontal të përmbajtjes së qelizës

në të gjithë rrjeshtin. Ky drejtim mund të jetë: majtas,
djathtas, në qendër.
valign Përcakton drejtimin vertical të përmbajtjes së qelizës në

të gjithë rrjeshtin,Ky drejtim mund të jetë larte, në mes,
poshte.
bgcolor Përcakton ngjyrën e sfondit për rrjeshtin.

<html>
<head> Shembull
<title>Notat e Studenteve ne P.Web 1 </title>
<head>
<body>
<table border ="3" >
<caption> Notat e Studenteve ne P.Web 1
</caption>
<tr bgcolor = "red" align = "right" valign = "top">
<th>Emer Mbiemer</th>
<th>Nota</th>
</tr>
<tr bgcolor = "blue" align = "center" valign =
"bottom">
<td>Studenti 1</td>
<td>Nota 1</td>
</tr>
<tr bgcolor = "grën" align = "left" valign = "top">
<td>Studenti 2</td>
<td>Nota 2</td>
</tr>
<tr bgcolor = "yellow" align = "right" valign =
"center">
<td>Studenti 2</td>
<td>Nota 2</td>
</tr>
</table>
</body>
</html>
Tagu <th> … <th>
• Cdo tabelë përmban kokë për tu njohr me tipin e të dhenave. Qeliza që
përban koken quhet header.
• Disa nga Atributet që shoqerojnë headerin e tabeles janë:

Atributi Pershkrimi
Align Përcakton drejtimin horizontal të përmbajtjes së qelizës në të
gjithë rrjeshtin. Ky drejtim mund të jetë: majtas, djathtas, në
qendër.
Valign Përcakton drejtimin vertical të përmbajtjes së qelizës në të

gjithë rrjeshtin,Ky drejtim mund të jetë larte, në mes,
poshte.
Colspan Përcakton nr e kolonave që përfshihen në header.
Rowspan Përcakton numrin e rrjeshtave që përfshihen në header.

Shembull
<html>
<body>
<h2>Qelizat qe zgjerohen ne shume
kolona:</h2>
<table border = "2">
<tr>
<th colspan="3" aligin = "center">
Universiteti Aleksander Moisiu
Durres </th>
</tr>
<tr>
<td>Teknologji Informacioni</td>
<td>Sisteme Informacioni</td>
<td>Shkenca Kompjuterike</td>
</tr>
</table>
</body>
</html>
Tagu <td> … </td>
• Përdoret për të krijuar qelizat e një rrjeshti ne të njëjtëen kohë shtohet dhe
përmbajta e qelizës.
• Brenda një qelize mund të ruhet: text, image, link, foto etj.
• Disa nga Atributet qe mund te shoqerojne tagun td jane:

Atributi Përshkrimi
Align Përcakton drejtimin horizontal të
përmbajtjes së qelizës. Ky drejtim mund të
jetë: majtas, djathtas, në qendër.
Valign Përcakton drejtimin vertical të përmbajtjes
së qelizës Ky drejtim mund të jetë larte, në
mes, poshte.
Colspan Përcakton numerin e kolonave që përfshine
qeliza.
Rowspan Përcakton numrin e rrjeshtave që
përfshihin qeliza
Shembull
<html>
<head>
<title>Ushtrimi </title>
<head>
<body>
<table border="1">
<caption color = "yellow" > Tabele me permbajtje te Ndryshme </caption>
<tr>
<td width="50%">
<ul>
<li>Element Liste 1</li>
</ul>
</td>
<td align = "right">
<ol>
</ol>
</td>
</tr>
<tr>
<td>
<p>Ky eshte nje paragraf ne HTML...</p>
</td>
<td>
<a href="http://www.uamd.edu.al" target="_blank" >
<img src="uamd.jpg" width="200" height="200"/>
</a>
</td>
Seksionet e Tabelës
• Tabela mund të ndahet në seksione duke përdorur elementet e <thead>,
<tbody>, <tfoot>.
• <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.
Elementi Pershkrimi
<thead> … Element i përdorur për të identifikuar një ose disa
</thead> rrjeshta të një tabele që përmbajnë tituj e tabeles
<tbody> … Element i përdorur për të përcaktuar elementet të cilët

</tbody> përbejnë përmbajten e tabeles.
<tfoot> … Element i përdorur për të përcaktuar një ose disa <tr>

</tfoot> të cilat përmbejnë “përmbajtjen përmbledhëse” të
kolonave të tabelës.
Pozicioni ku është
vendosur cdo element
<table>
<caption>Titulli I Tabeles</caption>
<thead>
<tr>
<th>HeaderI I tabeles vendoset I pari</th>
</tr>
</thead>
<tfoot>
<tr>
<td>FooterI vendoset I dyti</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Trupi (Perrmbajta) e tabeles vendoset e fundit</td>
</tr>
</tbody>
</table>
Shembull
<html>
<body>
<table border="1" width="600">
<thead style="backgroundcolor: #80ffff">
<tr>
<th>Header cell</th>
</tr>
</thead>
<tfoot align="right" style="backgroundcolor: #c0c0c0">
<tr>
<td colspan="3">Footer cell</td>
</tr>
</tfoot>
<tbody align="center" style="backgroundcolor: #ffffff">
<tr>
<td>Row1 Col1</td>
<td>Row1 Col2</td>
<td>Row1 Col3</td>
</tr>
<tr>
<td>Row2 Col1</td>
<td>Row2 Col2</td>
<td>Row2 Col3</td>
</tr>
</tbody>
</table>
</body>
</html>
Grupimi i kolonave të tables
<col> dhe <colgroup>
• Tagu <col > nuk ka tag mbylles.
• Specifikon karakterisitkat e kolonave, për cdo kolone brenda elementit

<colgrup>.
• Eshtë një menyrëe e mire për tu aplikuar stil të njejtë në të gjithë

kolonat ne vënd që të përserisim ato për cdo qelizë të rrjeshtit.
• Tagu <colgroup> specifikon nje grup me nje apo disa kolona në një
tabele për formatim.
• Cdo <colgroup> është një “femijë” i një tagu <table> dhe ka si “femije”
tagun <col>.
Disa nga Atributet qe mund
të shoqërojne COLGROUP
Atributi Pershkrimi
Align Përcakton drejtimin horizontal të përmbajtjes së
qelizave të kolonave. Ky drejtim mund të jetë: majtas,
djathtas, në qendër.
Valign Përcakton drejtimin vertical të përmbajtjes së qelizave

të kolonave. Ky drejtim mund të jetë larte, në mes,
poshte.
width Përcakton gjërësinë e kolonës

Backgroundcolor Përcakton ngjyrën e backgroundit te kolonave
span Percakton nr e kolonave qe do te marrin efektin
<html>
Shembull
<body>
<table border="1">
<colgroup align="center" width="250" style="backgroundcolor: red"></colgroup>
<colgroup span="2" align="right" width="120" style="backgroundcolor: blue"></colgroup>
<tr>
<td>Group A</td>
<td>Group B</td>
<td>Group B</td>
<td>Group B</td>
</tr>
<tr>
<td>Group A</td>
<td>Group B</td>
<td>Group B</td>
<td>Group B</td>
</tr>
<tr>
<td>Group A</td>
<td>Group B</td>
<td>Group B</td>
<td>Group B</td>
</tr>
</table>
<body>
</html>
Detyra
• Ndërtoni një faqe të thjeshtë HTML e cila përmban një tabelë që paraqet
orarin tuaj javor. Cdo kolonë e cila përfaqeson ditët e javës do të shfaqet
me një ngjyre te ndryshme.
• Shkruani një faqe HTML e cila të përmbajë tabelën më poshte:

PYETJE
Fund
Falemiderit
Email: e.tabaku@hotmail.com

Tabelat PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tabelat PDF

Uploaded by

Copyright:

Available Formats

Universiteti

Pedagogu: Eda Tabaku

• Studentët duhet të kuptojnë konceptin e tabelave si edhe

• Studentët duhet të jenë të aftë të ndërtojnë tabelat duke përdorur

• Njohja, Ndertimi dhe Sturukturat e Tabelave ne HTML

• Taget e ndryshme që percaktohet nje tabelë në HTML.

• Atributet që shoqërojnë taget përcaktuese të tabelave në

• Tabelat sherbejne si nje menyre per te paraqitur

Align Përcakton drejtimin e tekstit në tabelë, perkatësisht:

Bgcolor Përcakton ngjyrën e sfondit të tabelës.

Cellspacing Përcakton hapsirën ndërmjet qelizave që është gjërësia

• Nr i <tr> të përdorur në një tabelë përcakton nr e rrjeshtave të saj.

Disa nga Atributet që mund të shoqërojne tagun <tr>

align Përcakton drejtimin horizontal të përmbajtjes së qelizës

valign Përcakton drejtimin vertical të përmbajtjes së qelizës në

bgcolor Përcakton ngjyrën e sfondit për rrjeshtin.

• Disa nga Atributet që shoqerojnë header­in e tabeles janë:

Valign Përcakton drejtimin vertical të përmbajtjes së qelizës në të

Colspan Përcakton nr e kolonave që përfshihen në head­er.

Rowspan Përcakton numrin e rrjeshtave që përfshihen në header.

• Disa nga Atributet qe mund te shoqerojne tagun td jane:

• <thead></thead>, <tbody></tbody> dhe <tfoot></tfoot> nuk kanë ndikim

<tbody> … Element i përdorur për të përcaktuar elementet të cilët

<tfoot> … Element i përdorur për të përcaktuar një ose disa <tr>

• Specifikon karakterisitkat e kolonave, për cdo kolone brenda elementit

• Eshtë një menyrëe e mire për tu aplikuar stil të njejtë në të gjithë

Valign Përcakton drejtimin vertical të përmbajtjes së qelizave

width Përcakton gjërësinë e kolonës

• Shkruani një faqe HTML e cila të përmbajë tabelën më poshte:

You might also like

• Disa nga Atributet që shoqerojnë headerin e tabeles janë:

Colspan Përcakton nr e kolonave që përfshihen në header.