HTML માં કોષ્ટકો: HTML માં કોષ્ટકો બનાવવા અને ફોર્મેટ કરવા માટેની માર્ગદર્શિકા

પંક્તિઓ અને કૉલમ સાથે સંરચિત ફોર્મેટમાં ડેટા પ્રદર્શિત કરવા માટે HTML માં કોષ્ટક આવશ્યક ઘટક છે. HTML માં, કોષ્ટકો <table>, <tr> અને <td> ટૅગનો ઉપયોગ કરીને બનાવવામાં આવે છે.

<table> ટૅગ મુખ્ય ટેબલ કન્ટેનરનું પ્રતિનિધિત્વ કરે છે, જેમાં બધી પંક્તિઓ અને કૉલમ હોય છે. પંક્તિઓ <tr>(ટેબલ પંક્તિ) ટૅગનો ઉપયોગ કરીને વ્યાખ્યાયિત કરવામાં આવે છે, જ્યારે પંક્તિઓની અંદરના કોષોને <td>(ટેબલ ડેટા) ટૅગનો ઉપયોગ કરીને વ્યાખ્યાયિત કરવામાં આવે છે. વધુમાં, તમે કોષ્ટક માટે હેડર કોષોને વ્યાખ્યાયિત કરવા માટે <th>(ટેબલ હેડર) ટૅગનો ઉપયોગ કરી શકો છો.

તમે કોષ્ટકમાં કોષોને મર્જ કરવા અથવા બહુવિધ પંક્તિઓ અને કૉલમ્સમાં સ્પાન સેલ્સને મર્જ કરવા માટે colspan અને rowspan જેવી વિશેષતાઓનો ઉપયોગ કરી શકો છો. વધુમાં, તમે કોષ્ટકના દેખાવ અને લેઆઉટને કસ્ટમાઇઝ કરવા માટે CSS ગુણધર્મો લાગુ કરી શકો છો.

કોષ્ટક( <table>)

- <table> એલિમેન્ટનો ઉપયોગ HTML માં ટેબલ બનાવવા માટે થાય છે.

- ડેટા પંક્તિઓ( <tr>) અને કૉલમ( <td> અથવા <th>) માં મૂકવામાં આવે છે.

- દરેક ડેટા સેલ <td>(ડેટા સેલ) અથવા <th>(હેડર સેલ) તત્વોની અંદર મૂકવામાં આવે છે.

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

કૉલમ હેડર( <th>)

- <th> તત્વનો ઉપયોગ કોષ્ટકમાં કૉલમ હેડર બનાવવા માટે થાય છે.

- સામાન્ય રીતે ટેબલની પ્રથમ હરોળમાં મૂકવામાં આવે છે.

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

ડેટા પંક્તિઓ( <tr>):

- <tr> તત્વનો ઉપયોગ કોષ્ટકમાં ડેટા પંક્તિઓ બનાવવા માટે થાય છે.

- ડેટા કોષો( <td>) અથવા હેડર કોષો( <th>) આ <tr> તત્વોની અંદર મૂકવામાં આવે છે.

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

કૉલમ સ્પેનિંગ( colspan)

એટ્રિબ્યુટનો colspan ઉપયોગ કૉલમની સંખ્યાને નિર્ધારિત કરવા માટે થાય છે કે જે ડેટા સેલ અથવા હેડર સેલ કોષ્ટકમાં સ્પેન કરશે.

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

પંક્તિ ફેલાવો( rowspan)

એટ્રિબ્યુટનો rowspan ઉપયોગ પંક્તિઓની સંખ્યા નક્કી કરવા માટે થાય છે કે જે ડેટા સેલ અથવા હેડર સેલ કોષ્ટકમાં સ્પેન કરશે.

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

કોષોને મર્જ કરવું( colspan અને rowspan)

તમે કોષ્ટકમાં કોષોને મર્જ કરવા માટે બંને colspan અને વિશેષતાઓને જોડી શકો છો. rowspan

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

border મિલકત

- border મિલકત કોષ્ટકની સરહદની જાડાઈને સ્પષ્ટ કરે છે.

- નું મૂલ્ય border બિન-ઋણાત્મક પૂર્ણાંક છે.

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

cellpadding મિલકત

-, cellpadding ગુણધર્મ કોષની સામગ્રી અને કોષની સરહદ વચ્ચેનું અંતર કોષ્ટકમાં દર્શાવે છે.

- નું મૂલ્ય cellpadding બિન-ઋણાત્મક પૂર્ણાંક છે

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

cellspacing મિલકત

- cellspacing ગુણધર્મ કોષ્ટકમાં કોષો વચ્ચેનું અંતર સ્પષ્ટ કરે છે.

- નું મૂલ્ય cellspacing બિન-ઋણાત્મક પૂર્ણાંક છે.

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

આ વિશેષતાઓ અને તત્વો તમને તમારી જરૂરિયાતો અનુસાર HTML માં કોષ્ટકો બનાવવા અને કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે. તમે તેનો ઉપયોગ તમારી વેબસાઇટ પર સ્પષ્ટ અને વ્યવસ્થિત રીતે ડેટા પ્રદર્શિત કરવા માટે કરી શકો છો.