HTML <th> colspan एट्रिब्यूट: हेडर सेल कॉलम फैलाव

<th> colspan एट्रिब्यूट

colspan एट्रिब्यूट <th> (हेडर सेल) एलिमेंट पर एक हेडर सेल को कई कॉलम्स में फैलाने (span) की अनुमति देता है। यह संबंधित कॉलम्स को एक सामान्य हेडर के तहत समूहित करने के लिए उपयोगी है।

सिंटैक्स

<th colspan="number">

पैरामीटर

• number: फैलाने के लिए कॉलम्स की संख्या (धनात्मक पूर्णांक)

उदाहरण: खर्च हेडर दो कॉलम्स में फैला

<!DOCTYPE html>
<html>
<head>
  <style> table, th, td { border: 2px solid green; } </style>
</head>
<body>
  <h2>उत्पाद खर्च</h2>
  <table>
    <tr><th colspan="2">खर्च</th></tr>
    <tr><td>उत्पाद विकास</td><td>500000</td></tr>
    <tr><td>मार्केटिंग</td><td>500000</td></tr>
    <tr><td>सेवाएं</td><td>100000</td></tr>
    <tr><td>सपोर्ट</td><td>100000</td></tr>
    <tr><td>रखरखाव</td><td>100000</td></tr>
    <tr><td colspan="2">कुल बजट = INR 1300000</td></tr>
  </table>
</body>
</html>

आउटपुट

हेडर "खर्च" दो कॉलम्स (डोमेन और लागत) में फैला हुआ। अंतिम पंक्ति भी दोनों कॉलम्स में फैली।

कोड व्याख्या

<th colspan="2">खर्च</th>

मान 2 होने से हेडर सेल दो कॉलम्स में फैलता है।

colspan के साथ जटिल हेडर

<table>
  <tr>
    <th rowspan="2">उत्पाद</th>
    <th colspan="2">2023</th>
    <th colspan="2">2024</th>
  </tr>
  <tr>
    <th>Q1</th><th>Q2</th><th>Q1</th><th>Q2</th>
  </tr>
  <tr>
    <td>A</td><td>100</td><td>150</td><td>200</td><td>250</td>
  </tr>
</table>

नियम

• कुल कॉलम्स = सामान्य सेल्स + colspan मान ≤ टेबल कॉलम्स
• rowspan के साथ संयुक्त उपयोग संभव (ऊपर उदाहरण देखें)
• एक्सेसिबिलिटी के लिए scope="colgroup" जोड़ें

एक्सेसिबिलिटी सुधार

<th colspan="2" scope="colgroup">खर्च</th>

scope="colgroup" स्क्रीन रीडर्स को बताता है कि यह हेडर कॉलम समूह पर लागू होता है।