टेबल स्पैन (Rowspan & Colspan)
आज हम table cells जोड़ते हैं — colspan सेल को कॉलमों में फैलाता है, rowspan पंक्तियों में नीचे खींचता है।
- 1
Cell spans क्या होते हैं
पिछले लेसन में हर सेल एक पंक्ति और एक कॉलम में बैठा। आज एक सेल चौड़ा या ऊँचा फैल सकता है — spreadsheet में सेल मर्ज करने जैसा।
colspanबताता है सेल कितने कॉलम घेरता है।rowspanबताता है कितनी पंक्तियाँ। दोनों<th>या<td>पर attributes हैं। - 2
समस्या: जब हेडिंग या डेटा को कई स्लॉट में फैलाना हो
Timetable या इनवॉइस में अक्सर ऊपर एक फुल-विड्थ हेडिंग चाहिए होती है, या एक दिन का लेबल दो क्लास रो में शेयर होना चाहिए। “Mon” दो बार लिखना बार-बार दोहराव लगता है।
इसलिए HTML ने sideways फैलाने के लिए
colspanऔर नीचे पंक्तियाँ जोड़ने के लिएrowspanदिया। जब कोई सेल नीचे की रो को घेर लेती है, तो अगली पंक्ति में उस स्लॉट को खाली छोड़ा जाता है ताकि ग्रिड ना बिगड़े। - 3
Browser Spans को कैसे कैलकुलेट और रेंडर करता है
Browser ग्रिड बनाते समय स्लॉट की गिनती करता है।
colspan="2"वाली सेल दो कॉलम का स्पेस एक साथ ले लेती है।rowspan="2"दो वर्टिकल रो का स्पेस रिज़र्व कर लेता है।नीचे दिए उदाहरण में “Timetable” हेडर दोनों कॉलम में फैला है। “Mon” दो क्लास रो को एक साथ जोड़ता है, इसलिए अगली डेटा रो में Day लिखने की ज़रूरत नहीं है—वहाँ सीधे Subject आता है।
- 4
आज का प्रैक्टिकल: Colspan और Rowspan से सुसज्जित Timetable
नीचे दिए एडिटर में Timetable का कोड देखें। ध्यान से देखें कि कैसे
colspanपूरी चौड़ाई कवर करता है औरrowspanदो रो को मर्ज करता है। - 5
स्लॉट बैलेंसिंग का नियम
ऊपर की पंक्ति में दो कॉलम हों तो
colspan="2"वाला टाइटल पूरी पंक्ति भरता है।rowspanके बाद ढकी सेल अगली पंक्ति में छोड़ दो। गलत गिनती टेबल तोड़ देती है।
सेल को चौड़ाई में 2 या अधिक कॉलम्स (Columns) में फैलाता है। जैसे टेबल का मेन हेडर।
सेल को लंबाई में 2 या अधिक पंक्तियों (Rows) में नीचे खींचता है। अगली पंक्ति में एक सेल कम लिखी जाती है।
आप क्या सीखेंगे
- 1कुछ सेल्स को एक से ज़्यादा स्लॉट चाहिए
- 2colspan कॉलमों में फैलाता है
- 3rowspan पंक्तियों में नीचे खींचता है
- 4अगली पंक्तियाँ ढकी सेल छोड़ती हैं
- 5कॉलम गिनती एक जैसी रखो
लाइन-बाय-लाइन
<th colspan="2">Timetable</th>एक header cell जो दो कॉलम घेरती है। ग्रिड के ऊपर का टाइटल।
<td rowspan="2">Mon</td>एक data cell जो दो पंक्तियाँ घेरती है। दोनों class लाइनें एक ही दिन का लेबल साझा करती हैं।
<td>Science</td>अगली पंक्ति में सिर्फ़ Class सेल चाहिए। Day ऊपर के rowspan से पहले से भरा है।
खुद ट्राई करो
दो-कॉलम table बनाओ। पहली पंक्ति पर colspan="2" वाला टाइटल। फिर दिन के नाम पर rowspan="2" और उसके नीचे दो subjects।
हिंट: rowspan के बाद अगली पंक्ति में उस कॉलम की एक सेल कम होनी चाहिए।
गलती कहाँ होती है
- 1.अगली पंक्ति में वहाँ सेल लिखना जहाँ
rowspanपहले से स्लॉट ढक चुका। ग्रिड टेढ़ी दिखती है। - 2.
colspantable के कॉलमों से बड़ा रखना। पहले गिनो, फिर फैलाओ।
इंटरव्यू की तैयारी
Q: colspan क्या करता है?↓
यह किसी सेल को क्षैतिज रूप से 2 या उससे अधिक कॉलम में फैला देता है (Horizontal Merging)।
Q: rowspan क्या करता है?↓
यह किसी सेल को नीचे की ओर 2 या उससे अधिक पंक्तियों (Rows) में फैला देता है (Vertical Merging)।
Q: rowspan के बाद अगली पंक्ति में क्या बदलाव होता है?↓
अगली पंक्ति में उस कॉलम वाली सेल को छोड़ (omit कर) दिया जाता है क्योंकि वह पहले से ऊपर के rowspan द्वारा घिरी हुई है। केवल खाली स्लॉट ही लिखे जाते हैं।