HTML இல் அட்டவணைகள்: HTML இல் அட்டவணைகளை உருவாக்குவதற்கும் வடிவமைப்பதற்கும் ஒரு வழிகாட்டி

வரிசைகள் மற்றும் நெடுவரிசைகளுடன் கட்டமைக்கப்பட்ட வடிவத்தில் தரவைக் காண்பிக்க HTML இல் அட்டவணை ஒரு முக்கிய அங்கமாகும். HTML இல், <table>, <tr> மற்றும் <td> குறிச்சொற்களைப் பயன்படுத்தி அட்டவணைகள் உருவாக்கப்படுகின்றன.

<table> குறிச்சொல் அனைத்து வரிசைகள் மற்றும் நெடுவரிசைகளைக் கொண்ட முக்கிய டேபிள் கொள்கலனைக் குறிக்கிறது. வரிசைகள் <tr>(அட்டவணை வரிசை) குறிச்சொல்லைப் பயன்படுத்தி வரையறுக்கப்படுகின்றன, அதே சமயம் வரிசைகளில் உள்ள கலங்கள் <td>(அட்டவணை தரவு) குறிச்சொல்லைப் பயன்படுத்தி வரையறுக்கப்படுகின்றன. கூடுதலாக, அட்டவணைக்கான தலைப்பு செல்களை வரையறுக்க <th>(அட்டவணை தலைப்பு) குறிச்சொல்லைப் பயன்படுத்தலாம்.

அட்டவணையில் உள்ள கலங்களை ஒன்றிணைக்க அல்லது பல வரிசைகள் மற்றும் நெடுவரிசைகளில் உள்ள கலங்களை இணைக்க, கோல்ஸ்பான் மற்றும் ரோஸ்பான் போன்ற பண்புக்கூறுகளைப் பயன்படுத்தலாம். மேலும், அட்டவணையின் தோற்றத்தையும் தளவமைப்பையும் தனிப்பயனாக்க 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 இல் அட்டவணைகளை உருவாக்க மற்றும் தனிப்பயனாக்க உங்களை அனுமதிக்கின்றன. உங்கள் இணையதளத்தில் தெளிவான மற்றும் ஒழுங்கமைக்கப்பட்ட தரவைக் காண்பிக்க அவற்றைப் பயன்படுத்தலாம்.