rowspan एट्रिब्यूट

rowspan एट्रिब्यूट HTML टेबल की पंक्तियों के विलय को नियंत्रित करता है। th और td टैग पर लागू होता है।

स्वीकार्य मान: 1 से शुरू होने वाला पूर्णांक।

उपयोग कैसे करें: इस एट्रिब्यूट को किसी भी td या th सेल में जोड़ें। यदि, उदाहरण के लिए, rowspan को 2 मान दिया जाता है - तो जिस सेल को यह दिया गया था, वह टेबल की ऊंचाई में दो पंक्तियाँ घेरेगा। इस स्थिति में, नीचे वाली पंक्ति की सेल कहीं नहीं जाएंगी, हमारा विस्तारित सेल उन्हें विस्थापित कर देगा और टेबल टूट जाएगी। ऐसा न हो इसके लिए, नीचे वाली पंक्ति की एक सेल को हटाना आवश्यक है। बेहतर समझ के लिए उदाहरण देखें।

उदाहरण . बिना विलय की टेबल

आइए एक ऐसी टेबल देखें जिसमें कोई विलय नहीं है, जिस पर हम आगे काम करेंगे:

html<table>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

उदाहरण . सेल को दो पंक्तियों में विस्तारित करें

और अब आइए सेल 1 को 2 पंक्तियों में विस्तारित करें, उसे rowspan एट्रिब्यूट 2 मान देकर। हम देखेंगे कि यह अपने नीचे वाली पंक्ति की सेल को विस्थापित कर देती है और टेबल टूट जाती है:

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

उदाहरण . टेबल को तोड़े बिना सेल को विस्तारित करें

पिछले उदाहरण से टेबल के टूटने की समस्या को ठीक करने के लिए, आइए दूसरी पंक्ति की एक सेल को हटाने का प्रयास करें (और यह जरूरी नहीं कि सेल 4 ही हो, जो सीधे हमारे सेल 1 के नीचे है, कोई भी हटाया जा सकता है, हम नंबर 5 वाली सेल को हटाएंगे):

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

उदाहरण . सेल को 3 पंक्तियों में विस्तारित करें

और यहां आइए हमारे सेल को दो नहीं बल्कि 3 पंक्तियों में विस्तारित करें, उसे rowspan 3 मान देकर। साथ ही तीसरी पंक्ति की एक सेल (सेल 7, 8 या 9 - कोई फर्क नहीं पड़ता) को हटा दें, ताकि टेबल न टूटे:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>   

csstable, td, th {
  border: 1px solid black;
}

Результат:

उदाहरण . 2 कॉलम और विस्तारित करें

आइए पहले सेल के अतिरिक्त, सेल 2 को 2 कॉलम में भी विस्तारित करें। इसके लिए सेल 2 में colspan 2 मान में जोड़ें। साथ ही सेल 3 को हटा दें, ताकि टेबल न टूटे:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td colspan="2">cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

यह भी देखें