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 ਵਿੱਚ ਟੇਬਲ ਬਣਾਉਣ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। ਤੁਸੀਂ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਆਪਣੀ ਵੈਬਸਾਈਟ 'ਤੇ ਸਪਸ਼ਟ ਅਤੇ ਸੰਗਠਿਤ ਤਰੀਕੇ ਨਾਲ ਡੇਟਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਕਰ ਸਕਦੇ ਹੋ।