HTML- Tabelat

By
admin
Published: April 13, 2009Posted in: Html, WebTags: ,

Tabelat jane elementi me i rendesishem i kodit html. Ne fillim perdorimi i tyre ishte per te organizuar te dhenat por me pas u trasformuan ne nje element te rendesishem per layout te faqes.
Tabela eshte e formuar nga kolonat dhe rreshtat. Elementet thelbesore per ndertimin e nje tabele jane :

<table> hap tabelen

<tr> hap reshtin

<td> hap nje kuti brenda reshtit, pra prerja e reshtit me kolonen.

Le te shofim nje shembull te vogel, dhe me anen e ketij te shpjegojme edhe atributin border qe sherben per te percaktuar ne px bordin e tabeles:

<table border=”1″>
<tr>
<td>kutia e pare</td>
<td>kutia e dyte</td>
</tr>

<tr>
<td>kutia e trete</td>
<td>kutia e katert</td>
</tr>
</table>

Rezultati eshte ky :

kutia e pare kutia e dyte
kutia e trete kutia e katert

Mund te specifikome edhe gjeresine, lartesine e tabeles me ane te atributeve width, height te cilet mund te perdoren per te tre tag e permendur me lart, table, tr, td:

<table width=”300″ height=”200″ border=”1″>
<tr>
<td>Kutia e pare</td>
<td>Kutia e dyte</td>
</tr><tr>
<td>Kutia e trete</td>
<td>Kutia e katert</td>
</tr>
</table>

Rezultati:

Kutia e pare Kutia e dyte
Kutia e trete Kutia e katert

Gjeresia e lartesia specifikohen per gjithe tabelen, per nje resht ose per nje kolone por nuk mun te specifikohen per nje kuti te vetme.

Sic mund ta vini re nqs ndertohet nje tabele e madhe do kishim nje numur shume shume te madh tr, td dhe per te vene disi rregull ne kete kaos jane krijuar disa tag te rrinj:

<caption> eshte titulli, me nje koment te caktuar mbi tabelen
<thead> eshte fillimi i tabeles, pjesa fillestare e cila permabn informacione mbi permbajtjen e tabeles
<tfoot> eshte fundi i tabeles, footer, i cili permban per shembull perfundime, konkluzione
<tbody> eshte pjesa qendrore e tabeles, ajo qe perben permbajtjen e vertet te tabeles, te dhenat

<thead>, <tfoot>, <tbody> percaktojne grupe reshtash.

colspan dhe rowspan

Jane dy atribute me ane te te cilave mund te bashkojme dy kuti te te njejtit resht, apo dy kuti te te njejtes kolone. Le te shofim shembujt:

<table width=”430″ border=”1″ bordercolor=”#000000″>
<tr>
<td width=”30%”>&nbsp;</td>
<td width=”30%”>&nbsp;</td>
<td width=”30%”>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan=”2″ align=”center” valign=”middle”>
<b>&lt;td colspan=&quot;2&quot;&gt;</b>
</td>
</tr>
</table>

Rezultati:

<td colspan=”2″>
<table width=”430″ border=”1″ bordercolor=”#000000″>
<tr>
<td width=”30%”>&nbsp;</td>
<td width=”30%” rowspan=”2″ align=”center” valign=”middle”>
<b>&lt;tdrowspan=&quot;2&quot;&gt;</b>
</td>
<td width=”30%”>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Rezultati:

<tdrowspan=”2″>

Tabela brenda tabeles

Le te shofim kete shembull:

<table width=”430″ border=”1″>  <tr>
<td width=”50%”>&nbsp;</td>
<td width=”50%”>&nbsp;</td>
</tr>
<tr>
<td height=”24″>&nbsp;</td>
<td>

<table width=”100%” border=”1″>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</td>
</tr>
</table>

Rezultati:

Atributet e tag table

Keto tags na lejojne te specifikojme distancen midis kufijve te tabeles dhe permbajtjes se saj:

border percakton gjeresine e bordeve te tabeles
cellspacing specifikon distancen ne px midis dy kutiave apo midis nje kutie dhe kufirit te tabeles
cellpadding percakton distancen midis kufirit te nje kutie dhe permbajtjes se saj

Eshte e mundur te specifikojme edhe pamjen bordit te jashtem dhe bordeve te brendshme perkatesisht me dy atributet frame dhe rules:

Shembull Shpjegimi
<table border=”1″ frame=”above”>

Bordi i tabeles eshte present ne:

  • void: ne asnje ane. Eshte vlera e default
  • above: vetem ne anen e siperme
  • below: vetem ne anen e poshtme
  • hsides: vetem ne anen e poshtme dhe te siperme
  • vsides: vetem ne te majte e te djathte
  • lhs: vetem ne te majte (left-hand side)
  • rhs:vetem ne te djathte (right hand side).
  • box: ne te kater anet

<table border=”1″ rules=”rows”>

Vijat e brendshme jane presente ne:

  • none: ne asnje ane. Eshte vlera e default
  • groups:vijat ndajne grupet e reshtave (<thead>, <tfoot>, <tbody>)
  • rows:vijat ndajne <tr>
  • cols:vijat ndajne kolonat
  • all:vijat ndajne <tr> sa dhe kolonat

Atributet e table, tr, td

Per te personalizuar tabelen, reshtin, kolonen apo kutine mund te perdorim atributet qe kemi pare me pare per formatimin e tekstit si: bgcolor, align.

  • Share/Bookmark

Reth autorit