HTML Mësimi 7 Krijimi edhe stilimi i tabelave
Si në të gjitha mësimet e tjera unë ju sugjeroj që përpara se të shikoni shkrimin e mëposhtëm, juve ju duhet të keni lexuar edhe mësuar të gjitha mësimet e mëparshme. Për të pasur një ide të plotë ju këshilloj të shikoni listën në krahun e djathtë.</p>
Si e kam shkruar edhe më lartë tabelat janë një element shumë i rëndësishëm në HTML që ju ndihmon për orgranizimin e informacioneve të ndryshme. Gjithashtu nëse doni të ndërtoni një faqe të thjeshte fare me HTML atëher tabelat janë baza se si do të organizohet faqja. Normalisht me futjen e zhvillimin e CSS kjo metode përdoret gjithmonë edhe më pak por duhet për të kuptuar ndërtimin e një faqeje Webi.</p>
Thjeshtë krijimi i tabelave në HTML nuk është ndonjë gjë e vështirë, thjeshtë mjafton të dini përdorimin e tagut TABLE!</p>
Tagu i tabelave është një container i cili përmban shumë elementë të tjerë brënda në vetvete. Brënda tagut Table nuk lejohet të përmbahen shkrime por vetem tage të tjerë. Ky tag ka një tag hapës edhe një tag mbyllës.</p>
Elementët kryesorë për ndërtimin e tabelave janë:</p>
<tr>..</tr> – table raw, ose në shqip rrjeshti i tabelës. Ky është një container si vet tagu tabelës edhe përmban elementë të tjerë brënda në vetvete edhe rrin brënda tagut TABLE
<td>..</td> – table data, ose në shqip datat e tabelës. Ky element përmban ato që ju doni të shkruani në një tabelë. Ky tag rrin brënda tagut TR
<th>..</th> – table header, ose në shqip koka e tabelës. Ky element është një TD i veçantë sepse përdoret vetëm për rrjeshtim e parë edhe përcakton kokën e tabelës.
- Disa atribute në ndërtimin e tabelave</p>
Normalisht kur ndërtojmë tabelat ajo është e ndarë në qeliza të cilat përmbajnë informacione të ndryshme. Pikërisht kjo ndarje ose kornizat (borders) e bën atë të quhet tabelë. Ne mund të përcaktojmë trashësinë e këtyre kornizave duke përdorur atributin border në tagun TABLE. Kini kujdes sepse në default tabela nuk ka border kështu që ju duhet të shtoni atë në këtë mënyrë:</p>
<table border="1">
<tr>
<td> Testim </td>
</tr>
</table> <!-- Kjo eshte nje tabele me 1 rrjesht e 1 kolone -->
Sa më i madh të jetë numri në border aq më e trashë është korniza e tabelës.</p>
Një atribut tjetër që ju mund të përdorni në rënditjen e tekstin brënda qelizave është edhe valign. Kjo gjë përcakton se ku do të ndodhet teksti. Ju mund të zgjidhni midis këtyre tre mundësive:</p>
top – e vendos tekstin në fillim të qelizës
middle – e vendos tekstin në mes edhe kjo është default
bottom – e vendos tekstin në fund
Më poshtë keni një shembull se ku aplikohet ky atribut.</p>
<table border="1">
<tr valign="top">
<td> Testim </td>
</tr>
</table> <!-- Kjo eshte nje tabele me 1 rrjesht e 1 kolone -->
- Vendosni titull në tabelat tuaja</p>
Për vendosjen e një titulli tabelës tuaj në HTML ekziston një tag që quhet CAPTION. Tagu Caption vendoset në fillim fare brënda tagut TABLE. Një shembull e keni më poshtë:</p>
<caption>Tabele Prova </caption>
<table border="1">
<tr valign="top">
<td> Testim </td>
</tr>
</table> <!-- Kjo eshte nje tabele me 1 rrjesht e 1 kolone -->
Tani duke ditur gjërat e mësipërme ju do të jeni në gjëndje të ndërtoni një tabelë. Më posht un po ndërtoj një të tillë duke përdorur të gjithë elementët e përmendur më sipër:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Tabelat
</title>
</head>
<body>
<table border="1">
<caption> Tabela ime e pare </caption>
<tr valign="top">
<th>Autori</th>
<th>Mosha</th>
<th>Gjinia</th>
</tr> <!-- Kam krijuar nje tabele me 3 kolona -->
<tr>
<td>Romeo</td>
<td>24</td>
<td>Mashkull</td>
</tr> <!-- Kini parasysh se TD e pare i perket TH te pare e keshtu me rradh -->
<tr>
<td>Fadioni</td>
<td>25</td>
<td>Mashkull</td>
</tr>
<tr>
<td>Elona</td>
<td>23</td>
<td>Femer</td>
</td>
</table>
</body>
</html>
Nëse doni të shihni se si shfaqet në shfletues tabela e ndërtuar nga ne Klikoni Këtu.</p>
- Stilimi i tabelave</p>
Stilimi i tabelave është një art më vete edhe këshillohet të bëhet me anë të CSS kështu që për të gjithë fillestarët informacione e mësipërme mjaftonë për të hedhur hapat e parë në ndërtimin e faqeve të internetit. Kush ka njohuri në CSS mund ta bëj stilimin e tabelave shumë thjeshtë. Nëse ju nuk dini një gjë të tillë atëher mbaroni kursin e plotë të xHTML edhe pastaj kaloni të mësoni tek kursi i CSS se si ta përdorni atë për të stiluar elementë të ndryshëm. Mos harroni që të gjitha duhen bërë hap pas hapi edhe duke provuar edhe testuar edhe vetë.</p>
Doni të testoni njohuritë e marra në këtë mësim? Atëher provoni të bëni Quizin tonë:</p>
<p style="text-align: center;">
</p>
HTML Mësimi 7 – Krijimi edhe stilimi i tabelave është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=665
Si në të gjitha mësimet e tjera unë ju sugjeroj që përpara se të shikoni shkrimin e mëposhtëm, juve ju duhet të keni lexuar edhe mësuar të gjitha mësimet e mëparshme. Për të pasur një ide të plotë ju këshilloj të shikoni listën në krahun e djathtë.</p>
Si e kam shkruar edhe më lartë tabelat janë një element shumë i rëndësishëm në HTML që ju ndihmon për orgranizimin e informacioneve të ndryshme. Gjithashtu nëse doni të ndërtoni një faqe të thjeshte fare me HTML atëher tabelat janë baza se si do të organizohet faqja. Normalisht me futjen e zhvillimin e CSS kjo metode përdoret gjithmonë edhe më pak por duhet për të kuptuar ndërtimin e një faqeje Webi.</p>
Thjeshtë krijimi i tabelave në HTML nuk është ndonjë gjë e vështirë, thjeshtë mjafton të dini përdorimin e tagut TABLE!</p>
Tagu i tabelave është një container i cili përmban shumë elementë të tjerë brënda në vetvete. Brënda tagut Table nuk lejohet të përmbahen shkrime por vetem tage të tjerë. Ky tag ka një tag hapës edhe një tag mbyllës.</p>
Elementët kryesorë për ndërtimin e tabelave janë:</p>
<tr>..</tr> – table raw, ose në shqip rrjeshti i tabelës. Ky është një container si vet tagu tabelës edhe përmban elementë të tjerë brënda në vetvete edhe rrin brënda tagut TABLE
<td>..</td> – table data, ose në shqip datat e tabelës. Ky element përmban ato që ju doni të shkruani në një tabelë. Ky tag rrin brënda tagut TR
<th>..</th> – table header, ose në shqip koka e tabelës. Ky element është një TD i veçantë sepse përdoret vetëm për rrjeshtim e parë edhe përcakton kokën e tabelës.
- Disa atribute në ndërtimin e tabelave</p>
Normalisht kur ndërtojmë tabelat ajo është e ndarë në qeliza të cilat përmbajnë informacione të ndryshme. Pikërisht kjo ndarje ose kornizat (borders) e bën atë të quhet tabelë. Ne mund të përcaktojmë trashësinë e këtyre kornizave duke përdorur atributin border në tagun TABLE. Kini kujdes sepse në default tabela nuk ka border kështu që ju duhet të shtoni atë në këtë mënyrë:</p>
<table border="1">
<tr>
<td> Testim </td>
</tr>
</table> <!-- Kjo eshte nje tabele me 1 rrjesht e 1 kolone -->
Sa më i madh të jetë numri në border aq më e trashë është korniza e tabelës.</p>
Një atribut tjetër që ju mund të përdorni në rënditjen e tekstin brënda qelizave është edhe valign. Kjo gjë përcakton se ku do të ndodhet teksti. Ju mund të zgjidhni midis këtyre tre mundësive:</p>
top – e vendos tekstin në fillim të qelizës
middle – e vendos tekstin në mes edhe kjo është default
bottom – e vendos tekstin në fund
Më poshtë keni një shembull se ku aplikohet ky atribut.</p>
<table border="1">
<tr valign="top">
<td> Testim </td>
</tr>
</table> <!-- Kjo eshte nje tabele me 1 rrjesht e 1 kolone -->
- Vendosni titull në tabelat tuaja</p>
Për vendosjen e një titulli tabelës tuaj në HTML ekziston një tag që quhet CAPTION. Tagu Caption vendoset në fillim fare brënda tagut TABLE. Një shembull e keni më poshtë:</p>
<caption>Tabele Prova </caption>
<table border="1">
<tr valign="top">
<td> Testim </td>
</tr>
</table> <!-- Kjo eshte nje tabele me 1 rrjesht e 1 kolone -->
Tani duke ditur gjërat e mësipërme ju do të jeni në gjëndje të ndërtoni një tabelë. Më posht un po ndërtoj një të tillë duke përdorur të gjithë elementët e përmendur më sipër:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Tabelat
</title>
</head>
<body>
<table border="1">
<caption> Tabela ime e pare </caption>
<tr valign="top">
<th>Autori</th>
<th>Mosha</th>
<th>Gjinia</th>
</tr> <!-- Kam krijuar nje tabele me 3 kolona -->
<tr>
<td>Romeo</td>
<td>24</td>
<td>Mashkull</td>
</tr> <!-- Kini parasysh se TD e pare i perket TH te pare e keshtu me rradh -->
<tr>
<td>Fadioni</td>
<td>25</td>
<td>Mashkull</td>
</tr>
<tr>
<td>Elona</td>
<td>23</td>
<td>Femer</td>
</td>
</table>
</body>
</html>
Nëse doni të shihni se si shfaqet në shfletues tabela e ndërtuar nga ne Klikoni Këtu.</p>
- Stilimi i tabelave</p>
Stilimi i tabelave është një art më vete edhe këshillohet të bëhet me anë të CSS kështu që për të gjithë fillestarët informacione e mësipërme mjaftonë për të hedhur hapat e parë në ndërtimin e faqeve të internetit. Kush ka njohuri në CSS mund ta bëj stilimin e tabelave shumë thjeshtë. Nëse ju nuk dini një gjë të tillë atëher mbaroni kursin e plotë të xHTML edhe pastaj kaloni të mësoni tek kursi i CSS se si ta përdorni atë për të stiluar elementë të ndryshëm. Mos harroni që të gjitha duhen bërë hap pas hapi edhe duke provuar edhe testuar edhe vetë.</p>
Doni të testoni njohuritë e marra në këtë mësim? Atëher provoni të bëni Quizin tonë:</p>
<p style="text-align: center;">
HTML Mësimi 7 – Krijimi edhe stilimi i tabelave është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=665