Jassif Team Institution

HTML அட்டவணை தலைப்புகள்

HTML அட்டவணைகள் ஒவ்வொரு நெடுவரிசை அல்லது வரிசைக்கு அல்லது பல நெடுவரிசைகள்/வரிசைகளுக்கு தலைப்புகளைக் கொண்டிருக்கலாம்.

HTML அட்டவணை தலைப்புகள்

அட்டவணை தலைப்புகள் th உறுப்புகளால் வரையறுக்கப்படுகின்றன. ஒவ்வொரு th உறுப்பும் ஒரு அட்டவணை கலத்தைக் குறிக்கிறது.

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

செங்குத்து அட்டவணை தலைப்புகள்

முதல் நெடுவரிசையை அட்டவணை தலைப்புகளாகப் பயன்படுத்த, ஒவ்வொரு வரிசையிலும் முதல் கலத்தை <th> உறுப்பாக வரையறுக்கவும்:

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

அட்டவணை தலைப்புகளை சீரமைத்தல்

இயல்புநிலையாக, அட்டவணை தலைப்புகள் தடித்ததாகவும் மையத்திலும் இருக்கும்:

அட்டவணை தலைப்புகளை இடது சீரமைக்க, CSS text-align பண்பைப் பயன்படுத்தவும்:

th {
  text-align: left;
}

பல நெடுவரிசைகளுக்கான தலைப்பு

நீங்கள் இரண்டு அல்லது அதற்கு மேற்பட்ட நெடுவரிசைகளுக்கு பரவும் ஒரு தலைப்பைக் கொண்டிருக்கலாம்.

இதைச் செய்ய, <th> உறுப்பில் colspan பண்புக்கூறைப் பயன்படுத்தவும்:

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

அட்டவணை தலைப்புச் சொல்

முழு அட்டவணைக்கும் தலைப்பாக செயல்படும் ஒரு தலைப்புச் சொல்லை நீங்கள் சேர்க்கலாம்.

அட்டவணையில் ஒரு தலைப்புச் சொல்லைச் சேர்க்க, <caption> குறிச்சொல்லைப் பயன்படுத்தவும்:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

பயிற்சி