एट्रिब्यूट colspan

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

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

कैसे उपयोग करें: किसी भी td या th सेल में इस एट्रिब्यूट को जोड़ें। यदि, उदाहरण के लिए, colspan को 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 सेल को दो कॉलम तक विस्तारित करने का प्रयास करें, इसे colspan एट्रिब्यूट 2 मान पर सेट करके। इस स्थिति में, यह दाईं ओर की सेल को विस्थापित कर देगी और टेबल टूट जाएगी:

html<table>
  <tr>
    <td colspan="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;
}

Результат:

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

और अब पिछले उदाहरण से टेबल टूटने की समस्या को ठीक करने का प्रयास करते हैं, हमारी सेल के दाईं ओर की एक सेल को हटा देंगे (यह 2 या 3 सेल है - कोई फर्क नहीं पड़ता):

html<table>
  <tr>
    <td colspan="2">cell1</td>
    <td>cell2</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 सेल को 3 कॉलम तक विस्तारित करें और इसे colspan एट्रिब्यूट 3 मान पर सेट करें। इस स्थिति में, टेबल को टूटने से रोकने के लिए दाईं ओर की एक और सेल को हटा दें:

html<table>
  <tr>
    <td colspan="3">cell1</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;
}

Результат:

उदाहरण . एक साथ colspan और rowspan

आइए 4, 5, 7 और 8 नंबर वाली सेल को मिलाने का प्रयास करें, colspan और rowspan एट्रिब्यूट का उपयोग करके (टेबल से पिछले विलय हटा दें):

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

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

Результат:

यह भी देखें