03 sesioni 03

Tabelat

HTML ka një grup tag-esh te cilat përdoren për te paraqitur tekstin ne formën e një tabele. Këto tag-e janë:

• TABLE: shënon fillimin dhe mbarimin e një tabele

• TR: shënon fillimin dhe mbarimin e një rreshti

• TH: shënon fillimin dhe mbarimin e një qelize ne kokën e tabelës

• TD: shënon fillimin dhe mbarimin e një qelize

• CAPTION: përdoret për ti vendosur tabelës një titull

Kodi për një tabele te thjeshte do te ishte:

<TABLE>

<TR><TH>Header 1</TH>...<TH>Header n</TH></TR>

...

<CAPTION>Title</CAPTION>

</TABLE>

Sic mund te shohin ne pjesën e kodit tabela vendoset brenda tag-eve TABLE. Çdo rresht duhet te vendoset brenda tag-eve <TR> dhe </TR>. Për te paraqitur qeliza te veçanta kemi dy mundësi: duke përdorur tag-un <TH> ose <TD>. Dallimi është se mundësia e pare përdor tekst bold dhe e qendërzon kolonën.

Tag-u TABLE ka disa atribute te cilat shërbejnë për ti dhënë tabelës formatin qe na nevojitet.

• BORDER: përcakton madhësin e konturit te qelizes.

• CELLSPACING: percakton madhesin ne pika te hapesires ndermjet qelizave.

• CELLPADDING: percakton distancen ne pika ndermet permbajtjes se nje qelize dhe borderit te saje.

• WIDTH: specifikon gjeresin e tabeles, mund te paraqitet me pika ose ne perqindje duke u bazuar ne raportin qe ajo ka me gjeresin totale. P.sh 100% perfaqson gjeresin e te gjithe dritares se browserit.

• ALIGN: pozicionin tabelen ne lidhje me faqen, ne te majte(LEFT), ne te djatëherëte (RIGHT) ose ne qender (CENTER).

• BGCOLOR: percakton ngjyren e tabeles.

Shembull tabele ne te cilin përfshihen edhe atributet e mësipërme:

<HTML>

<HEAD>

<TITLE>Document title</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<CAPTION ALIGN=bottom><strong><br>Tabele e Thjeshte</strong></CAPTION>

</TABLE>

<p ><strong>Tabele me ngjyra dhe imazh</strong></p>

<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=2

WIDTH=400 BGCOLOR=#FFFFFF>

<TR>

<TH>Qershor</TH>

<TH>Korrik</TH>

<TH>Gusht</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</TD></TR>

</TABLE>

</BODY>

</HTML>

thead, tfoot, dhe tbody

Tag-u <thead> përdoret për te grupuar përmbajtjen e headerit te një tabele HTML. Elementi thead duhet te perdoret bashke me elementet tbody dhe tfoot.

Elementi tbody përdoret per te grupuar përmbajtjen e body ne një tabele HTML dhe tag-u tfoot përdoret për te grupuar përmbajtjen e footer-it.

Ne nje tabele tag-u <tfoot> duhet te shpaqet para <tbody> ne mënyre qe një browser te mund shfaqe footer-in përpara se te marre te dhenat e te gjithe rreshtave.

Shembull i perdorimite te tag-eve thead, tfoot, dhe tbody:

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

</table>

Dizenjimi i faqes nëpërmjet tabelave

Tabelat ne website jane perdorur per dy arsye :

Per te organizuar dhe shfaqur informacionin ne formen e nje tabele, kur nje gje e tille eshte e nevojshme.

Per te krijuar layoutet e nje faqe duke perdorur tabelat e fshehura.

Perdorimi i tabelave per ten dare nje faqe ne seksione te ndryshme eshte nje mjet shume i fuqishem. Kryesishte ne lidhje me layoutet, tabelat perdororen per te funksionet e meposhteme:

Per te ndare faqen ne seksione te ndryshme
Per te krijuar menu, zakonishte perdoret nje ngjyre per pjesen header dhe nje tjeter per rreshtin tjeter ku gjenden linket.

Per te shtuar fusha formash interactive. P.sh opsionin e kerkimit.

Krijohen header te cilet ngakohen me shpejt.

Pozicionim me i lehte i imazheve te cilat jane ndare ne copa te vogla.

Nje menyre me e lehte per ta shfaqur tekstin ne kolona.

Analizojmë një faqe ne web. P.sh. moh.gov.al e cila ka pamjen e mëposhtme:

Veme re qe eshte nje bashkesi tabelash brenda njera tjetres. Tabela e madhe ka gjerësi fikse per efeket design.

Ushtrime

Ndërtoni një faqe te thjeshte HTML e cila përmban një një tabele qe paraqet orarin tuaj javor. Çdo kolone e cila përfaqëson edhe ditët e javës te shfaqet me një ngjyre te ndryshme.
Ndertoni nje faqe HTML layout-i i te cilës është ndërtuar me ane te nje tabele me tre rreshta ku rreshti i pare përfaqëson header-in e faqes dhe brenda tij vendoret nje imazh ne formën e banerit. Rreshiti i dyte, trupi i faqes, eshte i ndare ne tre kolona ku ne kolonën e pare kemi te paraqitur me ane te listave katër here fjalën “menu1”. Kjo perfaqson menune vertikale. Ne rreshtin e trete vendosni “copyright” e cila perfaqson footer-in e faqes.

Page updated

Report abuse