Majedwali katika HTML: Mwongozo wa Kuunda na Kupanga Majedwali katika HTML

Jedwali ni sehemu muhimu katika HTML kwa ajili ya kuonyesha data katika muundo ulio na safu mlalo na safu wima. Katika HTML, majedwali yanaundwa kwa kutumia <table>, <tr>, na <td> tagi.

Lebo ya <meza> inawakilisha kontena kuu la jedwali, ambalo lina safu mlalo na safu wima zote. Safu mlalo hufafanuliwa kwa kutumia lebo ya <tr>(safu ya jedwali), huku visanduku vilivyo ndani ya safu mlalo vinafafanuliwa kwa kutumia lebo ya <td>(data ya jedwali). Zaidi ya hayo, unaweza kutumia <th>(kichwa cha jedwali) kufafanua seli za vichwa vya jedwali.

Unaweza kutumia sifa kama vile colspan na safumlalo ili kuunganisha visanduku kwenye jedwali au visanduku vilivyo katika safu mlalo na safu wima nyingi. Zaidi ya hayo, unaweza kutumia sifa za CSS ili kubinafsisha mwonekano na mpangilio wa jedwali.

 

Jedwali( <table>)

- <table> Kipengele kinatumika kuunda jedwali katika HTML.

- Data imewekwa katika safu( <tr>) na safu wima( <td> au <th>).

- Kila seli ya data imewekwa ndani ya <td>(seli ya data) au <th>(kiini cha kichwa).

<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>  

 

Kichwa cha Safu wima( <th>)

- <th> Kipengele kinatumika kuunda vichwa vya safu kwenye jedwali.

- Kwa kawaida huwekwa kwenye safu ya kwanza ya jedwali.

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

 

Safu Mlalo za Data( <tr>):

- <tr> Kipengele kinatumika kuunda safu mlalo za data kwenye jedwali.

- Seli za data( <td>) au seli za kichwa( <th>) zimewekwa ndani ya <tr> vipengele hivi.

<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>  

 

Mzunguko wa Safu( colspan)

Sifa colspan hutumika kubainisha idadi ya safu wima ambazo seli ya data au kisanduku cha kijajuu kitaweka kwenye jedwali.

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

 

Msururu wa safu( rowspan)

Sifa rowspan hutumika kubainisha idadi ya safu mlalo ambazo seli ya data au kisanduku cha kichwa kitaweka kwenye jedwali.

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

 

Kuunganisha seli( colspan na rowspan)

Unaweza kuchanganya zote mbili colspan na rowspan sifa ili kuunganisha seli kwenye jedwali.

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

 

border mali

- border Mali inabainisha unene wa mpaka wa meza.

- Thamani ya border ni nambari kamili isiyo hasi.

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

 

cellpadding mali

-, cellpadding Sifa hubainisha umbali kati ya maudhui ya seli na mpaka wa seli kwenye jedwali.

- Thamani ya cellpadding ni nambari kamili isiyo hasi

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

 

cellspacing mali

- cellspacing Sifa hii inabainisha nafasi kati ya seli kwenye jedwali.

- Thamani ya cellspacing ni nambari kamili isiyo hasi.

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

 

Sifa na vipengele hivi hukuruhusu kuunda na kubinafsisha majedwali katika HTML kulingana na mahitaji yako. Unaweza kuzitumia kuonyesha data kwa njia iliyo wazi na iliyopangwa kwenye tovuti yako.