HTML DOM टेबलडेटा colSpan प्रॉपर्टी: सेल को कई कॉलम में फैलाना

HTML DOM टेबलडेटा colSpan प्रॉपर्टी HTML दस्तावेज़ में टेबल के colspan एट्रिब्यूट का मान लौटाती और संशोधित करती है। यह एक सेल को क्षैतिज रूप से कई कॉलम में फैलाने की अनुमति देती है।

सिंटैक्स

1. colSpan प्राप्त करना:

object.colSpan

2. colSpan सेट करना:

object.colSpan = "number"

उदाहरण: फुटर को दो कॉलम में फैलाना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; width: 400px; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
</style>
<body>
  <h1>DOM टेबलडेटा colSpan प्रॉपर्टी डेमो</h1>
  <table border="2">
    <thead>
      <tr> <th>नाम</th> <th>रोल नं.</th> </tr>
    </thead>
    <tbody>
      <tr> <td>जॉन</td> <td>071717</td> </tr>
      <tr> <td>जेन</td> <td>031717</td> </tr>
    </tbody>
    <tfoot>
      <tr> <td id="span-row">टेबल फुटर</td> </tr>
    </tfoot>
  </table>
  <button onclick="get()" class="btn">फुटर फैलाएं</button>
  <script>
    function get() {
      document.querySelector('#span-row').colSpan = "2";
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: फुटर सेल केवल पहले कॉलम में (दूसरा कॉलम खाली)
2. "फुटर फैलाएं" क्लिक: फुटर सेल दोनों कॉलम में फैल जाता है

colSpan के नियम

• मान: धनात्मक पूर्णांक (1 डिफ़ॉल्ट, कोई फैलाव नहीं)
• प्रभाव: सेल दाएं के कॉलम्स पर कब्जा कर लेता है
• उसी पंक्ति: पंक्ति में कुल सेल काउंट (colSpan सहित) कॉलम काउंट के बराबर होना चाहिए
• सीमा: टेबल के कॉलम काउंट से आगे नहीं फैल सकता

दृश्य प्रतिनिधित्व

पहले (colSpan=1):        बाद (colSpan=2):
+------+------+            +--------------+
| नाम  | रोल  |            | नाम  | रोल  |
+------+------+            +--------------+
| जॉन  | 071717|            | जॉन  | 071717|
+------+------+            +--------------+
| जेन  | 031717|            | जेन  | 031717|
+------+------+            +--------------+
| फुटर |      |     →      |   टेबल फुटर    |
+------+------+            +--------------+

सामान्य उपयोग मामले

• टेबल फुटर में कुल/सारांश पंक्तियां
• समूह हेडर्स जो कई कॉलम कवर करते हैं
• मर्ज की गई सेल्स वाले फॉर्म लेआउट
• कैलेंडर/शेड्यूल में बहु-दिन इवेंट्स

colSpan + rowSpan संयोजन

<td colSpan="2" rowSpan="2">बड़ा सेल</td>
// 2x2 ब्लॉक कवर करता है