Tabelat në HTML: Një udhëzues për krijimin dhe formatimin e tabelave në HTML

Një tabelë është një komponent thelbësor në HTML për shfaqjen e të dhënave në një format të strukturuar me rreshta dhe kolona. Në HTML, tabelat krijohen duke përdorur etiketat <table>, <tr> dhe <td>.

Etiketa <table> përfaqëson kontejnerin kryesor të tabelës, i cili përmban të gjitha rreshtat dhe kolonat. Rreshtat përcaktohen duke përdorur etiketën <tr>(rreshti i tabelës), ndërsa qelizat brenda rreshtave përcaktohen duke përdorur etiketën <td>(të dhënat e tabelës). Për më tepër, mund të përdorni etiketën <th>(titulli i tabelës) për të përcaktuar qelizat e kokës për tabelën.

Ju mund të përdorni atribute si colspan dhe rowspan për të bashkuar qelizat në tabelë ose për të shtrirë qelizat nëpër rreshta dhe kolona të shumta. Për më tepër, ju mund të aplikoni vetitë CSS për të personalizuar pamjen dhe paraqitjen e tabelës.

 

Tabela( <table>)

- <table> Elementi përdoret për të krijuar një tabelë në HTML.

- Të dhënat vendosen në rreshta( <tr>) dhe kolona( <td> ose <th>).

- Çdo qelizë e të dhënave vendoset brenda elementeve <td>(qeliza e të dhënave) ose <th>(qeliza e kokës).

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

 

Kreu i kolonës( <th>)

- <th> Elementi përdoret për të krijuar titujt e kolonave në një tabelë.

- Vendoset në mënyrë tipike në rreshtin e parë të tabelës.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

 

Rreshtat e të dhënave( <tr>):

- <tr> Elementi përdoret për të krijuar rreshta të dhënash në një tabelë.

- Qelizat e të dhënave( <td>) ose qelizat e kokës( <th>) vendosen brenda këtyre <tr> elementeve.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

 

Shtrirja e kolonës( colspan)

Atributi colspan përdoret për të përcaktuar numrin e kolonave që një qelizë e të dhënave ose qelizë kokë do të shtrijë në tabelë.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

 

Shtrirja e rreshtit( rowspan)

Atributi rowspan përdoret për të përcaktuar numrin e rreshtave që një qelizë e të dhënave ose qelizë kokë do të shtrijë në tabelë.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

 

Bashkimi i qelizave( colspan dhe rowspan)

Ju mund të kombinoni të dyja colspan dhe rowspan atributet për të bashkuar qelizat në një tabelë.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

 

border prone

- border Vetia specifikon trashësinë e kufirit të tabelës.

- Vlera e border është një numër i plotë jo negativ.

<table border="1">  
<!-- Table rows and columns -->  
</table>  

 

cellpadding prone

- Vetia cellpadding specifikon distancën ndërmjet përmbajtjes së qelizës dhe kufirit të qelizës në tabelë.

- Vlera e cellpadding është një numër i plotë jo negativ

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

 

cellspacing prone

- cellspacing Vetia specifikon hapësirën midis qelizave në tabelë.

- Vlera e cellspacing është një numër i plotë jo negativ.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

 

Këto atribute dhe elemente ju lejojnë të krijoni dhe personalizoni tabelat në HTML sipas nevojave tuaja. Ju mund t'i përdorni ato për të shfaqur të dhënat në mënyrë të qartë dhe të organizuar në faqen tuaj të internetit.